css module

Limiting class names by naming conventions is too rigid, whereas CSS in JS is flexible enough, but hard to write. The CSS Module opens up a whole new way to solve the problem of class name conflicts

Train of thought

The CSS Module uses the following ideas to resolve class name conflicts:

  1. CSS class name conflicts tend to occur in large projects
  2. Large projects often use build tools (WebPack, etc.) to build the project
  3. Build tools allow you to split CSS styles into more elaborate modules
  4. As with JS variables, it is difficult to have conflicting class names in each CSS module file. Conflicting class names often occur in different CSS module files
  5. You just need to make sure that the build tool does not have class name conflicts after merging style codes

Realize the principle of

In Webpack, as a CSS-loader that handles CSS, it implements the idea of CSS modules. To enable a CSS module, you need to set the configuration of CSS-Loader to true.

CSS – Loader is implemented as follows:

The principle is simple. After the CSS Module is enabled, the CSS-Loader converts the class name in the style to a unique hash value.

The hash value is generated based on the module path and class name. Therefore, different CSS modules have different hash values, even if they have the same class name.

How to Apply styles

CSS Module introduces a new problem: the source code class name is not the same as the final generated class name, and the developer only knows the source code class name, but does not know what the final class name is, so how to apply the class name to the element?

To solve this problem, CSS-Loader exports the relationship between the original class name and the final class name, which is described by an object

This way, we can get the result of the CSS module export in the JS code to apply the class name

Style-loader removes other information and exposes only the mappings for our convenience in applying the class name

Other operating

Global name of the class

Some class names are global, static, and do not need to be converted, just use a special syntax in the class name position:

:global(.main){
    ...
}
Copy the code

Class names that use global will not be converted. Instead, the absence of a global class name means local is used by default

:local(.main){
    ...
}
Copy the code

The use of a local class name indicates a local class name, which is a potentially conflicting class name and will be converted by the CSS Module

How do I control the final class name

In most cases, we don’t need to control the final class name because it doesn’t make any sense to control it

If you must control the final class name, you need to configure the localIdentName of csS-Loader

Other Notes

  • CSS Modules are often used in conjunction with build tools
  • CSS Modules only deal with top-level class names. Try not to write nested class names. It is not necessary
  • The CSS Module handles only the class name and no other selectors
  • The CSS Module also handles the ID selector, but there is no reason to use the ID selector at any time
  • When you use A CSS Module, you don’t need to follow any other naming conventions, as long as you can keep the class name informed