Vanilla CSS is all you need
7 days ago
- #Web Development
- #CSS
- #Design Systems
- 37signals builds sophisticated web applications using vanilla CSS without build tools like Sass or PostCSS.
- Their CSS architecture is flat and simple, with one file per concept, named descriptively.
- They use modern CSS features like native custom properties, nesting, container queries, and the :has() selector.
- The color system uses OKLCH for perceptually uniform colors, making dark mode trivial with media queries.
- Spacing is based on character units (ch) for horizontal spacing, making it content-driven and scalable.
- Utility classes are used additively, not as a foundation, keeping HTML readable and CSS maintainable.
- The :has() selector allows styling parents based on children, reducing the need for JavaScript.
- CSS Layers (@layer) manage specificity, solving long-standing CSS specificity wars.
- Loading spinners and other UI elements are created with pure CSS, no images or JavaScript.
- Dialog animations use @starting-style for smooth transitions without JavaScript.