Question: The Future of Programmers

zu — Sun, 08 Oct 2023 10:25:14 +0000

I want to know, as a mature programmer who has worked for many years, what other ways do you accumulate wealth

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

zu — Mon, 04 Sep 2023 08:56:48 +0000

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:

Pre set a set of class lists first

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

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

Hello world

zu — Mon, 04 Sep 2023 08:28:53 +0000

Hi,I am ZU.
I come from China.
Thank

DEV Community: zu