[Translation] how to understand the CSS module, and how to translate and understand the css Module

[Translation] how to understand the CSS module, and how to translate and understand the css Module

In this ever-changing front-end world, it is quite difficult to find an influential concept, and it is even more difficult to accurately convey it so that people are willing to try it.

From the CSS perspective, the biggest change on the tool side when we write CSS is the use of the CSS processor. For example, it may be recognized as the best SASS. There is also PostCSS, which provides a different solution, but the difference is not big. It belongs to the same type of things. It is the syntax not supported by the input browser, and then outputs the syntax supported by the browser. (This is different from the previous article. You can click "misunderstanding of PostCSS" To View Details)

Now, the concept of CSS module is introduced. This article will introduce the technologies in this area, introduce the technologies, and tell you how to use them.

What is the CSS module?

Official definition:

ACSS ModuleIs a CSS file in which all class names and animation names are scoped locally by default.

A css module is a CSS file. All class names and animation names contained in this file are partial scopes by default.

Actually, it is more complicated than the above mentioned. The class name is partial scope by default, which involves some configurations, a construction process, and something hard to grasp.

Finally, we define the CSS module as a method to organize the relevant CSS code into components and avoid name conflicts. (Do not worry about the name of your component. It will be automatically generated during the build process ).

How does the CSS module work?

The CSS module should be put into the construction process for processing, and it does not do anything. This looks like a webpack or browserify plug-in. Its working principle is: when you call the CSS module in the js module (such as the React component), the CSS module will be based on the dynamic scope of the file or the class name in the namespace, declare the literal volume of an object. The class name in the literal volume is called by js as a string.

Let's use an example.

Create a simple CSS file. The. base class is not unique in the project and is not used as the actual class name. It is equivalent to an alias in the style, which will be used in the js module.

.base {  color: deeppink;  max-width: 42em;  margin: 0 auto;}

Let's take a look at how to use it in JS components.

import styles from './styles.css';element.innerHTML = `<div class="${styles.base}">  CSS Modules are fun.</div>`;

The above code generates the following code (the default configuration of the webpack build tool ):

<div class="_20WEds96_Ee1ra54-24ePy">CSS Modules are fun.</div>

._20WEds96_Ee1ra54-24ePy {  color: deeppink;  max-width: 42em;  margin: 0 auto;}

Class name. You can add a special prefix to the class name or use a short name, but this is not the focus (although a short name represents a smaller CSS style ).

The point is that the class name is dynamically generated and unique, and is correctly mapped to the style sheet.

Several ideas about the CSS Module

The above explains how it works. Now you have some questions. Let's solve them one by one.

The generated code is too ugly!

The class name is not for the sake of beauty. It applies styles to elements, so this is not worth noting.

Not easy to debug

The code generated through the build process is not easy to debug. Sass is not easy to debug, but sourcemap and css modules can also be used. In fact, try to generate the class name, but it is not difficult to debug according to the specific style in the module. If you know which module you are debugging, you can find the corresponding style in the corresponding module.

Style cannot be reused

Reusability is correct, but the purpose of the CSS module is to componentialize the style and clear global conflicts and dependencies.

In addition, you can also define global classes (using: global (), such as some common styles. These class names can also be called in js components.

:global(.clearfix::after) {  content: '';  clear: both;  display: table;}

CSS modules can also be expanded through existing modules like SASS @ extend. Instead of copying a style directly, the selector styles are merged.

.base {  composes: appearance from '../AnoherModule/styles.css';}

The CSS module requires other building tools, such as webpack and browserify.

This is the same as the SASS Compiling. scss file for the correct CSS style. PostCSS treats the style as a browser-compatible code. Now that you have used the build tool, you don't have to think about it.

Why are we still discussing these points?

It is not sure whether the CSS module of the future is like this, but this must be the direction of style Writing. Large websites use a large number of global styles and are not suitable for splitting them into small components.

The globally unique CSS name is both powerful and fragile. Whether it is the CSS module or other tools in the future. You need to find a solution that can be shared with global styles and avoid style naming conflicts in the same scope.

Getting started

As mentioned above, the CSS module requires webpack or browserify to be built.

Webpack

To use webpack, first modify the webpack. config. js file, add the following configuration items, and enable the CSS module function.

{  test: /\.css$/,  loader: 'style-loader!css-loader?modules'}

The above configuration will be added to the <style> tab on your page. Here we need a webpack extract text plug-in to remove this label.

{  test: /\.css$/,  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules')}

Browserify

Use Browserify to directly use the command line. There are a lot of code parameters. You can use npm to run the command and configure the package. json file. The Code is as follows:

{  "scripts": {    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"  }}

To explain, running npm build is equivalent to calling the relevant commands of build. Process src/index. js to generate dist/index. js, and compile the dist/main.css style through the css-modulesify plug-in. To add a browser prefix using the Autoprefixer plug-in, change the command to the following:

{  "scripts": {    "build": "browserify -p [ css-modulesify --after autoprefixer -o dist/main.css ] -o dist/index.js src/index.js"  }}

-- After the style is compiled, run the autoprefixer plug-in.

Summary

At present, the CSS module system ecosystem is too small, but I believe that as more and more people realize that this is a solution adapted to small to large projects, it will develop better and better.

The idea of CSS modularization is the right path. I am not saying that the method described in this article is the best solution, but CSS can already be written with the following features: modularity, scope, or reusable.

For more information, see the article "this introduction to CSS Modules" by Glen Maddern, the creator of the CSS module project.

Original article: Understanding the CSS Modules Methodology

Link: http://www.sitepoint.com/understanding-css-modules-methodology/