ACSS of CSS architecture

Time:2022-5-27
ACSS of CSS architecture

ACSS of CSS architecture png

Series articles

catalogue

  • preface
  • Concept of ACSS
  • Why are ACSS and CSS in JS on fire
  • Advantages and disadvantages of ACSS
  • How to select ACSS Library
  • summary
  • reference resources

preface

We know that the current front-end development model,ComponentizationYes, what is the popular CSS development mode? Yes, it is our protagonist ACSS today. Let’s first observe the applications of major websites:

The HTML on Twitter is like this:

chrome Twitter

Facebook html is like this:

chrome Facebook

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

ACSS of CSS architecture

Wait

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. Anyway, ACSS is used by so many large companies, which shows that it is indeed effective. You should also try more in the project.

Next, we enter the study of ACSS.

Concept of ACSS

ACSSShort for atomic CSS, it is Thierry Koblenz’s article in October 2013Challenging CSS Best PracticesCreated in.

First, let’sAtomized CSS(atomic CSS) gives an appropriate definition:

John polacek in the articleLet’s Define Exactly What Atomic CSS isIt reads:

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

Atomized CSS is a kind of CSS architecture. It tends to be small and single-purpose classes, and will be named after visual effects.

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

CSS is an unimportantlogic, which focuses more on performanceWhat you see is what you getWhen you write more styles, you will find that there are only a few commonly used styles that come and go, which is nothing more than adjusting their arrangement and combination. Every time I write these repeated style codes, I feel like I’m building wheels repeatedly, which naturally leads to the need for abbreviations. Some things ACSS does are very common, which is nothing more than writing CSS attributes as an independent class name.

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

Why are ACSS and CSS in JS on fire

We have understood the concept of ACSS, so next I will talk about the concept of CSS in JS, and then I can explain why they are popular.

CSS in JS is a very important concept. I was going to write an article to introduce it. The title was “CSS in JS of CSS architecture”. After sorting out the data, I found that Mr. Ruan Yifeng had written it, so I’ll take it directlyRuan Yifeng — Introduction to CSS in JSHowever, Mr. Ruan didn’t give the solution of popular CSS. It’s been 21 years now. We know that there are several popular solutions, each with its own advantages and disadvantages. We need an article to understand them thoroughly, so @ fateriddle’s classmateReact picks up: talk about my favorites from 10 popular CSS solutions (Part 1)This article appeared.

You may not read the article link above, but let me sort it out for you:

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

Later, with the emergence of react, the way of front-end organizing code changed, and components became the mainstream method of organizing code. The core principle of components is that the code does not depend on the outside. In react, it is a strong coupling of HTML, CSS and JS, so as to avoid affecting other components. For CSS, we also wrote it in JS, which requires CSS in JS, which is actually writing inline styles.

However, the in-line style does not support pseudo class and media query, so the react JSS library appears to expand the in-line style; Some people can’t stand the writing of hump in the style of react JSS; There are styled components, libraries that follow CSS writing specifications; Some people prefer uncoupled writing, so the CSS module appears; Others thought Vue’s solution was elegant, and then styled JSX appeared.

Let me summarize:

CSS in JS is essentially in-line style, which is popular becauseComponentizationThe arrival of the times.

If you understand the principle of CSS in JS fire, you must guess the reason why ACSS will fire – that isComponentizationWith the advent of the era, you can even understand that ACSS is CSS componentization under CSS architecture.

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

< button > button < / button >

Because the reuse rate of buttons is very high, your project is full of such buttons. Once you want to modify some styles of buttons, you can go to cry Niang. There’s no direct way to give it The BTN class name is convenient. If you want to modify it, just change the class name directly, for example:

< button > button < / button >

However, it is different in the era of componentization. For example, use 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>
)

Use the following:

< button color = "pink" > register < / button >

If the style is modified, I just plug in ACSS, and compare it With the implementation of BTN, the reusability of style will be greatly improved and it is easy to understand.

Now do you understand? To say why ACSS and CSS in JS are popular, it is becauseComponentization

Advantages and disadvantages of ACSS

Benefits of using ACSS:

  • Your CSS stops growing。 Using traditional methods, your CSS file gets larger every time you add new features. With utilities, everything is reusable, so you rarely need to write new CSS. A set of styles is universal.
  • You’re not wasting your energy inventing class names。 No more stupid class names, such assidebar-inner-wrapperJust to be able to set the style, and no longer worry 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 changes, you never know what you’ve broken. Classes in HTML are native, so you canPluggable style changeDon’t worry about other problems. Many abbreviations of CSS style are more in line with the memory of the brain.
  • Never worry about naming conflicts, never worry about style overrides

Disadvantages of using ACSS:

  • without doubt,ACSS will increase the volume of HTMLBut with gzip, it’s not a big problem.
  • Familiarity with naming ACSS can be costly.

ACSS has very small disadvantages and great benefits. There is no reason why it is not applicable in the project. It is strongly recommended that you use ACSS for each front-end project.

How to select ACSS Library

There are many mature CSS frameworks on the market, such asTailwind CSSWindi CSSas well asTachyonsWait.

At the same time, some UI libraries will also include some CSS tool classes as a supplement to the framework, such asBootstrapandChakra UI

There are even some people who summarize their ACSS according to the project, such asatom.cssSACSS: Static Atomic CSSWait.

ACSS libraries are roughly divided into these three categories.

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

  1. Generate on demandFor example, we useclass="m-1"To set the margin, then how big is M-X and X, x, but no matter how big x is, when x is added, the margin is in different directions, such asmtrepresentativemargin-topmbrepresentativemargin-bottomAdd, if, also:hoverand:focusWhen using such pseudo classes, the volume will become larger. There are too many atomic classes, which should be providedGenerate on demandLoad only those we used.

  2. Dynamic, atomic classes should not be completely staticFor example, I want to useclass="m-100", I should be able to use it directly instead of finding that the style does not take effect after setting, and then increase the support for M-100 through the configuration file of the framework. The atomic class shouldsfp Do the best.

In addition to the above two are very important standards, I thinkAutomatic value derivationandAttribute modeIt is also a part to be considered to improve the development experience.

Let’s see which ACSS library we will eventually choose. First, the atomic CSS must be pure, so the ACSS attached to the UI framework cannot be adopted. According to the ACSS summarized in the project, its atomic CSS is too static to be used on demand, which is not in line with the requirementsAtomic classes should not be completely staticStandards,Tailwind CSSOriginally, it was not generated on demand, but it was added later, butWindi CSSFaster and compatibleTailwind CSSSo we naturally have to chooseWindi CSS

summary

We first understand the use of ACSS through examples, and then introduce the concept of ACSS. By comparing CSS in JS, we analyze the process of ACSS taking off with the wave of front-end componentization. Finally, how to choose our own ACSS Library in the project. We analyze three types of ACSS libraries through some hard standards to help you chooseWindi CSS

reference resources