|
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.
|
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