The following are my notes from this presentation at the Velocity 2010 conference:

The Top 5 Mistakes of Massive CSS
Nicole Sullivan, Consultant
Stoyan Stefanov, Google
2010 O’REILLY Velocity – Web Performance and Operations Conference
June 22 – 24, 2010

(Length 37 minutes, 54 seconds)

(Some demo isssues the first couple of minutes of the video…)

Why optimize CSS?

  • It blocks progressive rendering
  • Does not minimize as well as javascript

Top 1000 Alexa Sites Study

  • 42% don’t gzip CSS
  • 44% more than 1 CSS file
  • 56% serve CSS with cookie
  • 62% don’t minify
  • 21% have > 100K of CSS

Object oriented CSS is a way to make CSS smaller.

  • Concentrate on the selector
  • Example: Grids projects, 574 butes, 14 lines

Granularity Fail + Stale Rules + Unpredicatbility + Duplication + Specificity Wars = Massive CSS

#5 Granularity Fail

  • should not match underlying programming object model
  • compare to legos – use CSS similarly
  • How to determine if correct
  • 1) Perform a visual inventory
    • Take a site object
    • Break it down into component CSS objects
    • Look for repeating patterns, for example headings
  • 2) Develop library of component parts

#4 State Fails

2 types of stale:

  • Truly stale – no longer in use
  • Rules used after user action or on subsequent pages

  • Try dust-me selectors
  • Track over time

#3 Unpredictability

  • Elements should be consistent across site (like lego bricks that don’t change behavior depending on where they are used…)
  • How to test? Search for repeating definitions of same item (for example grep h[1-6]

#2 Specificity Wars

  • Programmers making items more specific in order to prevent others from overriding their settings

How to simplify:

  • Use hacks sparingly
  • Avoid styling ids
  • Avoid !important

What to do

  • Style classes rather than elements
  • Give rules the same strength

#1 Duplication

  • Grep is your friend
  • grep for margin set to zero – too many, may need a reset stylesheet
  • grep for float – too many, may need grid system
  • grep for font-size – may be heading disguised as something else
  • Example from Facebook