CSS Guidelines

CSS

Formatting

• Try not to use ID selectors: they should be used only for JS purpose
• Use dashes instead of camelCasing, underscore or PasalCasing in class names
• Put closing braces } of rule declarations on a new line
• In properties, put a space after, but not before, the : character
• Put blank lines between rule declarations

Bad

.avatar{
    border-radius:50%;
    border:2px solid white; }
#lol-no {
  // ...
}

Good

.avatar{
    border-radius: 50%;
    border: 2px solid white;
}

JavaScript hooks

Try to use IDs when the element is used in JS. If you must use a class, avoid binding to the same class in both your CSS and JS. You should use JS-specific classes to bind to, prefixed with .js-:

<button class='btn js-request'>Request</button>

Ordering

Put first the box properties (display, width, height...), then the position properties (position, margin...), then the others properties that could have an impact on the element width (such as font-size, font-weight...) and finally everything else.

Example

.btn{
    display: inline-block;
    padding: 20px;
    border: 1px solid;
    margin: 10px 0 0;
    font-size: 2em;
    background: red;
    color: #000;
}

Class naming

Your class names should be as short as possible but as long as necessary. For example, .nav not .navigation, .author not .atr.

Your class name should tell you:

• what type of thing it does
• where it can be used
• what (else) it might be related to

If it's a generic class, you can use only the role to name it, like .container, .title.

Then for more specific elements, put first its context, then its role: .post-container, .post-title, and stick to the same context name once you choose it.

Try to use content related name rather than code related name: .btn-error is better than .btn-red.

Shorthands

Use 0 instead of none to specify that a style has no border, and use shorthands when you can.

Bad

.foo{
    padding: 20px 30px 40px 30px;
    border: none;
    margin: 50px 50px 50px 50px;
    transition: all 1s ease-in;
}

Good

.foo{
    padding: 20px 30px 40px;
    border: 0;
    margin: 50px;
    transition: 1s ease-in;
}

Units

Try avoiding the use of px. Font-size should be in rem or em, margin in em, width in %; don't forget the vh/vw units (for a full height section for example). Px are good in some cases, like gutters.

Comments

• Prefer line comments (// in Sass-land) to block comments
• Prefer comments on their own line. Avoid end-of-line comments
• Write detailed comments for code that isn't self-documenting (z-index, compatibility or browser-specific hacks...)

SASS

Ordering

• List all standard property declarations, anything that isn't an @include or a nested selector, in the order detailed above.
• Grouping @includes at the end makes it easier to read the entire selector.
• Nested selectors, if necessary, go last, and nothing goes after them.

Example

.btn{
    background: green;
    font-weight: bold;
    @include transition(background 0.5s ease);
    &.blue{
        background: blue;
    }
    .icon {
        margin-right: 10px;
    }
 }

Nested selectors

Do not nest selectors more than three levels deep!

.container{
    .content{
        .title{
            // STOP!
        }
    }
}

When selectors become this long, you're likely writing CSS that is:

• Strongly coupled to the HTML (fragile) —OR—
• Overly specific (powerful) —OR—
• Not reusable

Again: never nest ID selectors!

If you must use an ID selector in the first place (and you should really try not to), they should never be nested. If you find yourself doing this, you need to revisit your markup, or figure out why such strong specificity is needed. If you are writing well formed HTML and CSS, you should never need to do this.