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

baris@aydinoglu.info