CSS Module

CSS problem of global scope.

CSS rules are global, a component of any style rules, valid for the entire page. I believe people will write css styles conflict have problems (pollution).

Standardization

WELL, OOCSS, SMACSS

BEM: block-element-modify, resolve naming css repeat OOCSS: class, solve css reuse

However, the following problems:

CSS in JS

Use JS module to manage styles use JS compiled native CSS file to have the ability modular

Modules can maximize binding CSS CSS Eco prior (pre-processor / post processor, etc.) and JS modularity

// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

/* components/Button.css */
.normal {/ * all styles associated normal * /}

// components/Button.js
import styles from './Button.css';
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`
 
<button class="button--normal-abc53">Submit</button>

CSS Modules to achieve the following points:

Problems:

πŸ€“