Revised on October 21, 2018. In order to the article vivid, before using too many exaggerated embellishment techniques, so that many friends ignore the content itself. Based on the comments and pointed out deficiencies. I revised the style slightly, deleted unnecessary nonsense and combed the outline of the article.

Naming is one of the most difficult problems I find in CSS.

CSS is a WYSIWYG language with less emphasis on logic and more on presentation. You write an attribute and it has a pattern, like when you crack a melon seed, you get a reward every time you crack a melon seed. This kind of pleasure is not found in other development languages.

CSS also has more code management options than other logic-focused languages. There are only two tools you can use to manage CSS, one is file references and the other is naming. In order to reduce page HTTP requests, we usually merge CSS files as much as possible. This makes the path of managing CSS by file reference a very narrow one.

We all know that CSS is global in scope, and as soon as you reference a CSS file, it affects your entire page. As a result, the heavy burden of CSS code management is all in the way of naming.

So in a nutshell, if you can name your CSS, you can manage your CSS.

Managing CSS is like managing “underwear”

For the management of CSS, I give an inappropriate but very appropriate analogy, is similar to the management of underwear in daily life, yes, it is the daily wear of underwear, and CSS in the “class library” homonym (I am too talented).

As mentioned earlier, we can only manage CSS by naming it. That sounds like a good thing to be happy about, because there’s only one way, so no one has a choice. However, to our surprise, even if there is only one way, people take a variety of ways.

For example, if we have 7 different pairs of underwear, how many possibilities will there be if we only manage the underwear by naming it?

According to the date According to the color According to the material According to the pattern .
.Monday {} Red {}. The pure cotton {} Checked {}. .
.Tuesday {} Yellow {}. The polyester {} . Horizontal stripes {} .
.Wednesday {} Blue {}. The spandex {} {}. Wave point .
. . . . .

Just as there are a thousand Hamlets for a thousand readers, different people have different names for the same thing. Because for oneself like and familiar things, for other people are basically unfamiliar. If you don’t believe me, ask your colleagues, the way you generalize and name underwear is likely to be different. So the possibilities of this are infinite.

Of course, if there are only seven pairs of underwear, you and I will be named differently, as long as I can understand the basic fine. However, when our management of underwear to the concept of the library, everything is not so easy.

Let’s say your dad was a miner and your family was rich. And you especially like to buy underwear, red, orange, yellow, green, cyan, blue, purple, color, lace, modal, cotton, tight… There are 100 underwear in all kinds. How would you name these 100 underwear?

At this point you will find the above management of 7 underwear, any way is inadequate. So what do you do?

A general approach to managing CSS panties

As mentioned earlier, the problem with managing CSS is the problem of CSS naming. So let’s take a look at BEM, the most popular generic solution for CSS naming currently available.

Since I am not an advocate of BEM, the previous example was criticized by netizens, so let’s talk about the results directly.

.block__element--modifier{ /* */ }
Copy the code

It’s pretty straightforward to see that by referencing BEM, our CSS has three levels of scope. How do you explain this?

Very simple, the way we named seven pairs of underwear before was one-dimensional. But with BEM, you can think of it as a three-dimensional cube of 10 dimensions and 10 dimensions. If you want to find something, all you have to do is know the coordinates that correspond to its length, width and height. Similar to:

.length 1__ width 2-- height 3{/* */}Copy the code

Isn’t that a lot easier all of a sudden. The BEM system solves the naming problem of CSS, and its maintainability and extensibility are also very good. So it is a highly recommended solution for managing CSS code. Those of you who are interested can come down and see for yourself.

Here, I’m going to say what I don’t like about BEM. Rather than dislike BEM, I don’t even like CSS naming itself. Why do you say that? Because naming is a real pain for me.

One of the things I often get into when I’m writing code is, you have two modules that are very similar, but they’re slightly different, and in order for them to have the same style, you have to abstract this part out, but the part that you abstract out, you can’t lean toward either of them, what do you call it? Like:

/* This example is not the correct use of BEM posture, here is just for reference */Ark of the.1__ drawer2-- Underwear, closet2__ drawer2-- underwear {name: close-fitting underwear; Size: medium; Color: pink; Ark of}.1__ drawer2-- Underwear {gender: male; Ark of}.2__ drawer2-- Underwear {gender: female; Style: lace; } <divStyle = "ark1__ drawer2"> a pair of underwear </div>
<divStyle = "ark2__ drawer2-- Underwear "> another pair of underwear </div>
Copy the code

