This is something you should think about, everybody wants a fast page load and good website performance. Most of the time, this problem is a discussed as a client-side JavaScript issue, but sometimes, we can optimize browser rendering with better CSS code.
I'm not referring to things like minifying CSS, compression, or techniques like CSS Sprites, which definitely improve performance, but this is a good place to start thinking about CSS optimization. I want to discuss straight CSS coding and explain how you can write better CSS code by efficiently using CSS selectors.
1. Order of most efficient to least efficient: ID, class, tag, and universal. Thus, you should generally avoid the universal key selector (body > * {…}) and overall, make your rules as specific as possible.
2. Descendant selectors are really inefficient (html ul li a {…}) especially the tag or universal selectors. This is because browsers read CSS selectors from right to left. So, when the browsers evaluate even a simple tag descendant selector (#main li {…}) they do not look for the ID first and the tag children second. Instead, the browser finds all the li tags in the DOM, and then traverses up the DOM tree to find the matching #main ID selector.
3. Avoid using overly qualified selectors. I see this all the time (ul#nav {…}) and its just wasteful because ID selectors are unique by definition (ul#nav {…} = #nav {…}) so the tag name UL is not needed and extra information for the browser to evaluate. If you are thinking about readability, then just use a comment(/*ul*/ #nav {…}).
4. Rely on inheritance, learn which CSS properties inherit, and let them inherit, write less code, give the browser less work.
5. Avoid using redundant ancestors in descendant selectors. The descendant selector shown above (html ul li a {…}) has a redundant html selector, since all elements are descendants of the html tag.
6. Avoid using :hover on non-anchor elements as you might his performance issues in IE7 and IE8, and if you are coding for all browsers, you already know it does not work in IE6.
7. You should probably avoid CSS3 selectors (:nth-child) completely because they are really inefficient. Plus, they do not work in older browsers. Of course, if you don't care about certain browsers, and the alternative to CSS3 is some JavaScript code, it might be better to use CSS3.
These are some things you should be thinking about when doing xhtml/css code. These are not rules, but just advice on how to code CSS for better performance. Following these guidelines completely is actually pretty impractical as you would have a fast page with all unique ID's which is non-semantic and hard to maintain. But, it's still good information to know, and sometimes, it can help you write better CSS code.
Source and more Links:
I should also note that jQuery also interprets data and text from left-to-right, so when you use descendants ($('.one span');) it will first look for all instances of "span" and then it will work its way to parent nodes to find an element with class "one"
ReplyDeleteThe recent tutsplus article elaborates on this.