Code Formatting CSS

Code Formatting CSS

Rule of Thumbs

1. Do not use tabs, use four spaces instead
2. Indentation should have 4 spaces
3. Do not leave space at end of line
4. At end of file leave a new line
5. Leave a new line before each selector
6. One selector per line, one rule per line
7. List related properties together
8. Zero does not need unit
9. Avoid to use ID's

Have a plan for class naming, use practical class values

Good

.red-rouded-box { ... }

Bad

.alert-message { ... }

Comments and coding should be written on English and you should organize your code with comments

Good

/* Primary header */
header { ... }

/* Featured footer */
footer { ... }

/* Buttons */
.button { ... }

Bad

header { ... }
footer { ... }
.button { ... }

Use Shorthand Properties, Values and Hexadecimal Colors

Good

img {
    margin: 5px 10px;
    background-color: #CCC;
    color: #FA8;
}

button {
    padding-left: 20px;
}

Bad

img {
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 10px;
    background-color: #CCCCCC;
    color: #FFAA88;
}
button {
    padding: 0 0 0 20px;
}

Write CSS Using Multiple Lines and Spaces

Good

a,
.btn {
    background-color: #CCC;
    color: #0C0;
    padding: 5px;
}

Bad

a,.btn{background-color: #CCC;color: #0C0;padding: 5px;}

Modularize Styles for Reuse

Good

.rounded-border-box {
    background: #eee;
    border: 1px solid #EEE;
    border-radius: 5px;
}

Bad

.news {
    background: #eee;
    border: 1px solid #EEE;
    border-radius: 5px;
}

.events {
    background: #eee;
    border: 1px solid #EEE;
    border-radius: 5px;
}

Group and Align Prefixes

Good

.shadown-box {
background: -webkit-linear-gradient(#CCC, #045);
background:    -moz-linear-gradient(#CCC, #045);
background:         linear-gradient(#CCC, #045);
-webkit-box-shadow: 10px 10px 5px #888;
   -moz-box-shadow: 10px 10px 5px #888;
        box-shadow: 10px 10px 5px #888;
}

Bad

.shadown-box {
  background: -webkit-linear-gradient(#CCC, #045);
  background: -moz-linear-gradient(#CCC, #045);
  background: linear-gradient(#CCC, #045);
  -webkit-box-shadow: 10px 10px 5px #888;
  -moz-box-shadow: 10px 10px 5px #888;
  box-shadow: 10px 10px 5px #888;
}