You want to abstract a generic class for the common part of the above two underwear. How do you name it? And then, to make matters worse, comes a third pair of underwear:

Ark of the.2__ drawer3-- underwear {name: close-fitting underwear; Size: medium; Color: red; Suitable gender: female; Style: lace; } <divStyle = "ark2__ drawer3"> another pair of underwear </div>
Copy the code

And then you realize that your hard-won generic class name doesn’t apply to this third pair of underwear. However, the second underwear and the third underwear have a common part, this part can be further drawn like it? Once abstract, it means to take a name, but how do you name it? This is two steps, and mine is already falling apart.

Of course, in real development, I believe you have a better way to name, to solve the actual problem. This is just an exaggerated way of proving that naming is a very difficult thing to do (never mind whether I’m using it correctly or not).

You asked for underwear, not where to put them

Every time we can’t find our underwear, we instinctively say, “Mom! Where are the panties I was wearing yesterday?”

My mother usually replies impatiently, “I told you yesterday that it was in the second drawer of the first cabinet. How many times do you have to ask this question?”

Drawer 1__ 2- underwear {name: close-fitting underwear; Size: medium; Suitable gender: male; Color: black; }Copy the code

“First cabinet second drawer” sounds like BEM’s way of naming it, but of course it’s very straightforward to tell you where to put your underwear.

But I don’t know if you have thought about such a question, if we ask: “Mom! Where are the panties I was wearing yesterday?” Pa! Your mom just threw her panties in your face, which is how we would have preferred it. Yeah, I don’t need underwear coordinates. Just give me my underwear. I want underwear, not where to put them.

What is CSS? CSS is a cascading style sheet, but class (class name) is obviously not. It is just a hook between CSS and HTML.

Name: close-fitting undergarments; Size: medium; Suitable gender: male; Color: black;Copy the code

These are the types of underwear we really want. And. Cupboard 1__ drawer 2– underwear is just a coordinate that tells you where to put “underwear”.

So in the actual development process, what is it like when we want underwear, underwear in our hands?

<div style="Name: close-fitting undergarments; Size: medium; Color: pink; Suitable for gender: male;">A pants</div>

<div style="Name: close-fitting undergarments; Size: medium; Color: pink; Suitable gender: female; Style: "lace";>Another pair of underwear</div>
    
<div style="Name: close-fitting undergarments; Size: medium; Color: red; Suitable gender: female; Style: "lace";>Another pair of underwear</div>
Copy the code

Yes, by writing CSS properties directly with style, you can simply put “underwear in other people’s hands”. This is the “WHAT you see is what you get” approach to CSS that I think works best.

I can write whatever style I want and don’t have to spend time creating a class name for my style that I think looks good, but no one else will understand. I don’t have to worry about naming pollution, because there’s no naming. And since there is no naming, there is no need to deal with any of the naming headaches mentioned above.

It’s just that we’re so used to creating classes that the first step in writing a style is to create a class instead of the style itself. That seems to me to be putting the cart before the horse.

To summarize: when I want panties, I want them in my hand, not a coordinate that tells me exactly where to put them. No matter how good the naming conventions for coordinates sound.

Once I had a name, I had to manage 100 class names that were more complex than the weight of the underwear itself, as well as 100 underwear.

Manage the raw material of the underwear, not the underwear

A large part of the reason we need to manage code is because we want to reuse it. Simply put, buy now, wear and throw away underwear is something you don’t need the time and effort to manage.

In the previous section, we abandoned the idea of reusing styles and used inline CSS to solve code management problems while also getting a programming experience that focuses on the CSS styles themselves.

It was because we gave up naming that we solved the code management problem, but reuse necessarily meant naming. This may sound like a paradox.

Is there a way out of this cycle? The answer, of course, is to give up managing underpants and switch to managing the raw materials of underpants. We listed the raw materials of 100 pairs of underwear that needed to be managed as follows:

  • Cloth type: cotton, hemp, polyester, spandex, Modal…
  • Color: red, orange, yellow, green, cyan, blue, purple…
  • .

