How I'm Writing CSS in 2024

For users, styles should load quickly, stay small, cache until they change, and avoid shifting page content. Fonts should also load quickly with minimal layout shift. Developer tools can help by removing unused styles, minifying and compressing files, bundling requests, using hashed filenames for caching, and preventing naming collisions.

Robinson demonstrates native nesting, custom properties, and container queries, including a container query that changes a blog post's padding and font size below 500 pixels. These features work across browsers without extra tooling, but a build step can still help support older browsers or newer syntax. He mentions progressive enhancement with @supports and syntax lowering with Lightning CSS.

CSS Modules offer a lightweight, widely supported way to scope styles, and Next.js bundles and minifies module files; its App Router also supports streaming. Tailwind generates CSS for the utility classes a project actually uses, allowing a small, compressed stylesheet with a hashed filename and immutable caching. Robinson likes Tailwind's stable API and colocated styles, while noting that its approach is not for everyone.

Robinson describes runtime JavaScript and compatibility with streaming and Server Components as challenges for some CSS-in-JS libraries. He presents StyleX as a zero-runtime option built at Meta and used across products including WhatsApp, Facebook, Instagram, and Threads. Its separate styling declarations and design tokens have trade-offs compared with Tailwind's utility classes, so he suggests trying the approach to see whether it fits.