6 min read
|
Saved February 14, 2026
|
Copied!
Do you care about this?
This article explores how 37signals successfully builds three robust web applications using only vanilla CSS, without any preprocessors or build tools. It highlights their evolving CSS architecture, focusing on simple structures, efficient color management, and innovative spacing techniques. The author analyzes how these practices leverage modern CSS features for effective design.
If you do, here's more
In April 2024, Jason Zimdars from 37signals shared insights on using only vanilla CSS for building modern web applications. Over the next year and a half, the company released Writebook and Fizzy, continuing this approach without any build tools. The author analyzed the CSS architecture of these products and noted a clear evolution in their CSS patterns. What began as a curiosity revealed a robust system that effectively leverages modern CSS features while adhering to a no-build philosophy. Together, these applications contain nearly 14,000 lines of CSS, emphasizing simplicity and clarity.
The CSS architecture follows a flat structure with one file per concept, eliminating the complications of subdirectories and complex imports. This straightforward organization minimizes configuration and build time, a stark contrast to many developers' reliance on tools like Tailwind. The color system across the applications employs OKLCH, allowing for a seamless dark mode implementation without redundancy. Instead of separate theme files, a single media query updates colors throughout the app. The spacing system uses `ch` units for horizontal spacing, linking it directly to content, while the responsive breakpoints focus on character count rather than device types.
Utility classes do exist, but they serve as supplementary tools rather than the backbone of the design. The core styling is rooted in semantic component classes, which keeps the HTML readable and allows for easier updates across the application. Features like the `:has()` selector enable styling parent elements based on children, reducing dependency on JavaScript for certain interactions. This approach highlights a shift towards leveraging native CSS capabilities, making the case for a return to vanilla CSS in modern development.
Questions about this article
No questions yet.