Shulou(Shulou.com)06/03 Report--

This article mainly explains "how css solves naming conflicts". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve naming conflicts in css".

Class name conflicts in css often occur in large projects.

1. Large projects often use build tools to build projects.

2. The build tool allows css styles to be cut into finer modules.

Like JS variables, conflicting class names are hard to find in each css module file.

3. Conflicting class names often occur in different css module files, so you only need to ensure that the build tool will not have class name conflicts after merging the style code.

Realization principle

In webpack, as the css-loader for dealing with css, it implements the idea of css module. To enable css module, you need to set the configuration modules of css-loader to true.

Css-loader is implemented as follows:

The principle is extremely simple. When css module is turned on, css-loader converts the class name in the style to a unique hash value.

Because the hash value is generated based on the module path and class name, the converted hash value is different for different css modules, even if they have the same class name.

Thank you for your reading, the above is the content of "how to solve the naming conflict problem of css". After the study of this article, I believe you have a deeper understanding of the problem of how to solve the naming conflict of css. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.