Reimagine Atomic CSS

While I'm not a huge Atomic CSS enthusiast—the sheer number of classes isn't my cup of tea, and I find traditional CSS quite effective—I recognize its appeal. Its advantages are clear: smaller stylesheets compared to manually written CSS, and the class-based approach promotes consistency within a design system.

The evolution of Atomic CSS is fascinating. It's progressed from a massive library of classes (with the benefit of small, unchanging CSS) to more refined approaches: eliminating unused classes and, now, generating stylesheets on demand based on actual usage.

Anthony Fu's "Reimagine Atomic CSS" provides a great overview of this evolution and introduces UnoCSS, a further advancement. While I don't fully grasp all its intricacies, it seems to offer enhanced capabilities over previous iterations, primarily through configurable rules. Its speed (leveraging Vite) is a significant plus, particularly for iterative development.

However, I find some aspects challenging. The complexity is notable, and integrations appear limited. I'm also hesitant about converting styles into arbitrary HTML attributes. While JSX props are acceptable, direct HTML attributes reaching the DOM pose risks and should ideally be data-* scoped for safety.

Despite these reservations, I appreciate Anthony's thorough problem-solving approach and the sharing of his process. The inclusion of a playground is a welcome addition.

Direct Link →

The above is the detailed content of Reimagine Atomic CSS. For more information, please follow other related articles on the PHP Chinese website!