What does css modules mean?

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

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

What are CSS Modules?

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

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

So CSS Modules are neither an official standard nor a browser feature, but a way to scope CSS class names and selectors during the build step (such as using Webpack or Browserify) (similar to a namespace).

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

<h1 class="title">An example heading</h1>

The CSS style is as follows:

.title {
  background-color: red;
}

Just load the CSS file into the HTML file, here tag background will be set to red. We don't need to do any special processing of HTML or CSS. The browser already supports this most basic file type.

The way to use CSS Modules is different. We need to write all tags into JS files. Here is a simple example:

import styles from "./styles.css";

element.innerHTML = 
  `<h1 class="${styles.title}">
     An example heading
   </h1>`;

In JS, you can access the .title class in the CSS file in a similar way to styles.title. Then during the build process, our build tool will search for the file named styles.css that we loaded with the import statement, and then parse the source file into a new HTML and CSS file, and the class name will be replaced with a specific format:

HTML

<h1 class="_styles__title_309571057">
  An example heading
</h1>

CSS

._styles__title_309571057 {
  background-color: red;
}

The generic .title is completely replaced by the newly generated name, and the CSS source file It won't be loaded either.

When using CSS modules, class names are dynamically generated, unique, and accurately correspond to the styles of each class in the source file.

This is also the principle of implementing style scope. They are restricted to specific templates. For example, if we import the buttons.css file in buttons.js and use the .btn style, other files such as forms.js will not be affected by .btn unless it also imports buttons.css.

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

Why use CSS Modules?

Through CSS Modules, we can ensure that all styles of a single component:

• are concentrated in the same place

• Apply only to this component

In addition,

import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red} ${padding.large}">`;

This method can solve the problem of CSS global scope.

You must have experienced rushing to finish writing CSS as soon as possible, without even considering the adverse effects your code will cause.

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

You must have seen those styles that you don’t know what effect they have, or even whether they are used.

Don’t you want to safely write CSS that does not affect other styles? Are you worried about the style being independent or dependent on something else? Or maybe it overrides styles elsewhere?

Questions like these are enough to cause headaches. And as the project expands, it becomes increasingly desperate.

But using CSS Modules can avoid these problems. Unless you load a CSS style in a module, this style will not affect other HTML.

（Learning video sharing: css video tutorial）

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