Web Haute Couture: The Great CSS Catwalk
summary
Compares several ways to build web styles: plain CSS (selectors and files) that scales poorly; Sass (variables, nesting, mixins, modules, 20‑year ecosystem) which needs compilation; Bootstrap (1–12 responsive grid and many components) which can add 100+ KB of CSS; an example importing a working calendar by adding calendar.tsx and button.tsx; utility‑class approach like Tailwind/Telwin CSS with classes (e.g. bg-orange-500), 4px spacing scale and built‑in treeshaking; CSS‑in‑JS (styled components) which creates scoped class names at runtime for dynamic theming but raises JS runtime and bundle size; and CSS Modules which rename classes at build time and use source maps for debugging.
AI-written summary · about
chapters (8)
- 0:00CSS haute couture intro
- 2:34Classic CSS limits
- 9:56CSS preprocessors features
- 16:01Bootstrap vs Chat CNUI
- 23:26Tailwind utility-first
- 30:04CSS in JS styling
- 40:36CSS Modules scoping
- 46:17Conclusion
related talks
01h 11mUtility-first CSS: The highs and lows of styling web sites
29mThe evolution of scalable CSS
25mStyled and SASSy: Choosing the Right React Styling Solution
40mThe ABC's of Architecting Better CSS
17mThinking beyond “Scalable CSS”
34mFirst Class Styles
45mCSS-in-JS: FTW
21mStuff About Cascading Style Sheets