CSS Best Practices

Below are best practices for CSS when coding for the Genesis Framework:

1. Alphabetize properties in declaration blocks.

The right way to do it:

#content {
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 0 0 20px;
    padding: 20px;
}

The wrong way to do it:

#content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 0 0 20px;
    background-color: #fff;
}

2. Use 3-digit hexcodes where applicable.

The right way to do it:

#content {
    background-color: #fff;
}

The wrong way to do it:

#content {
    background-color: #ffffff;
}

3. Use lowercase letters in hexcodes where applicable.

The right way to do it:

#content {
    background-color: #fff;
}

The wrong way to do it:

#content {
    background-color: #FFF;
}

4. Place one selector per line with rule sets.

The right way to do it:

.menu-primary,
.menu-secondary,
#header .menu {
     background-color: #fff;
}

The wrong way to do it:

.menu-primary, .menu-secondary, #header .menu {
     background-color: #fff;
}

5. Place one declaration per line with rule sets.

The right way to do it:

#content {
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 0 0 20px;
    padding: 20px;
}

The wrong way to do it:

#content {
    background-color: #fff; border: 1px solid #ddd; margin: 0 0 20px; padding: 20px;
}

6. Consolidate repetitive values within a declaration.

The right way to do it:

#content {
     padding: 10px 20px;
}

The wrong way to do it:

#content {
     padding: 10px 20px 10px 20px;
}

7. Do not indent the closing bracket of a rule set.

The right way to do it:

#content {
    background-color: #fff;
}

The wrong way to do it:

#content {
    background-color: #fff;
    }

BG