joshsmith/gist:1932988

## gistfile1.md

      
    Raw
  

              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.