what is css module

The CSS module is a CSS file in which all class names have only local scope, that is, the scope of all class names and animation names in the CSS file defaults to the current scope. CSS modules limit the scope to components, thus avoiding the problem of global scope.

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

CSS modules are:

CSS files in which all class names and animation names are scoped locally by default.

CSS files in The scope of all class names and animation names defaults to the current scope.

A CSS module is a CSS file in which all class names have local scope.

So the CSS module is not an official spec or implementation in browsers, but a method (with the help of Webpack or Browserify) that changes the scope of the class name and selector to the current file (similar to namespace).

What does this look like and why? We'll see that in a moment. First, remember how HTML and CSS work in general. A class name is applied to HTML:

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

Define this class in CSS:

.title {  
    background-color: red;  
}

Once this CSS is applied to this HTML document, the background color of the h1 to which this class is applied will change is red. We don't need to deal with CSS or HTML. Browsers understand the format of these files.

CSS modules take a different approach. Unlike writing plain HTML, we need to write our markup in a JavaScript file, such as index.js. The following example shows us how it will work (we will use a more practical example later):

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

During our build process, the compiler will look at the styles.css file we introduced, and then Our JavaScript file applies the .title class through styles.title. Our build process will then process these into a new, separate HTML and CSS file, replacing the HTML Class attribute and CSS selector class with a new string.

The generated HTML file may look like this:

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

The generated CSS file may look like this:

._styles__title_309571057 { 
    background-color: red; 
}

The previous class attributes and selector .title no longer exist at all , replaced by a completely new string. Our previous CSS is no longer provided to the browser at all.

#Why should we use CSS modules?

Use CSS modules, which will ensure that all styles are applied to a single component:

• In one place

• Apply only to this component and nothing else

Also, any component can have a real dependency, as

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

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

does this The purpose is to solve the problem of global scope in CSS

Have you ever tried to write simple CSS as quickly as possible without considering the impact on others due to lack of time and resources? What's the impact?

Have you ever had some random bad bits left at the bottom of your style sheet and tried to organize them but never got organized?

Have you ever come across a style that you weren’t entirely sure what it did or whether it was used?

Have you ever considered that you could remove some styles without breaking others? Wondering whether this style depends on you or depends on others? Or override the style elsewhere?

These questions may leave you with a headache, extended project deadlines, and a sad, longing look out the window.

Using CSS modules and the concept of default current scope, these problems will be avoided. When you write a style you have to think about the end result of the style.

For example, if you use random-gross-class in HTML without applying it as a CSS module style class, the style will not be applied because the CSS selector will be converted to ._style_random -gross-class_0038089.

（Learning video sharing: css video tutorial）

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