Shrinking CSS

on YouTube ↗25m

" summary

A new open-source minifier called CSS shrink parses full CSS ASTs (uses the Gonzalez parser instead of regex hacks) and actually rewrites values: color representations pick the smallest form, zeros and units are stripped, seconds replace milliseconds, shorthands and adjacent selectors merge, duplicates and unused IE hacks are removed, and browser-specific CSS (BSCSS) drops unsupported properties so old IE can lose roughly half of Bootstrap. Tests run by pixel-compare across headless engines using PhantomJS pixel diff and smaller Firefox/IE runners to catch regressions.

AI-written summary · about

" chapters (6)

1. 0:00The CSS challenge
2. 2:59Parsing and minification
3. 7:07Minification techniques
4. 11:25Structural optimizations
5. 15:11Validation and tooling
6. 20:24Future of CSS architecture

" related talks

• 40mLessons Learned from Building a CSS MinifierStoyan Stefanov · GOTO Copenhagen 2014
• 05mOptimizingVladimir · Meta Refresh 2013
• 26mLean Mean CSS MachineTobias Bjerrome Ahlin · ffconf 2014
• 25mRethinking CSS - Introducing StylexNaman Rajat Goel · React Finland 2021
• 04mLossy CSS Compression for Fun and Loss (or profit)Daniel Janus · Heart of Clojure 2024
• 06mGoober, a less than 1KB css-in-js solutionCristian Bote · React Day Berlin 2019
• 23mCSS-in-JSMax Stoiber · ReactConf AU 2020
• 49mBuild Scalable, Automated CSSChris Lilley · CSSConf.Asia 2014