In-depth analysis of CSS modularity basics

The scope of a CSS rule is global. In a JavaScript environment, every CSS rule that we write is equivalent to defining a global variable. More global variables, naming conflicts, side effects, code unpredictability, and other issues began to emerge. We might as well think of CSS as a wild horse, and all of our attempts at CSS naming conventions, whether suitcss or BEM, smacss or whatever, are intended to put the reins on the CSS, but we just took a small step in the right direction. Naming conventions is just a convention, if developers intentionally or unintentionally ignore, even if only a small part of the code, will be buried in the future problems.

So we can see that in JavaScript modularity is very mature, all kinds of tools are complete today, the front-end industry began to the direction of CSS modularity.

One of the first things I learned about this effort was ember-component-css, such as the App/my-component/styles.css file, as follows:

& {
padding:2px;
}
. Urgent {
color:red;
}
The built CSS is as follows:

. MY-COMPONENT-A34FBA {
padding:2px;
}
. my-component-a34fba. Urgent {
color:red;
}

The built CSS scope is no longer global, but is limited to this component, we put CSS into a modular cage. We don't have to worry about its role seeping into other code, and we're now very confident about the scope of our code-it's more like a sniper than a grenade.

Next, I am using JSPM to see the efforts of modular CSS.

Then Webpack's CSS Module mode, the one that developed this feature even announced the end of the global CSS.

From the simple introduction above, you can see that the modularity of CSS depends on specific tools, such as EMBER-CLI, Webpack, JSPM, if we do not use such tools, the basic can not be modular CSS, so the portability seems to be a bit poor, and because there is no standard specification, So their implementation is different. But these days, without this kind of tool-assisted code, I'm afraid the code will be very bad in terms of maintainability and scalability.