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

This article mainly introduces what css modules means. It is very detailed and has certain reference value. Friends who are interested must finish reading it.

Css modules refers to the CSS file in which all class and animation names have their own scope by default, which is a way to scope CSS class names and selectors in the build step (similar to namespaces). With CSS Modules, you can ensure that all styles of a single component are concentrated in the same place and apply only to that component.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

What is CSS Modules?

According to CSS Modules's project on Gihub, it is interpreted as:

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

So CSS Modules is neither an official standard nor a browser feature, but rather a way of scoping CSS class names and selectors in build steps (such as using Webpack or Browserify) (similar to namespaces).

Let's first look at a concrete example to explain what it is and why we use CSS Modules. We usually add a CSS class name to HTML to control its style:

An example heading

The CSS style looks like this:

.title {background-color: red;}

As long as the CSS file is loaded into the HTML file, the tag background here will be set to red. We don't need to do anything special with HTML or CSS, and browsers already support this most basic file type.

The way CSS Modules is used is different. We need to write all the tags in the JS file. Here is a simple example:

Import styles from ". / styles.css"; Element [XSS _ clean] = `An example heading `

In JS, you can access the .title class in the CSS file in a styles.title-like way. Then during the build process, our build tool searches for the file named styles.css that we loaded with the import statement, and then parses the source file into new HTML and CSS files, and the class name is replaced with a specific format:

HTML

An example heading

CSS

. _ styles__title_309571057 {background-color: red;}

The generic .title is completely replaced by the newly generated name, and the source file of the CSS is not loaded.

When using the CSS module, the class name is dynamically generated, unique, and accurately corresponds to the style of each class in the source file.

This is also the principle of implementing the style scope. They are limited to specific templates. For example, if we introduce buttons.css files into buttons.js and use the .btn style, it will not be affected by .btn in other forms.js, unless it also introduces buttons.css.

But for what purpose do we make CSS and HTML files so fragmented? Why do we use the CSS module?

Why use CSS Modules?

With CSS Modules, we can guarantee all styles of a single component:

Concentrated in the same place

Applies only to this component

In addition,

Import buttons from ". / buttons.css"; import padding from ". / padding.css"; Element [XSS _ clean] = ``

The problem of CSS global scope can be solved in this way.

You must have been in a hurry to finish writing CSS as soon as possible without even thinking about the adverse effects of your code.

You must have done something like adding randomly named styles at the end of a style file.

You must have seen styles that you don't know what effect they have, or even whether they have been used or not.

Don't you want to safely write CSS that doesn't affect other styles? Are you worried about whether the style is independent or dependent on something else? Or may it cover the style somewhere else?

Questions like this are enough to be a headache. And as the project expands, it will become more and more desperate.

But these problems can be avoided by using CSS Modules. Unless you load a CSS style into a module, this style will not affect other HTML.

The above is all the contents of this article "what does css modules mean?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.