The ABC's of Architecting Better CSS
summary
A practical path from broken stylesheets to maintainable CSS: explains how specificity and cascade really work (inline = 1.0.0.0, class = 0.0.1.0, id = 0.1.0.0) and shows a Twitter poll where 44%/43%/9%/4% answered a basic color question incorrectly to underline common gaps. Compares approaches: css‑in‑js (styled‑components) bundles CSS with markup, shares tokens with JS but loses single stylesheet caching and is hard to exit; itcss inverted triangle uses 7–8 layered files with a utilities layer often marked important; utility‑first (Tailwind) cuts repetition and uses @apply to build components. Recommends naming (BEMIT), versioning/deprecation, and continuous grooming.
AI-written summary · about
chapters (28)
- 0:00Intro
- 0:34About Me
- 0:56What I Know About You
- 1:57Lets Talk About Bad CSS
- 2:28Bad CSS Will...
- 4:05Organizational Challenges
- 5:28How Well Do You Know CSS?
- 7:25Check For !important Flag
- 8:04Selector Specificity
- 11:34Sort Order
- 12:00Inheritance
- 12:35All Together
- 15:48So How Do We Write Better CSS?
- 17:13Lets Graph the Specificity
- 18:38CSS in JS: Styled Components
- 19:00CSS in JS Pros
- 20:43ITCSS Metrics
- 21:52Layers
- 27:26ITCSS Cons
- 29:03Utility-First CSS: Tailwind
- 30:00Utility-First CSS: Cons
- 31:41Layer Prefixes
- 32:03Breakpoint Suffixes
- 32:27BEMIT Example
- 35:10Know your Constraints
- 37:53Never Done.
- 39:05Conclusion
- 39:36Caution
