Atomic CSS is a CSS writing method that only does one thing per class, improving efficiency and collaboration by combining a single class with a single function. It solves the problems of style duplication and naming problems, and is suitable for rapid development and team collaboration. Common tools include Tailwind CSS, Windi CSS and UnoCSS, which are used in conjunction with building tools. Applicable scenarios include prototype construction, design system and style unified project. Notes include learning costs, increased HTML complexity and lengthy class names. It is recommended to encapsulate high-frequency components, simplify combinations and code formatting to maintain consistency.

Atomic CSS, also known as Functional CSS, is a way to write CSS. Its core idea is: each class does only one thing . In other words, instead of writing a .button class like traditionally, it wraps all styles in it, but uses many small and single-function classes to combine the final effect.

For example, if you want an element to have red text, inner margin 1m, right alignment, it may be written like this in Atomic CSS:

 <div class="text-red-500 p-4 text-right">Content</div>

Each class name corresponds to a specific style attribute and value, rather than a whole component style.

Why is there Atomic CSS?

Many people think this way of writing "looks messy" at first, but it is actually solving some practical problems:

• Avoid duplicate styles : In traditional writing, multiple components may use similar styles, but due to different class names, duplicate code appears in the CSS file.
• Improve development efficiency : You don’t need to write a new CSS class every time, just assemble it in HTML.
• Reduce naming troubles : no longer have to worry about what the class name is (such as .btn-primary-dark-hover ), the class name becomes a "configuration item".

It is especially suitable for projects that require frequent UI adjustments or collaborations of multiple people.

Common Atomic CSS tools

The most popular Atomic CSS framework now is Tailwind CSS , which provides a complete set of preset tool classes, where you can customize variables such as color, spacing, etc. through configuration files.

Other similar tools are:

• Windi CSS (similar to Tailwind, but generated on demand)
• UnoCSS (lighter and more flexible)

These tools are usually used with building tools (such as PostCSS, Vite), which can greatly reduce the workload of manually writing CSS.

Applicable scenarios and precautions

Atomic CSS is not omnipotent, it is more suitable for the following situations:

• Quickly build a page prototype
• Unified design system or component library style
• Team members are familiar with their rules

But there are several points to pay attention to:

• The initial learning cost is slightly higher, especially to adapt to the thinking of "not writing new CSS"
• The HTML structure will be more complicated than traditional writing, and the class name may become longer.
• If you don't control it, it is easy to write "full screen name" HTML, affecting readability

The recommended approach is:

• Simplify common combinations with @apply or tool class grouping
• High-frequency components can still be packaged into multiplexed component classes
• Use code formatting tools to keep class names in order consistent

Overall, Atomic CSS is a pragmatic CSS writing that sacrifices a little "elegance" for greater flexibility and efficiency. If you change the style and layout frequently, this method may make you much easier.

The above is the detailed content of What is Atomic CSS (or Functional CSS)?. For more information, please follow other related articles on the PHP Chinese website!