CSS code conventions

gistfile1.md

CSS code conventions

Block style

selector {
    property: value;
}

• Each selector is on its own line.
• Property-value pairs on their own lines.
• One-tab indentation and one semicolon.
• Trailing curly brace is flush left.

Correct

#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

Incorrect

#selector-1, #selector-2, #selector-3 {
    background: #fff; color: #000;
    }
#selector-1 { background: #fff; color: #000; }

Class names: lowercased, dashed, semantic

Correct

#comment-form {
    margin: 0;
}

Incorrect

#commentForm { /* Avoid camelcase. */
    margin: 0;
}
#comment_form { /* Avoid underscores. */
    margin: 0;
}
#c1-xr { /* What is a c1-xr?! Use a better name. */
    margin: 0;
}

Use HTML tags for semantic naming

Avoid over-naming when HTML tags will suffice.

<div class="main">
  <h1>Header</h1>
  <p>Paragraph</p>
</div>

Comment, comment, comment

Except when you shouldn't. Let the code do the talking when it can.

Comment conventions

/* Short comments: one line with no trailing space. */
#selector-1 {...

#selector-1 {
    color: #000; /* A short comment can also follow one property/value pair. */
}

/*
For longer, multiple line comments that need more room,
add a newline before and after the comment.
Leave one line of space before the next block.
*/

Comment blocks

#previous-block {
    color: #000;
}


/* =Name of section
-------------------------------------------------------------- */

#selector-1 {...

Avoid heavy namespacing

Phrase based on what it is rather than where. Use the tag names to avoid style leakage.

Bad

div#page div.teaser ul.products li p.name

Good

ul.products p.name

Prefer long-hand over short-hand.

background-color: lime;
background-image: url('rofl.png');

This is too easy to override:

background: url('woot.png') prange 0 50% repeat fixed;

Sanitize text

If headings need to be uppercase, put a text-transform.

Test often

Test in IE, Firefox, and Safari often.

No conditional comments

Don't build separate solutions for IE.

Floats

Set floated items to display-inline. This fixes the double margin float bug in IE.

Specify pseudo-selectors on links.

:link, :visited, :hover, :focus, :active Avoids inheritance issues in IE.

Indeed I am. Our team is exploding in size, and ye olde startup-style cowboy coding is swiftly becoming a bug farm (as well as making mentoring and navigating foreign code painful).

I'm drawing lots of inspiration from http://www.phpied.com/css-coding-conventions/ as well, with modern updates. I'll let you know if I think of any improvements over what you've got already, most of my customizations are reflections of our gigantic codebase.