From Tailwind CSS to UnoCSS - Is Atomization Really the Savior of Frontend CSS

Write in front

Looking back at the past and traversing the previous dynasties, CSS was also one of the three frontend swordsmen of that time, and it was very impressive. With the leapfrog transformation of the front-end, CSS seems to have become a bit unknown in modern front-end development.

It has to be said that before seeing UnoCSS, I had not even heard of the concept of atomized CSS (ashamed, ashamed), and had not followed CSS related content for a long time.

The concept of atomized CSS itself and the design of Tailwind CSS and UnoCSS are relatively simple. Here, we mainly want to talk about whether atomized CSS is a perfect solution in modern front-end and the correct direction to solve CSS problems.

Atomic CSS

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

It sounds great, but the final implementation method is super simple. The core is to preset a large number of class styles, and try to simplify and simplify these class styles as much as possible. During the development process, you can directly write the preset class names in the DOM to quickly implement the styles, without the need to write a lot of simple and boring CSS styles each time, as shown in the following code:

1. Pre set a set of class lists first

.m-10 { margin: 10px; }
.p-5 { padding: 5px; }
.text-red { color: red; }
 // more....

1. Write the class name directly in the dom during encoding to quickly implement styles

<div class="m-10 p-5 text-red">
    dom
</div>

The styles in the preset class list have certain patterns, and developers can quickly grasp them through learning and use the combination of multiple classes in the dom to quickly achieve results

😮😮，Does it look a bit familiar? (The dead Bootstrap attacked me), so do you think this is cold rice stir fry or pragmatism?

Tailwind CSS Widely popular

Github in [tailwindcss]（ https://github.com/tailwindlabs/tailwindcss ）So far, there are already '70.8K' stars, At first, I couldn't believe it was so popular, with over six million downloads per week for NPM.

Tailwind CSS advocates for allowing you to quickly build websites without leaving HTML, and has many very practical advantages:

• Extreme encapsulation of classes to maximize reusability
• Various customizable configurations that are easy to expand
• Clear unreferenced CSS styles during construction to address the issue of CSS redundancy in production environments
• Comfortable responsive development experience
• Functions, instructions, layouts, animations ....and so on

It almost covers all the headaches and uncomfortable development experiences that developers encounter in their daily native CSS development, so it is indeed a very practical tool. Tailwind CSS really benefits front-end developers.

Tailwind CSS can be used as a PostCSS plugin in the front-end construction toolchain in combination with other preprocessing methods to optimize CSS production products.

UnoCSS

Tailwind CSS has been widely popular in the past few years, and in the past two years, 'UnoCSS' has stood out again. Here, we need to first praise the icon, text, and background color gradient linkage theme on the UnoCSS official website.
It's cool!!

According to the author of UnoCSS, UnoCSS is not meant to replace Tailwind CSS, but rather to integrate atomized CSS more perfectly in the business from another perspective.

The author of UnoCSS is a member of the Vite team, and I believe it is precisely because he, as a developer of Vite, has a high sensitivity to engineering construction that UnoCSS was created to integrate atomized CSS with front-end engineering to the extreme.

So what did UnoCSS do

• On demand generation
  • Generate the classes that the business truly uses, and use them in both development and production environments
  • Compared to Tailwind CSS, which only clears unreferenced code during the production phase, UnoCSS also achieves faster performance through file monitoring and on-demand transmission during the development phase (although it's already fast, even faster is always an improvement)

• Highly flexible

  • UnoCSS positions itself as a CSS engine rather than a framework, so it should have an inclusion relationship with Tailwind CSS. UnoCSS serves as the rulemaker, while Tailwind CSS can serve as a set of presets
    

    import UnocssPlugin from '@unocss/vite'
    
    import PresetTachyons from '@unocss/preset-tachyons'
    import PresetBootstrap from '@unocss/preset-bootstrap'
    import PresetTailwind from '@unocss/preset-tailwind'
    import PresetWindi from '@unocss/preset-windi'
    import PresetAntfu from '@antfu/oh-my-cool-unocss-preset'
    
    export default {
      plugins: [
        UnocssPlugin({
          presets: [
            // PresetTachyons,
            PresetBootstrap,
            // PresetTailwind,
            // PresetWindi,
            // PresetAntfu
            // 选择其中一个...或多个！
          ]
        })
      ]
    }
    

  • Simplify class naming
    

    // Distinguish lengthy calss by type for easier reading and understanding
    <button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
      Button
    </button>
    
    // Change to
    <button 
      bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
      text="sm white"
      font="mono light"
      p="y-2 x-4"
      border="2 rounded blue-200"
    >
      Button
    </button>
    

  • In terms of custom rules, UnoCSS provides more flexible static and dynamic matching rules

  • Further optimization of compilation (such as no longer parsing AST), resulting in a further increase in production build speed

UnoCSS is equivalent to building a higher-level engine, and in the future, new atomic CSS frameworks can also be compatible, saving you the difficulty of choosing.

Atomized CSS is not the savior of modern front-end CSS

The characteristics and usage methods of Tailwind CSS and UnoCSS are not the main focus of this article. You can refer to the official website for specific details. Here, we mainly want to discuss

Will atomized CSS from Tailwind CSS or UnoCSS be the best practice for modern front-end solutions to CSS problems

I think the answer is no

From my direct perception, atomized CSS is more like an auxiliary utility tool than a solution to CSS problems. As an auxiliary tool, it can indeed provide great help in certain business scenarios or stages of business development, but from the perspective of the entire complex and ever-changing front-end business scenario, its capabilities are limited.

• The most intuitive result is that when the complexity of the business increases to a certain stage, the cost-effectiveness of atomized CSS will sharply decrease, resulting in HTML code redundancy, poor readability, and difficulty in maintenance, which will directly affect business development.

• Especially now, both Vue's single file components and React's functional components inject some JS logic into HTML. If CSS logic also needs to be injected through class name combinations, it would be too confusing.

• However, Vue or React's respective componentization design ideas can solve the problem of code redundancy through their respective componentization splitting, making it suitable for various simple and complex business scenarios, which is a complete set of best practices. Atomized CSS cannot do componentization splitting, so as business complexity increases, code redundancy will occur sooner or later, which directly limits the popularity of such frameworks, So it cannot serve as the fundamental solution to front-end CSS issues

From a design perspective, atomic CSS also seems to be out of place with the current mainstream of componentization and functional programming.

Applicable scenarios

In some simple business scenarios, atomic CSS does have significant advantages, such as rapid development of responsive H5, low business complexity in the backend system, and simple official website pages.

In some complex business scenarios, such as complex C-end business, large systems are no longer suitable.

Reference Article

Reimagine Atomic CSS

Comments

[Martin Falk Johansson]

CSS-in-JS har a huge performance drawback, whereas atomic css (usually) exists in its own file. JS is the most expensive resource on the web, and putting it in the JS means the browser has to parse it twice rather than once.

Atomic CSS can also be used to make the impact of CSS as small as possible by making sure that the classnames are as small as possible, as well as that no CSS is ever written more than once. By using some tools css classes can be made into 1-3 character long and stylesheets can quite easily be split per page or per view port.

[zu]

First of all, it should be noted that the most important reason for the emergence of atomized CSS is to improve the development experience issue, not to solve performance problems.During the compilation process, some unique optimization steps can be added,It's just a casual move

[Martin Falk Johansson]

While it's not intended to improve performance, it at least does not have the bad effect of CSS in JS that indeed does decrease the performance for the sake of developer experience. We need less JS, not more. The web is bloated already as is.

[Mario Kober]

To me this always feels like inline styles. I think I will skip this thing.