Simplifying CSS Selectors
Baris Aydinoglu
July 20, 2015
Agenda:
I CSS Performance Tips
I Types of Selectors
I The Key to E�cient CSS Selectors
I CSS Selector Performance
CSS Performance Tips
”Place stylesheets in the HEAD to
promote progressive rendering.
(w3c)
”Don’t use CSS expressions!
”Inline styles increase page size!
Types of Selectors
CSS Diner
ID:
I #header
I #logo
I #footer
Class:
I .clearfix
I .warning
I .alert
I .container
Type:
I span
I div
I p
I td
Adjacent Sibling !!!:
I .clearfix + span
I table + table
Child !!!:
I ul.header_menu > li
I table > tr
I .button_container > button
Descendant !!!:
I #footer a
I #header li
I .container input
Universal !!!:
I *
I body * * table * ul
Attribute !!!:
I [target="_blank"]
I [data-type="detail"]
I [href|="https"]
Pseudo-Classes and
Pseudo-Elements:
I a:first-child
I a:hover
The Key to E�cient CSSSelectors
Rightmost First:
I #header > li
I .footer a
”Avoid universal selectors
”Question all usages of
I Adjacent sibling selectors
I Attribute selectors
I Child -> selectors
I Descendant selectors
”Don’t overqualify ID and class
selectors
I span#currency -> #currency
I li.chapter -> .list-chapter
”Make rules as specific as
possible
I ul li a -> .list-anchor
”Rely on inheritance
CSS SelectorPerformance
”Complex Selectors Impact
Performance
Universal *
Descender div div div p a.link
Child div > div > div > p > a.link
Class .link
Tag a
ID a#goBack
ID #goBack(worst to best)
Figure: Load time di�erence for simple vs complex selectors
Reflow Time:
I Interaction & modification
I Only a�ected elements
I Body element takes more time
Web site CSS rule DOM element DOM Depth
AOL 2289 1628 13eBay 305 588 14Facebook 2882 1966 17Google 92 552 8Live Search 376 449 12MSN 1038 886 11MySpace 932 444 9Wikipedia 795 1333 10Yahoo! 800 564 13YouTube 821 817 9Average 1033 923 12
Go Deeper:
I https: // developer. mozilla. org/ en-US/ docs/ Web/ Guide/ CSS/
Writing_ efficient_ CSS
I http: // stevesouders. com/ efws/ css-selectors/ csscreate. php
I http: // csstriggers. com
That’s all Folks!
@barisaydinoglugithub.com/barisaydinoglu
[email protected]