CSS Coding Standards

You must unlearn what you have learned. This article contains obsolete data. It reflects a Dark Brotherhood policy, position, or object that has been removed or replaced. It is preserved here for historical purposes only and should not be used/referenced.

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.

Efficiency

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