What would our code look like based on the previous example?

<style>.Close-fitting undergarments {}.medium {}.men {}.women {}. Black {}. Red {}. Pink {}. Lace {}</style>

<div class="Skinny underwear medium pink guy.">A pants</div>
<div class="Skinny lingerie medium pink lace.">Another pair of underwear</div>
<div class="Close-fitting lingerie medium red lace.">Another pair of underwear</div>
<div class="Red">A red horse</div>
Copy the code

First, because these raw materials are already the smallest units that cannot be split, their names can be easily solidified into a common “class library”. Every time you create a new project, you can reuse it with only minor modifications.

Although class names are created to address the issue of style reuse, they are much easier to manage because they are not detachable and are easily solidified. And over time, the expansion rate of raw materials is very small. If componentization is done well, raw materials can even be reduced without increasing.

Amazingly, these materials are not just used for underwear, they can also be used for clothes, pants, shoes… And so on and so forth. You can even paint a horse red with this raw material. So that’s a huge change in the way we think when we change our perspective. It’s about taking reuse to the extreme.

This way of thinking about atomizing styles comes from the Yahoo team’s Atomic CSS (ACSS). It’s fair to say that BASED on this theory, I’m the fastest CSS prototype programmer I’ve ever met (I probably don’t know many people anyway).

It’s worth explaining here that my entire argument is based on the concept of a library. If you just create a simple operation activity page ACSS, you can only use the ACSS fast feature, and its larger advantage of code management will not show up.

Because componentized thinking is all the rage right now. And ACSS is a way of particularly matching componentized thinking. So I really want ACSS to be seen. Of course, personal ability is limited, if not appropriate place can give me a message, we discuss together.

Underwear is a product of industry, not art

Here may be some students will say, you this raw material split obviously not right, cloth type is not bamboo charcoal fiber, even space material, color and red and blue gradient or colorful black.

For most of us male programmers, underwear comes in cotton and non-cotton, black, white and gray. You don’t have to be a programmer to realize that the average person can buy underwear in red, orange, yellow, green, cyan, blue and purple.

What is the point of this example? Underwear is an industrial product, not a work of art. Industrial products are destined to control the variety of raw materials to reduce costs. And the real underwear as a work of art, will not be because of lack of money, and will not consider the reuse of underwear.

In the development of our webpage is the same, if your website is not an art website, but you find that your raw material provider (designer), just from the color to provide you with more than ten or twenty colors, then he must have a problem.

If you have designers who are extremely constrained in their design language, that’s a very happy thing for us as developers.

reading

  1. Quicklayout.css – Quickly build structurally compatible Web pages
  2. “English” in the wave of componentization to rethink CSS @Johnpolacek although is English, but the web page like PPT, easy to understand, strong push;
  3. “CSS thinking” componentization VS Atomization @ziven27 One of my articles explains the difference between “componentization thinking” and “atomization thinking”;
  4. This idea was first introduced by Yahoo. They recently tweeted React ACSS
  5. About HTML semantics and front-end architecture @ Desert;
  6. “Translate” CSS generic classes and “separation of concerns” @adamwathan;
  7. ‘English’ IS getting fit.
  8. Best practices for “British” CSS – Atomic CSS @Smashingmagazine;

The solution

Update on 2019/10/22

The name of the NPM github CDN
@_nu/css-acss

All this talk feels like theoretical talk. Here I use many years of experience, summed up an ACSS NPM library @_nu/ CSS – ACSS for everyone to use.

For ACSS, bootstrap, Material – UI, Github… There are all related libraries, and the most complete class library ** belongs to tailwindcss. Of course, they are all based on style-system theory. Getting started is relatively expensive and often requires the intervention of a designer.

Compared to these projects, the advantage of my solution is the simplicity and extreme CSS development experience. Simple to the whole logic only focus on naming rules, after reading the document 5 minutes will use, or even fully understand all the logic. The ultimate CSS development experience is when you get used to the rules and start to suspect that your fingers are slower than you think about CSS.

Of course, in order to pursue simple and development experience, this is also a disadvantage, is not perfect, not dealing with similar hover,focus… Equiintermediate state, also did not add any custom response points. This section is free to expand based on your own project and naming conventions.