CSS Guidelines

Formatting

• Try not to use ID selectors: they should be used only for JS purpose
• Use tabs (4 spaces) for indentation
• 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>

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...)

Border

Use 0 instead of none to specify that a style has no border.

Bad

.foo {
    border: none;
}

Good

.foo{
    border: 0;
}