Custom CSS is the path to inconsistent UI
summary
Custom CSS causes divergence in real projects: an analysis finds typography and whitespace as the biggest offenders, with many nearly identical but inconsistent values. The remedy is design tokens and a small set of primitive components (Text, Heading, Spacing, Flex/Box/Grid) that expose spacing and typography as props. Implementation uses CSS-in-JS and a style-system library so values come from tokens, margins and font sizes become API choices, and the approach proves it reduces bespoke styles and improves consistency.
AI-written summary · about
chapters (18)
- 0:00Start
- 1:16Sources of custom CSS
- 2:43Design tokens implementation
- 3:11Custom CSS & design tokens
- 3:43Bad token combinations
- 5:17Text styles
- 5:39What else?
- 6:09API: selecting a style
- 7:38API: rigidity vs flexibility
- 8:13API: custom HTML element
- 9:10Example
- 10:21Spacing scales
- 10:49Scale naming
- 12:13Flexbox layouts
- 12:31Responsive layouts
- 12:50CSS Grid Layouts
- 13:14Plain CSS
- 14:58Why use primitives
related talks
13mCustom CSS is the path to inconsistent UI
36mCSS at the Intersection
28mScalable CSS Architecture with Design Tokens
36mBuilding CSS Foundations
26mComponents, Patterns and Other Not-So-Simple Things to Manage
38mModular CSS
22mDesign Systems, when and how much? — Diana Mounter
07mReact Components and How To Style Them