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

...

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;
}

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;
    }
 }