"The Top 5 Mistakes of Massive CSS"
summary
A study of the Alexa top 1000 loads each site with a Fiddler script and finds 42% of sites send uncompressed CSS, 44% serve more than two CSS files, 56% send CSS with cookies, and 62% don’t minify (minification yields ≥10% savings for 62% of sites). Object-oriented CSS and a tiny reusable media block (four lines of CSS) let Facebook cut H1–H6 declarations from 958 to 25, reduce CSS bytes/page 19% and HTML bytes/page 44%, and halve response time in six months.
AI-written summary · about
chapters (35)
- 0:00Intro
- 3:33Alexa Study
- 5:50Kudzu
- 8:43ObjectOriented CSS
- 11:32Architecture
- 14:10Pattern Matching
- 15:22Stale Rules
- 17:14unpredictability
- 18:00headings
- 18:48unpredictable code
- 19:06sitewide heading solution
- 20:20Facebook
- 21:16specificity wars
- 22:57hacks
- 24:06IDs
- 24:42Important
- 26:03Style Classes
- 26:18Style Without Elements
- 27:04Duplication
- 27:30grep
- 27:51Reset stylesheet
- 28:18Reset margin
- 29:03Float
- 30:52Fontsize
- 31:37How Facebook reduced duplication
- 31:58The same object
- 32:12Nested objects
- 32:49What not to do
- 33:38Structure from Chrome
- 34:05HTML
- 34:21CSS
- 34:49Facebook Stream
- 35:36The Real World
- 36:11Facebook Developer Blog
- 36:37How to contact Nicole
