what are css modules

CSS Modules are not an official specification, nor a browser mechanism, but a way to scope CSS class names and selectors during the build step (similar to namespaces). With the help of build tools, class names or selector names can be scoped.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

What are css modules

According to the CSS Modules project on Gihub, it is explained as:

All class names and animation names have their own scoped CSS files by default.

So CSS Modules is not an official specification, nor a browser mechanism, but a scope for CSS class names and selectors during the build step (such as using Webpack or Browserify) One way (similar to namespace).

Advantages of css modules

Solving global naming conflicts css modules only care about the unique naming of the component itself

Modularization can be introduced into its own module using composes The style and the style of another module

Solve the problem of too deep nesting levels and use flat class names

Why introduce css Modules?

1), global style conflict

When webpack is packaging, all js files are imported into the entry App.js file, and the styles are also will be uniformly loaded into the entrance. According to the layout rules of CSS, the later styles will overwrite the previous style declarations, causing the global style coverage problem.

2) Selectors with too deep nesting levels

Problems caused by particularly deep nesting:

- According to the css selector It can be known from the parsing rules that the deeper the level, the more the number of comparisons, which affects the rendering of the entire page

- Increases unnecessary byte overhead

- Semantic confusion and poor scalability Well, the more constraints, the worse the scalability

3), variables cannot be shared

Complex components must use js and css to jointly handle styles.

Learning video sharing: css video tutorial

The above is the detailed content of what are css modules. For more information, please follow other related articles on the PHP Chinese website!