CSS Efficiency

Con­sid­er­ing how much CSS I write on a daily basis, I never won­dered what is the fastest way to ren­der the CSS I pro­duce, and what are the costs in CPU and load time.

Chris Coyier did a nice research explain­ing what are the most fast and effi­cient selec­tors in CSS,  and I’ll sum­ma­rize his find­ings here.

• Right to Left — Browsers read you selec­tors from right-to-left, i.e. if you have a selec­tor as such: ul > li a[title="home"] the browser will first look for an ele­ment a with the attribute title equal to home and only then check if it’s a descen­dant of an li tag.
• ID’s are the most effi­cient selec­tors, uni­ver­sal selec­tors are the least efficient.
• Tag qual­i­fy­ing (ul#navigation) is very inef­fi­cient, don’t use them.
• Descen­dant selec­tors (html body ul li a) are effi­ciency dis­as­ter as Chris puts it.

To read the rest of the arti­cle I sug­gest you visit css-tricks.com, worth the read.

/e.s