CSS Coding Standards

From Wikipedia of the Dark Jedi Brotherhood, an online Star Wars Club
Dark Brotherhood Coding Standards
Coding Standards and Practices
ASP Coding Standards CSS Coding Standards Database Standards
HTML Coding Standards JavaScript Coding Standards PHP Coding Standards

Avoid Inline Styles

Inline styles should never be used (e.g. style="..."). Instead, use an external stylesheet.


Writing efficient CSS is key to enhanced user experience. Check out this article for some good information on efficient CSS (we've liberally extracted contents from this article).

Right to Left

There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */

When we combine this right-to-left idea, and the key selector idea, we can see that this selector isn’t very efficient:

#main-nav > li {   }  /* Slower than it might seem */

Don't tag-qualify

Don't do this:

ul#main-navigation {  }

ID’s are unique, so they don’t need a tag name to go along with it. Doing so makes the selector less efficient.

Don’t do it with class names either, if you can avoid it. Classes aren’t unique, so theoretically you could have a class name do something that could be useful on multiple different elements. And if you wanted to have that styling be different depending on the element, you might need to tag-qualify (e.g. li.first), but that’s pretty rare, so in general, don’t