css模塊的解決辦法 演進

1. 手動分模塊，（早期辦法 ，這樣容易相互覆蓋，冗餘代碼，嵌套過深） 刀耕火種的時代了

2. css預處理（sass/less等）  
CSS預處理器最大的好處就是能夠支持模塊引入，用js的方式來編寫CSS，
編譯以後，終究仍是一個文件，所以不可避免的會出現衝突樣式

插個題外話：sass vs scss
Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似

3. BEM :BEM就是爲了解決命名衝突以及更好的語義化而生的

BEM名詞解釋：
- Block：邏輯和頁面功能都獨立的頁面組件，是一個可複用單元，特色以下：
 能夠隨意嵌套組合
 能夠放在任意頁面的任何位置，不影響功能和外觀
 可複用，界面能夠有任意多個相同Block的實例
- Element：Block的組成部分，依賴Block存在（出了Block就不能用）
- Modifier [可選] 是一個元素的狀態顯示，例如active、current、selected，只能定義Block和Element的外觀及行爲，

【說明】
- Block徹底獨立，能夠嵌套，一個header是一個Block，header下的搜索框也能夠是一個Block
    不可能出現Block__Element-father__Element-son_Modifer這種類名的寫法，BEM只有三級
- Modifier能夠加在Block和Element上面
- Modifier做爲一個額外的類名加載Block和Element上面，只是爲了改變狀態，須要保留本來的class

示例：
```
<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled" type="submit" />
</form>
```
解釋：  
form是一個Block, form--theme-xmas, form--simple是Modifier 依附在form這個Block上，用來改變不一樣樣式
form__input 是Element,在Block下的元素
form__submit也是Element, form__submit--disabled 是Modifier 依附在form__submit這個Element上，用來表示不可提交狀態

4. CSS Modules

CSS Modules並非一個正式的聲明或者是瀏覽器的一個實現，而是經過構建工具（webpack or Browserify）來使全部的class達到scope的一個過程

css modules是如何解決痛點的。

- 編譯後獨一無二的樣式名，避免了命名衝突

/* 編譯以後多是這樣的 */
.App__text___3lRY_ {
    color: red;
}

 - 模塊化   （不表，具體上github查看）

 - 解決嵌套層次過深的問題 塊化   （CSS Modules只關注與組件自己，組件自己基本均可以使用扁平的類名來寫

如何使用：

CSS Modules不侷限於你使用哪一個前端庫，不管是React、Vue仍是Angular，只要你能使用構建工具進行編譯打包就可使用。

以webpack爲例

開啓css modules功能

默認在css-loader中是不開啓css modules功能的，要開啓能夠設置modules: true便可，更多能夠參看官方css-loader使用方法修改webpack.config.js

{
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: './build/styles'
        }
      },
      { 
        loader: "css-loader",
        options: {
            modules: true   //開啓
        }
      }
    ]
}

這樣通過編譯合成一個文件以後，全部的類名都通過了哈希轉換，所以確保了類名的惟一性

事實上，有些樣式好比佈局的樣式container是不須要轉換成一長串的樣式名的，想把它固定寫死在了容器上，怎麼來寫？

全局做用域 要想一個類名不須要被裝換，那麼可使用:global(className)來進行包裝，這樣的類不會被轉換 

/* global.css */
* {
    margin: 0;
    padding: 0;
}

:global(.container) {
    padding: 20px;
}

自定義樣式名哈希規則：CSS Modules默認是以[hash:base64]來進行類名轉換的

{ 
  loader: "css-loader",
  options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  }
}

類名組合繼承：CSS Modules提供了composes關鍵字

.red {
    color: red;
}

.header {
    font-size: 32px;
}

.title {
    composes: red header;  //composes關鍵字 表示繼承.red和.header
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    composes: ff from './other.css';  //表示從other.css裏繼承ff這個樣式
}

 

下次總結webpack的基本配置。