CSS Modules

wangdai 發布于2019-08-23 18:14 / 2533人閱讀

摘要：為什么引入全局樣式沖突進行打包時，將所有文件導入到入口文件中，樣式也會統一加載到入口中，根據的規則，后面的樣式會覆蓋掉前面的樣式聲明，造成全局樣式的覆蓋問題。

CSS Modules 為什么引入CSS Modules

（1）全局樣式沖突
webpack進行打包時，將所有js文件導入到入口App.js文件中，樣式也會統一加載到入口中，根據css的layout規則，后面的樣式會覆蓋掉前面的樣式聲明，造成全局樣式的覆蓋問題。
（2）嵌套層次過深的選擇器
為了解決全局樣式的沖突問題，不得不引入一些特地命名namespace來區分，但是往往有些namespace命名得不夠清晰，就會造成要想下一個樣式不會覆蓋，就要再加一個新的命名空間來進行區分，最終可能一個元素的顯示樣式嵌套特別深。

嵌套特別深會造成的問題：
- 根據CSS選擇器的解析規則可以知道，層級越深，比較的次數也就越多，影響整個頁面的渲染
- 增加了不必要的字節開銷
- 語義混亂 可擴展性不好，約束越多，擴展性越差

（3）無法共享變量
復雜組件要使用 JS 和 CSS 來共同處理樣式

一些解決方案

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

存在問題：不能解決全局樣式沖突問題

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

Block：邏輯和頁面功能都獨立的頁面組件，是一個可復用單元，特點如下：

可以隨意嵌套組合

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

可復用，界面可以有任意多個相同Block的實例

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

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

存在問題：對于嵌套過深的層次在命名上會給需要語義化體現的元素造成很大的困難對于多人協作上，需要統一命名規范，這同樣也會造成額外的effort

CSS Modules

（1）什么是css modules

通過構建工具來使指定class達到scope的過程

（2）css modules優勢

解決全局命名沖突問題 css modules只關心組件本身命名唯一

模塊化可以使用composes來引入自身模塊中的樣式以及另一個模塊的樣式

解決嵌套層次過深的問題使用扁平化的類名

（3）css modules的用法

開啟css modules功能
由于css modules對樣式的處理邏輯是放在loader中，所以在css-loader中開啟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]"  // 為了生成類名不是純隨機
        }
      }
    ]
}

修改index.js文件中對樣式的引入方式

import styles from "./index.css"; // 導出對象的格式是鍵值對

編譯之后的類使用

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

// index.js
import styles from "./index.css"; // 導出對象的格式是鍵值對 

// jsx
使用轉化后的類名
 // 如果以下劃線給類命名使用styles["color-style"]

（4）其他用法

局部變量和全局變量

:local 做localIdentName規則處理（類名進行編譯默認可以不寫）

:global 樣式編譯后不變

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

/*下面兩種不會進行編譯*/
// 多個類不編譯
:global {
  .link {
    color: green;
  }
  .box {
    color: yellow;
  }
}
// 單個類不編譯
:global(.box){
  color:blue;
}

compose組合class(需要樣式復用，在 CSS Modules 中，一個選擇器可以繼承另一個選擇器的規則) 自身引入的聲明的優先級會比較高

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

  // 生成的HTML
    css modules

   /* 不同css文件中復用類*/ 
    /* 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 關鍵字可以把 CSS 中的變量輸出到 JS 中）

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

    :export {
      primaryColor: $primary-color;
    }

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

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

備注

項目中如果使用antd 需要將antd樣式不進行編譯
使用exclude排除exclude中指定目錄的資源。在node-modules中關閉css-module，在我們自己寫的src下的css開啟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]"  // 為了生成類名不是純隨機
        }
      }
    ]
}

項目中使用stylelint進行css檢查需要在stylelint配置忽略css-modules的關鍵字

 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種現在流行的 CSS 解決方案談談我的最愛（上）
CSS Modules入門及React中實踐

GPU云服務器云服務器 css-modules -modules modules webrtc modules audio

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104883.html

簡單易懂的CSS Modules

摘要：結果是選手獲勝，名為的元素，最終的值為。而合理的命名約定，的確是組織代碼的有效策略。它們會再由轉換為適當的組合。雖然本文為了嚴謹，結果寫了相當長的篇幅，但希望你讀過之后，還能覺得是簡單易懂的。不要誤會，CSS Modules可不是在說css模塊化這個好像在某些地方見過的詞，它其實是特指一種近期才出現的技術手段。什么技術手段呢？請待后文說明。層疊樣式表我們知道，css的全名叫做層...

chunquedong 2019-08-30 12:58 評論0 收藏0
CSS Modules實踐

摘要：能最大化地結合現有生態預處理器后處理器等和模塊化能力，幾乎零學習成本。編碼相關的所有樣式上例中打印的結果是注意到是按照自動生成的名。實踐手動引用渲染結果使用可以實現使用屬性自動加載模塊。文章同步于Github Pines-Cheng/blog 隨著前端這幾年的風生水起，CSS作為前端的三劍客之一，各種技術方案也是層出不窮。從CSS prepocessor（SASS、LESS、Styl...

hankkin 2019-08-29 13:00 評論0 收藏0
CSS Modules詳解及React中實踐

摘要：上例中打印的結果是對中的名都做了處理，使用對象來保存原和混淆后的對應關系。結合實踐在處直接使用中名即可。如因為只會轉變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領域中進化最慢的一塊。由于 ES2015/201...

wemall 2019-08-30 15:45 評論0 收藏0
CSS Modules

摘要：為什么引入全局樣式沖突進行打包時，將所有文件導入到入口文件中，樣式也會統一加載到入口中，根據的規則，后面的樣式會覆蓋掉前面的樣式聲明，造成全局樣式的覆蓋問題。 CSS Modules 為什么引入CSS Modules （1）全局樣式沖突 webpack進行打包時，將所有js文件導入到入口App.js文件中，樣式也會統一加載到入口中，根據css的layout規則，后面的樣式會覆蓋掉前...

gecko23 2019-08-30 11:14 評論0 收藏0
CSS module 入門

摘要：示例庫通過記錄來查看定制類名默認的哈希算法是，從前面我們可以發現被編譯成了這樣的字符串。與上面不加等價顯式的局部作用域語法通過示例庫的記錄來查看下的樣式復用對于樣式復用，提供了組合的方式來處理。 showImg(https://segmentfault.com/img/bV9WfX?w=800&h=274);前端發展越來越快，這應該是每個前端開發者的切身感受，但是CSS 是前端領域中進...

warnerwu 2019-08-29 15:16 評論0 收藏0