CSS Lint for Massive Sites
summary
Audit of Alexa top 1000 sites shows concrete failures: 42% not gzipping, 44% have >2 CSS files, 56% send CSS with cookies, and many sites exceed 100 KB. A hands‑on workflow uses grep and visual inventory to extract repeated objects, builds a component library (media object) to remove duplication, and automates checks with a CSS lint/testing tool written in JavaScript. At scale this fixes bloat — e.g. an initial 1.9 megabytes of CSS and 706 files leads to measurable gains and a reduced response time in half.
AI-written summary · about
chapters (21)
- 0:00Start
- 2:58WHY OPTIMIZE CSS?
- 9:4744% HAVE MORE THAN 2 CSS FILES
- 10:0462% DON'T MINIFY
- 10:2321% HAVE 100K OF CSS
- 20:107 SMALLER OBJECTS
- 24:58SIMPLE STEPS TO A VISUAL INVENTORY
- 25:56TEXT TREATMENTS (TINY EXCERPT)
- 26:19LOOK MORE CLOSELY...
- 27:26SIMPLE OBJECTS
- 28:09WHAT DON'T WE KNOW?
- 30:17SEPARATE STRUCTURE FROM CHROME
- 30:50A FEW LINES OF HTML...
- 31:074 LINES OF CSS...
- 32:35WHAT MAKES A GOOD COMPONENT?
- 37:31KONGREGATE DEMO
- 40:24STEPS TO INTEGRATE
- 41:51TWO MAIN PIECES
- 42:02TESTING RENDERING
- 42:38LINTING
- 43:38GRIDS
