摘要：為什么引入全局樣式?jīng)_突進(jìn)行打包時(shí)，將所有文件導(dǎo)入到入口文件中，樣式也會(huì)統(tǒng)一加載到入口中，根據(jù)的規(guī)則，后面的樣式會(huì)覆蓋掉前面的樣式聲明，造成全局樣式的覆蓋問(wèn)題。

（1）全局樣式?jīng)_突
webpack進(jìn)行打包時(shí)，將所有js文件導(dǎo)入到入口App.js文件中，樣式也會(huì)統(tǒng)一加載到入口中，根據(jù)css的layout規(guī)則，后面的樣式會(huì)覆蓋掉前面的樣式聲明，造成全局樣式的覆蓋問(wèn)題。
（2）嵌套層次過(guò)深的選擇器
為了解決全局樣式的沖突問(wèn)題，不得不引入一些特地命名namespace來(lái)區(qū)分，但是往往有些namespace命名得不夠清晰，就會(huì)造成要想下一個(gè)樣式不會(huì)覆蓋，就要再加一個(gè)新的命名空間來(lái)進(jìn)行區(qū)分，最終可能一個(gè)元素的顯示樣式嵌套特別深。

嵌套特別深會(huì)造成的問(wèn)題：
- 根據(jù)CSS選擇器的解析規(guī)則可以知道，層級(jí)越深，比較的次數(shù)也就越多，影響整個(gè)頁(yè)面的渲染
- 增加了不必要的字節(jié)開(kāi)銷(xiāo)
- 語(yǔ)義混亂 可擴(kuò)展性不好，約束越多，擴(kuò)展性越差

（3）無(wú)法共享變量
復(fù)雜組件要使用 JS 和 CSS 來(lái)共同處理樣式

（1）css預(yù)處理器（less/sass） 支持模塊引入

存在問(wèn)題：不能解決全局樣式?jīng)_突問(wèn)題

（2）BEM（Block Element Modifier）解決命名沖突以及更好的語(yǔ)義化

Block：邏輯和頁(yè)面功能都獨(dú)立的頁(yè)面組件，是一個(gè)可復(fù)用單元，特點(diǎn)如下：

可以隨意嵌套組合

可以放在任意頁(yè)面的任何位置，不影響功能和外觀

可復(fù)用，界面可以有任意多個(gè)相同Block的實(shí)例

Element：Block的組成部分，依賴(lài)Block存在（出了Block就不能用）

[可選]定義Block和Element的外觀及行為，就像HTML屬性一樣，能讓同一種Block看起來(lái)不一樣

存在問(wèn)題：對(duì)于嵌套過(guò)深的層次在命名上會(huì)給需要語(yǔ)義化體現(xiàn)的元素造成很大的困難 對(duì)于多人協(xié)作上，需要統(tǒng)一命名規(guī)范，這同樣也會(huì)造成額外的effort

（1）什么是css modules

通過(guò)構(gòu)建工具來(lái)使指定class達(dá)到scope的過(guò)程

（2）css modules優(yōu)勢(shì)

解決全局命名沖突問(wèn)題 css modules只關(guān)心組件本身 命名唯一

模塊化 可以使用composes來(lái)引入自身模塊中的樣式以及另一個(gè)模塊的樣式

解決嵌套層次過(guò)深的問(wèn)題 使用扁平化的類(lèi)名

（3）css modules的用法

開(kāi)啟css modules功能
由于css modules對(duì)樣式的處理邏輯是放在loader中，所以在css-loader中開(kāi)啟css-loader

{
    test: /.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: "./build/styles"
        }
      },
      { 
        loader: "css-loader",
        options: {
            importLoaders: 1,
            modules: true,
            localIdentName: "[name]__[local]___[hash:base64:5]"  // 為了生成類(lèi)名不是純隨機(jī)
        }
      }
    ]
}        

修改index.js文件中對(duì)樣式的引入方式

import styles from "./index.css"; // 導(dǎo)出對(duì)象的格式是鍵值對(duì) 

編譯之后的類(lèi)使用

//index.css
.color{
  color:blue;
}

// index.js
import styles from "./index.css"; // 導(dǎo)出對(duì)象的格式是鍵值對(duì) 

// jsx
使用轉(zhuǎn)化后的類(lèi)名
 // 如果以下劃線(xiàn)給類(lèi)命名使用styles["color-style"]

（4）其他用法

局部變量和全局變量

:local 做localIdentName規(guī)則處理（類(lèi)名進(jìn)行編譯 默認(rèn)可以不寫(xiě)）

:global 樣式編譯后不變

/*下面兩種進(jìn)行編譯*/
.normal {
 color: green;
 }
:local(.normal) {
  color: green; 
}

/*下面兩種不會(huì)進(jìn)行編譯*/
// 多個(gè)類(lèi)不編譯
:global {
  .link {
    color: green;
  }
  .box {
    color: yellow;
  }
}
// 單個(gè)類(lèi)不編譯
:global(.box){
  color:blue;
}

compose組合class(需要樣式復(fù)用，在 CSS Modules 中，一個(gè)選擇器可以繼承另一個(gè)選擇器的規(guī)則) 自身引入的聲明的優(yōu)先級(jí)會(huì)比較高

    /* 同一個(gè)css文件中復(fù)用類(lèi)*/
    .bg {
        background-color:blue;
        }
    
    .title {
        composes:bg;
        color:white;
        }
    
   // js中使用
    import styles from "./test.css";
    
css modules 

  // 生成的HTML
    
css modules

   /* 不同css文件中復(fù)用類(lèi)*/ 
    /* color.css */
     .red {
       color: red;
      }

    .blue {
      color: blue;
    }

    /* index.css */
    .red {
        color: red;
    }

    .header {
        font-size: 32px;
    }

    .title {
        color: green;
        composes: blue from "./color.css";
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px;
    }    

CSS和JS變量共享（:export 關(guān)鍵字可以把 CSS 中的 變量輸出到 JS 中）

    /* index.scss */
    $primary-color: #f40;

    :export {
      primaryColor: $primary-color;
    }

    /* app.js */
    import style from "index.scss";

    // 會(huì)輸出 #F40
    console.log(style.primaryColor);

項(xiàng)目中如果使用antd 需要將antd樣式不進(jìn)行編譯
使用exclude排除exclude中指定目錄的資源。在node-modules中關(guān)閉css-module，在我們自己寫(xiě)的src下的css開(kāi)啟css-module

  {
    test: /.css$/,
    exclude: /node_modules|antd.css/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: "./build/styles"
        }
      },
      { 
        loader: "css-loader",
        options: {
            importLoaders: 1,
            modules: true,
            localIdentName: "[name]__[local]___[hash:base64:5]"  // 為了生成類(lèi)名不是純隨機(jī)
        }
      }
    ]
}        

項(xiàng)目中使用stylelint進(jìn)行css檢查 需要在stylelint配置忽略css-modules的關(guān)鍵字

 module.exports = {
  rules: {
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: [
          "export",
          "import",
          "global",
          "local",
          "external",
        ],
      },
    ],
    "selector-type-no-unknown": [
      true,
      {
        ignoreTypes: ["from"],
      },
    ],
    "property-no-unknown": [
      true,
      {
        ignoreProperties: ["composes", "compose-with"],
      },
    ],
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: ["value"],
      },
    ],
  },
};

推薦css解決方案文章：
React拾遺：從10種現(xiàn)在流行的 CSS 解決方案談?wù)勎业淖類(lèi)?ài) （上）
CSS Modules入門(mén)及React中實(shí)踐