How-To: CSS Naming convention.

When writing CSS it's a good idea to follow some sort of naming convention. This will involve a little thought in the early design stages but can save significant time when maintaining the finished code. It's less important which exact conventions you choose to follow - but this page has a few suggestions.

The benefits of a naming convention are more to do with human factors than anything else, if fact you can choose to minify the final CSS code.

Names

Name CSS Class selectors and ID selectors in lowercase and use dashes to separate words .social-header {…}

When choosing a name don't describe the values that the selector will apply (color, position etc) as these could change in a future redesign.

When writing CSS rules, it is good for performance to minimise the number of selectors (at most 3 selectors in each rule)
To facilitate this you can add additional; more specific; Classes or IDs to the HTML markup:
/* Bad */
header nav ul li a {…}

/* Good */
.social-link {…}

Place any vendor-prefixed properties before the non-prefixed property in the style sheet. This ensures that when a browser starts to support the official W3C property then the W3C property will take precedence. (the last style definition wins)

Punctuation

Include one space before the opening brace of declaration blocks my-style {width: 3000em;}

Include one space after the colon in each property width: 3000em

End all declarations with a semi-colon width: 3000em;
(semicolons are in fact only required between declarations, but using one everywhere will reduce errors when editing the stylesheet.)

Comma-separated values should include a space after each comma {font-family: Helvetica, Arial, Sans-Serif;}

but don't include spaces after commas in RGB colors, and don't prefix with a leading zero {color: rgb(255,12,5);}

Lowercase hex values color: #ff00aa

Quote attribute values in selectors
(quotes are in fact only required if the value contains whitespace, but using them everywhere will reduce errors when editing the stylesheet.)
e.g. Match SPAN elements with a "class" attribute having the value "example":
span[class="example"] {…}

Don't specify units (px, pt etc) for a zero value margin: 0;

Multi-Line CSS

Each declaration should appear on its own line (i.e. don't randomly mix multi-line and single line CSS declarations)

indent multi-line CSS with 2 spaces (soft tabs)
Indent any vendor prefixed properties, so that they line up with the equivalent non-prefixed property.

Place the closing brace on a new line
}

List all CSS properties in alphabetic order. This makes it easy to spot any duplicate or conflicting definitions.

“Always end the name of your child with a vowel, so that when you yell the name will carry” ~ Bill Cosby