Shulou(Shulou.com)06/02 Report--

In this article, the editor introduces in detail "how to use the ACSS architecture of CSS". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use the ACSS architecture of CSS" can help you solve your doubts.

Preface

We know that the front-end development model and component-based development mode is relatively popular, so what is the hot CSS development model? yes, it is our protagonist ACSS. Let's first take a look at the applications of major websites:

The HTML on Twitter looks like this:

The Facebook HTML goes like this:

Finally, take a look at the home page of GitHub:

Wait a minute...

You may be surprised to see the class names of Twitter and Facebook, but it is also a kind of ACSS. Relatively speaking, GitHub ACSS is more intuitive to you. In any case, so many large companies have used ACSS, which shows that it is really effective, and you should try more in the project.

Next we move on to the study of ACSS.

The concept of ACSS

ACSS is short for Atomic CSS, which was created by Thierry Koblenz in the October 2013 article Challenging CSS Best Practices.

First, let's give an appropriate definition of atomized CSS (Atomic CSS):

John Polacek wrote in the article 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 form of CSS architecture that tends to be small and single-use class, and is named after visual effects.

In addition to being called ACSS, you can also call it functional CSS, or the CSS utility.

CSS is a WYSIWYG language with less emphasis on logic and more emphasis on expression. when you write too many styles, you will find that there are only a few common styles that come and go, just to adjust their arrangement and combination. Every time I write these repetitive styling code, I feel like I'm repeating the wheel, which naturally creates the need for abbreviations, while ACSS does something common by writing the CSS property as a separate class name.

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

Why are ACSS and CSS-in-JS so popular?

We understood the concept of ACSS earlier, so I'm going to talk about the concept of CSS-in-JS before I can explain why they are popular.

CSS-in-JS is a very important concept. I originally planned to write an article to introduce it, and the title was "CSS-in-JS of CSS Architecture". Sorting out the materials, I found that teacher Ruan Yifeng had written it, so I'll take it directly. But teacher Ruan did not give a solution to popular CSS. It has been 21 years now, and we know that several solutions are popular at present, each of which has its own advantages and disadvantages. We needed an article to thoroughly understand them, so @ FateRiddle's React picked up: talk about my favorite from 10 popular CSS solutions (above) this article appeared.

You can skip the link to the article above and let me sort it out for you:

A long time ago, the front-end project was relatively small, and HTML, CSS, and JS were all coupled together. Later, as the project became larger and larger, the code was not allowed to be coupled in order to facilitate maintenance, requiring each technology to be responsible only for its own domain.

Later, with the emergence of React, the way the front end organizes the code has changed, and the component has become the mainstream way to organize the code, while the core principle of the component is that the code does not rely on the outside at all, and the performance in React is the strong coupling of HTML, CSS, and JS, so as to avoid affecting other components, for CSS we have also written in JS, which is about CSS in JS, which is actually writing in-line style.

However, the inline style does not support pseudo-classes and media queries, so there is a library like React-JSS, which extends the inline style; some people cannot stand the writing of the hump style of React-JSS; there is a styled-components that follows the specification of CSS writing; some people prefer uncoupled writing, so Css Module appears; others think that Vue's solution is more elegant, and then there is styled-jsx.

Let me sum up:

CSS-in-JS is essentially an inline style, and it is popular because of the advent of the age of componentization.

If you understand the principle of CSS in JS fire, you must guess the reason why ACSS will be popular-that is, the era of componentization is coming, and you can even understand that ACSS is CSS componentization under the CSS architecture.

In the era of traditional web development without componentization, if you use ACSS to determine the style, such as the form of the following code, the partner must think you are crazy:

Button

Because the reuse rate of button is very high, your project is full of this kind of button. Once button wants to modify some styles, you can cry. It is not convenient to give a .btn class name directly. Just change the class name directly, such as the following:

Button

But this is different in the age of componentization, such as using React to encapsulate a Button:

Const Button = ({children, color}) = > ({children})

The use is as follows:

Register

If the style is changed, all I have to do is plug in and unplug the ACSS, and the reusability of the style is greatly improved and easy to understand compared to using the .btn implementation.

Advantages and disadvantages of ACSS

Benefits of using ACSS:

Your CSS stops growing. Using the traditional method, your CSS file gets bigger every time you add a new feature. With utilities, everything is reusable, so you rarely need to write a new CSS, a set of styles that are universal.

You're not wasting your energy inventing class names. No more stupid class names, such as sidebar-inner-wrapper just to be able to set styles, and no longer fret about the perfect abstract name of something that is really just a flex container.

Flexible and easy to read. CSS is global, and when you make a change, you never know what you're breaking. The classes in HTML are local, so you can plug and change styles without having to worry about other problems, and many abbreviations of CSS styles are more in line with the brain's memory.

Never worry about naming conflicts, never worry about style overrides.

Disadvantages of using ACSS:

There is no doubt that ACSS will increase the volume of HTML, but with Gzip this is not a big problem.

Familiarity with naming ACSS names comes at a cost.

The disadvantages of ACSS are very small, and the benefits are so great that there is no reason why it should not be applied in the project. It is strongly recommended that you use ACSS for every front-end project.

How to choose an ACSS Library

There are many mature CSS frameworks on the market, such as Tailwind CSS,Windi CSS and Tachyons.

At the same time, some UI libraries come with some CSS utility classes as a complement to the framework, such as Bootstrap and Chakra UI.

Some people even summarize their own ACSS according to the project, such as atom.css, SACSS: Static Atomic CSS, and so on.

ACSS libraries are roughly divided into these three categories.

What are the criteria we choose to integrate them into our project?

Generate on demand, for example, if we use class= "Mmur1" to set up margin, then how big is the x? but no matter how big the x is, when increasing x, the margin will be in different directions, such as mt for margin-top,mb for margin-bottom, etc. If pseudo classes such as hover and: focus are added, the volume will become larger, and there are too many atomic classes. On-demand generation should be provided to load only those we have used.

Dynamic, atomic classes should not be completely static, for example, if I want to use class= "MMI 100", I should be able to use it directly, instead of setting it up and finding that the style does not work, and then through the framework configuration file, to increase the support for MMI 100, atomic classes should be pluggable to the extreme.

In addition to the above two very important standards, I think automatic value derivation and attribution patterns are also considered to enhance the development experience.

Let's see which ACSS library we will choose in the end. First of all, the atomic CSS must be pure, so the ACSS attached to the UI framework cannot be adopted. according to the ACSS summarized by the project, its atomic CSS is too static to be used at will, and does not meet the standard that atomic classes should not be completely static. Tailwind CSS was originally not generated on demand, but later increased, but Windi CSS is faster and compatible with Tailwind CSS. So we naturally have to choose Windi CSS.

After reading this, the article "how to use the ACSS architecture of CSS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.