Atomic CSS Deep Dive
summary
Compares Tailwind, UnoCSS, and Atomizer to a new Atomic CSS engine called My little UI toolkit (mlut). Describes an ergonomic Sass implementation that fixes inconsistent utility naming using an algorithm based on MDN Data, implements a converter/transformer chain to expand complex values (shown with a full gradient utility), and supports adding container queries with about 20 lines of configuration; claims the project reflects 1000+ hours of development and is a working, usable tool.
AI-written summary · about
chapters (18)
- 0:00Welcome
- 1:44Introduction
- 3:11Atomic CSS
- 4:32Tooling issues
- 7:01Introducing Mad
- 8:05Utility design deep dive
- 10:29Name shortening algorithm
- 14:47Existing tool syntax
- 16:33Mad syntax design
- 18:41Classes to CSS
- 23:23Value conversion
- 25:51Value conversion system
- 29:02Tool configuration
- 31:49Rule configuration dispatch
- 33:13Engine evolution
- 35:44Sass integration
- 37:30Summary
- 39:17Q&A
related talks
44mAtomic Design and Storybook to Boost Frontend Dev Productivity
29mUsing Atomic CSS-IN-JS to Improve DX and UX
01h 11mUtility-first CSS: The highs and lows of styling web sites
32mThe Future of Utility-First CSS: What Tailwind v4 Signals for Web Development
23mCSS-in-JS
30mTailwind 4 vs CSS 6
18mIn Defense of Utility-First CSS
30mType-Safe Style Systems: The Future of CSS