CSS Module

CSS Module產生背景

在軟件工程裏面模塊指的是可組合、分解和更換的單元。下面是一張css樹，項目裏面總的css文件是由一系列小的單元組成，好比下面的reset.css就是一個單元。模塊化的概念不光在css裏面，在JS裏面也是一樣適用的，咱們把代碼按照必定的規則和邏輯拆分，分解成可組合可更換的單元，這樣就實現了一個最大限度的代碼複用。在css中，代碼複用只是一個小的方面，更重要的是解決局部做用域的概念，也就是爲了不全局的樣式污染。

index.css
  ├─ header.css
  │   └─ reset.css
  ├─ content.css
  │   ├─ left.css
  │   │   └─ nav.css
  │   └─ right.css
  ├─ fotter.css
  └─ ...

CSS Module解決的問題

全局污染會帶來一系列混亂的問題，好比在項目中已經定義了某一個元素的樣式，可是如今有一個需求是這個元素的樣式要從新定義，可是全局已經定義了，這個時候咱們能夠有幾種選擇：！important（加上一個important優先級）、inline（寫一個行內式）或者寫一個複雜度選擇器。

隨着項目的愈來愈大，愈來愈難以維護，就容易致使命名的混亂。

爲了不樣式名的衝突，咱們寫的選擇器也愈來愈複雜，而後命名也愈來愈長。這時若是沒有一個樣式的命名規範，代碼將愈來愈難以維護。這樣下去就容易致使代碼的層次結構愈來愈不清晰。咱們想要實現一個代碼的複用也會也來越難。從成千上萬的代碼中找到本身想要複用的樣式，這是有必定難度的。並且由於選擇器的愈來愈複雜和命名愈來愈長致使了代碼的壓縮也就不完全了，對於長的class名是無能爲力的，由於要保證類名的惟一性。

綜合來講就是一下幾點：

• 全局污染
• 命名混亂
• 層級結構不清晰
• 代碼難以複用
• 代碼壓縮不完全

CSS Module 原理

主要是圍繞AST語法樹、Vue scoped和React Css module來介紹的。

首先介紹一下AST語法樹，由於在webpack裏面，咱們的css仍是js都會解釋成AST語法樹。它其實就是json的一個數據結構。

AST語法樹

{
 nodes: [{
 raws: {
 before: '',
 between: '',
 semicolon: true,
 after: '\r\n'
 },
 type: 'rule',
 source: {
 start: {
 line: 1,
 column: 1
 },
 input: {
 css: '.header {\r\n  display: flex;\r\n  lost-column: 1/1;\r\n}\r\n',
 hasBOM: false,
 file: '../../../xiaokedao'
 },
 end: {
 line: 4,
 column: 1
 }
 },
 selector: '.header',
 lastEach: 14,
 indexes: {},
 nodes: []
 }]
}

Vue scoped

<div data-v-2311c06a class="button-warp"></div>

.button-warp[data-v-2311c06a]{
 display: inline-block;
}

React Css module

<div class="wrapper___2IPqp"></div>

CSS做用域

局部做用域

module: {
 rules: [
 {
   test: /\.css$/,
   use: ExtractTextPlugin.extract({
   fallback: "style-loader",
   use: [
   {
     loader: 'css-loader',
     options: {
     modules: true,
     }
     }
    ],
   })
  }
 ]
}

全局做用域

:global(.main) {
 display: flex;
}

類組合

.header {
 background: #8A469B;
}

.footer {
 composes: header;
}

哈希規則

• 默認 - [hash:base64]
• [path][name][local][hash:base64:n]
• [path][hash:base64:n]
• [name][hash:base64:n]
• [local][hash:base64:n]

變量

npm install postcss-modules-values
{
    loader: "postcss-loader",
    "options": {
        plugins: [
            require('postcss-modules-values'),
        ]
    }
}

@value color: #8A469B;
.header {
  background: color;
}
.footer {
  composes: header;
  color: #FFF;
}