Lobsters is a community-driven platform for sharing and discussing links to articles, tutorials, and projects related to technology and programming. Readers can learn about a wide range of topics, from software development and system administration to cybersecurity and artificial intelligence. With user submissions, comments, and voting, Lobsters provides a platform for collaborative learning and knowledge sharing among technology enthusiasts.

Lobsters

Modern CSS has evolved to include native variables, nesting, container queries, and advanced features like :has() and color-mix(), making build tools and preprocessors unnecessary for many projects. An analysis of three production applications from 37signals (Campfire, Writebook, and Fizzy) reveals a consistent nobuild CSS architecture using OKLCH colors, character-based spacing, semantic component classes with minimal utilities, and progressive adoption of cutting-edge CSS features. The approach demonstrates that vanilla CSS can handle real-time chat, publishing platforms, and project management tools with 14,000 lines across 105 files, achieving sophisticated interactions like animated dialogs, dynamic theming, and stateful UI without JavaScript or build steps.

Vanilla CSS is all you need

The Color System: Consistent Foundation, Evolving Capabilities

The Spacing System: Characters, Not Pixels

I’m fine with the build step.
❤️ Tailwind

“Vanilla CSS is all you need,” since vanilla CSS grew so big it’s no longer resembling any “vanilla.”
Seriously, if you just add all the chocolate flavor and optics to your vanilla ice cream, can you still consider it “vanilla”? It feels more like we got rid of vanilla ^^
I’m not opposed to most of the modern CSS features, but this headline just felt wrong to me.

Honestly, I just stick with Sass and let the VS Code Sass compiler extension handle the build. It’s basically one-button click away to run until you want it to stop watching.
I prefer Sass variables over CSS custom properties. Writing $black: #000;
feels cleaner and more direct compared to --black: #000;
Sass lets variables live freely without forcing them into a container. CSS, on the other hand, needs everything tucked inside a selector, typically placed inside :root {}
Calling the variables is smoother too. In Sass, I can simply write:
color: $black;
In CSS, you need:
color: var(–black);
Sass just feels more flexible and natural for the way I work, especially when I’m juggling a lot of design tokens or theming.

I’ve been looking for ways to effectively apply a no-build CSS “system” to my projects. While I already apply some of the things mentioned in the post, it still is a gold mine - so many nice concepts. 😃

CSS mask spinners are neat. The catch is that animating them makes the browser recalculate styles and repaint every frame. That’s fine for a single spinner on desktop, but on mobile or with multiple spinners running, it can drop FPS and drain battery.
The reason is that animating mask or gradients doesn’t hit the compositor - the browser has to do layout + paint each frame. In contrast, animating something like transform: rotate() on a pseudo-element or SVG lives in the compositor thread, so it’s way cheaper and smoother.