On Auto-Generated Atomic CSS

Robin Weser's exploration of the shorthand-longhand dilemma in Atomic CSS highlights the challenges of automatically converting HTML and CSS into optimized styles. The core issue lies in handling edge cases arising from the interplay of shorthand and longhand CSS properties, leading to potential errors when using frameworks like Fela that generate atomic classes.

The concept of Atomic CSS—one class, one job—is intriguing. Consider this example:

<code>.mb-8 {
  margin-bottom: 2rem;
}</code>

Imagine thousands of such classes, covering virtually every CSS possibility.

Why use Atomic CSS? Several compelling reasons exist:

• Reduced CSS: Eliminating repeated property/value pairs and author-specific class names significantly shrinks the final CSS file size. This is crucial because CSS is a blocking resource.
• Simplified Naming: No more time-consuming class name brainstorming.
• Design Consistency: Limiting available classes enforces a degree of design uniformity.
• Increased Developer Speed: Some developers find this approach faster and more efficient.

Generating Atomic CSS can be done manually (as GitHub and Facebook have done with Primer and FB5 respectively, though this isn't necessarily recommended), or by using pre-built frameworks. Tachyons is an early example of a large, opinionated collection of atomic classes.

However, Tailwind CSS is the dominant player. Its strengths lie in:

• Configurability: Customize the classes to fit your project's needs.
• Purge Unused Classes: This crucial step removes unused classes, realizing the full performance benefits of Atomic CSS.
• Built-in UI Library: Accelerates development with readily available components.

But what about automatically generating Atomic CSS?

Yahoo's approach, using functions as class names processed during the build step, foreshadowed current methods. This is similar to the Tailwind PurgeCSS combination.

Today, you don't need to write Atomic CSS manually. As Weser points out, libraries like Fela, Styletron, React Native Web, Otion, and StyleSheet allow you to write styles in a familiar manner while generating Atomic CSS during the build process. This approach maximizes reusability and minimizes the final CSS bundle size. Each property-value pair is rendered only once, improving efficiency.

This method, often rooted in CSS-in-JS, processes both markup and CSS for optimal results. It's a compelling alternative to manually writing Atomic CSS, which many developers, including the author, find less appealing. The key benefit is the automated optimization for improved web performance.

The question remains: what are your thoughts on this approach?

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