Front End Legos: Better Design with Reusable HTML & CSS
summary
Argues that CSS must be organized into base / components / modules, with layout separated from theme and selectors kept simple so specificity stays low (avoid nested selectors beyond ~4). Recommends practical tactics: use class-based reusable patterns, sprites and data URIs, gzip and image compression (ImageOptim, PNGGauntlet), combine files to reduce requests, and preprocessors (Sass/SCSS with extend). Claims these steps cut payloads dramatically — HTML from ~4.18 KB to ~1.65 KB (~60% savings) — and recommends a living style guide.
AI-written summary · about
chapters (14)
- 0:00Intro
- 3:12BEST BAD PRACTICES
- 4:35SPECIFICITY?
- 6:30TECHNIQUE
- 9:13ASSEMBLE LAYOUT
- 10:18ACCOMMODATE CONTENT
- 12:30WATCH SPECIFICITY
- 15:22USE CLASSES
- 18:01METHODOLOGIES
- 18:48REUSE CODE
- 20:06MINIMIZE REQUEST
- 20:31IMAGE SPRITES
- 21:29DATA URIS
- 23:12COMPRESS & CACHE FILES
related talks
44mNormalising designs for better quality CSS
32mModular & reusable front end code
36m10 Commandments for Efficient CSS Architecture
24mScalable CSS: Challenges and Rewards of an Uphill Journey
37mFront-End: Fun, Not Frustration
49mBuild Scalable, Automated CSS
40mThe ABC's of Architecting Better CSS
50mEffortless Style