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.

Thanks @evocateur! Do you have a link to any resources discussing that? I wrote this for our team of designers to use internally.

Cruising StackOverflow, I come up with this:
http://stackoverflow.com/questions/2168855/css-url-whats-better/2168861#2168861

According to the W3C, apparently the spec says they are optional, and if used, must be appropriately paired. I think it's cleaner to omit them, unless you absolutely need to quote special characters (whitespace or parentheses, usually) in the URI. If you've got literal whitespace or parentheses in your URIs, however, you've got bigger problems...

I'm in the process of writing a style guide for my teammates as well, and I encountered this via Google. :)

Awesome! Definitely publicize yours and maybe we can team up for world domination. Are you still at Zillow (as per your GH)?

…

On Wed, Feb 29, 2012 at 4:15 PM, Daniel Stockman < ***@***.*** > wrote: Cruising StackOverflow, I come up with this: http://stackoverflow.com/questions/2168855/css-url-whats-better/2168861#2168861 According to the W3C, apparently the spec says they are optional, and if used, must be appropriately paired. I think it's cleaner to omit them, unless you absolutely need to quote special characters (whitespace or parentheses, usually) in the URI. If you've got literal whitespace or parentheses in your URIs, however, you've got bigger problems... I'm in the process of writing a style guide for my teammates as well, and I encountered this via Google. :) --- Reply to this email directly or view it on GitHub: https://gist.github.com/1932988

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.