series

  • OOCSS for CSS architecture
  • BEM of CSS architecture
  • SMACSS of the CSS architecture
  • ACSS of CSS architecture
  • ITCSS for CSS architecture

directory

  • preface
  • The concept of ACSS
  • Why are ACSS and CSS-IN-JS so popular
  • ACSS pros and cons
  • How do I select ACSS libraries
  • conclusion
  • reference

preface

We know that front-end development mode, componentization is more popular, then CSS development mode is more popular what is it, yes, is our protagonist TODAY ACSS, we first observe the application of various large websites:

The HTML on Twitter looks like this:

Facebook HTML looks like this:

Finally, take a look at GitHub’s home page:

And so on…

You might be surprised to see the names of Twitter and Facebook classes, but that’s a type of ACSS, and GitHub ACSS is more intuitive to you than GitHub ACSS. However, the fact that so many large companies are using ACSS shows that it works, and you should try it more often in your projects.

Next, let’s get into ACSS.

The concept of ACSS

ACSS is short for Atomic CSS and was coined by Thierry Koblenz in his October 2013 article Challenging CSS Best Practices.

First, let’s give an appropriate definition for Atomic CSS:

John Polacek writes in Let’s Define Exactly What Atomic CSS is:

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

Atomized CSS is a style of CSS architecture that tends to have small, single-purpose classes that are named after visual effects.

Instead of calling it ACSS, you can call it functional CSS, or CSS utilities.

CSS is a WYSIWYG language with less emphasis on logic and more emphasis on presentation. When you write a lot of styles, you will find that common styles come and go, just adjust their permutations and combinations. Every time I write this repetitive style code, I feel like I’m reinventing the wheel, which naturally leads to the need to abbreviate, and ACSS does something very common, which is to write CSS properties as separate class names.

.m-0 {
  margin: 0;
}
.text-red {
  color: red;
}
/ *... * /
Copy the code

Why are ACSS and CSS-IN-JS so popular

We’ve seen the concept of ACSS, so I’m going to talk about the concept of CSS-in-JS so I can explain why they’re popular.

Css-in-js is a very important concept, I was going to write an article to introduce, the title of the “CSS architecture OF CSS-in-JS”, organize the data found ruan Yifeng teacher wrote, then I directly take over the ruan Yifeng – CSS in JS introduction, But Ruan teacher did not give a popular CSS solution, now 21 years, we know that there are several popular solutions, each has its own advantages and disadvantages, we need an article to fully understand them, so @Fateriddle students React pick up: A list of my favorites from 10 popular CSS solutions has appeared.

If you don’t look at the link above, I’ll sort it out for you:

Long ago, front-end projects were small and HTML, CSS, and JS were all coupled together. Later, as projects got bigger and bigger, the code was not allowed to be coupled for ease of maintenance, requiring each technology to be responsible for its own domain.

Later, with the emergence of React, the way of front-end code organization changed, and components became the mainstream method of code organization. The core principle of components is that the code does not depend on the outside at all, which is manifested in the strong coupling of HTML, CSS and JS in React, thus avoiding the influence of other components. For CSS we’re also writing in JS, which is CSS in JS, which is just writing in-line styles.

However, in-line styles do not support pseudo-classes and media queries, so a library called React-JSS was developed to extend in-line styles. Some people can’t stand the react-JSS hump; Styled components, a library that follows the CSS writing specification; Some prefer uncoupled writing, so Css Modules came into being; For styled JSX, the Vue solution is also perceived as elegant, and then styled- JSX.

Let me summarize:

Css-in-js is essentially inline style, and it became popular because of the advent of componentization.

If you understand how CSS in JS is popular, you can guess why ACSS is popular — it is the advent of componentization. You can even think of ACSS as CSS componentization under CSS architecture.

In the days of traditional web development without componentization, if you were to use ACSS to determine style, as in the following code, your collaborators would think you were crazy:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> button < / button >Copy the code

Because of the high reuse rate of the button, your project is filled with this kind of button, once the button needs to change some style, you can go to the girl, which is not a direct. BTN class name, to change the class name, such as the following:

<buttonClass = "BTN" > button < /button>
Copy the code

But in componentized eras, such as using React to encapsulate a Button:

const Button = ({ children, color }) => (
    <button class=`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ${color}`>{children}</button>)Copy the code

Use as follows:

<Button color= "pink" > register < /Button>
Copy the code

If the style changes, I just plug and unplug ACSS, and the style is much more reusable and easy to understand than using the.bTN implementation.

If you see why ACSS and CSS-in-JS are popular, it’s because of *** componentization ***.

ACSS pros and cons

Benefits of using ACSS:

  • Your CSS stops growing. Using the traditional approach, your CSS file gets bigger every time you add a new feature. With utilities, everything is reusable, so you rarely need to write new CSS, and one set of styles is universal.
  • You’re not wasting energy inventing class names. Don’t add stupid class names, for examplesidebar-inner-wrapperJust to be able to set styles and not agonize over a perfectly abstract name for something that is really just a Flex container.
  • Flexible and easy to read. CSS is global, and when you make changes, you never know what you’re breaking. Classes in HTML are native, so you can plug and change styles without having to worry about other issues, and CSS styles have many abbreviations that fit the brain’s memory better.
  • Never worry about naming conflicts, never worry about style overwriting.

Disadvantages of using ACSS:

  • There is no doubt that ACSS increases the size of HTML, but with Gzip this is not a big problem.
  • Familiar with naming ACSS naming has a cost.

The disadvantages of ACSS are very small and the benefits are very large. There is no reason why it should not be applied to projects, and it is highly recommended that you use ACSS for every front-end project.

How do I select ACSS libraries

There are several mature CSS frameworks such as Tailwind CSS, Windi CSS and Tachyons.

Some UI libraries also come with CSS utility classes that complement the framework, such as Bootstrap and Chakra UI.

There are even some people who summarize their own ACSS based on the project, such as Atom. CSS, SACSS: Static Atomic CSS, etc.

ACSS libraries fall roughly into these three categories.

To integrate them into our project, what criteria do we choose?

  1. For example, if we use class=”m-1″ to set margin, then m-x, how big is x, x but no matter how big x is, when increasing x, margin in different directions, such as mt for margin-top, If we add pseudo-classes like hover and focus, the size will increase even more. There are too many atomic classes, so we should provide on-demand generation and load only the ones we use.

  2. For example, if I wanted to use class=” M-100 “, I should be able to use it directly, rather than setting it up and finding that the style didn’t work and then adding support for M-100 through the framework configuration file. Atomic classes should be pluggable to the maximum.

In addition to the above two criteria which are very important, I think automatic value derivation and attribute patterns also improve the development experience to consider.

First of all, atomic CSS must be pure, so the ACSS that comes with the UI framework should not be adopted. According to ACSS concluded by the project, its atomic CSS is too static to be used at will. It does not meet the standard that atomic classes should not be completely static. Tailwind CSS was not generated on demand, it was added later, but Windi CSS was faster and compatible with Tailwind CSS, so it was a natural choice.

conclusion

We first took examples to understand the use of ACSS, and then introduced the concept of ACSS. By comparing CSS-IN-JS, we analyzed the process of ACSS starting to take off with the help of the wave of front-end componentization, and finally how to choose our own ACSS library in the project. We adopted some hard standards. Analysis of three types of ACSS libraries to help you choose Windi CSS.

reference

  • Reimagine atomized CSS
  • Let’s Define Exactly What Atomic CSS is