Velocity 2010: Nicole Sullivan, “The Top 5 Mistakes of Massive CSS”
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