CSS Modules

wangdai 發(fā)布于2019-08-23 18:14 / 2541人閱讀

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

CSS Modules 為什么引入CSS Modules

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

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

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

一些解決方案

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

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

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

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

可以隨意嵌套組合

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

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

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

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

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

CSS Modules

（1）什么是css modules

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

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

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

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

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

（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]"  // 為了生成類名不是純隨機(jī)
        }
      }
    ]
}

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

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

編譯之后的類使用

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

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

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

（4）其他用法

局部變量和全局變量

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

:global 樣式編譯后不變

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

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

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

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

  // 生成的HTML
    css modules

   /* 不同css文件中復(fù)用類*/ 
    /* 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";

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

備注

項(xiàng)目中如果使用antd 需要將antd樣式不進(jìn)行編譯
使用exclude排除exclude中指定目錄的資源。在node-modules中關(guān)閉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]"  // 為了生成類名不是純隨機(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ù)勎业淖類?（上）
CSS Modules入門及React中實(shí)踐

GPU云服務(wù)器云服務(wù)器 css-modules -modules modules webrtc modules audio

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104883.html

發(fā)表評論

登陸后可評論

0條評論

wangdai

男|高級講師

我要關(guān)注我要私信

TA的文章

【算法】劍指 Offer II 110. 所有路徑｜797. 所有可能的路徑（多語言實(shí)現(xiàn)）

閱讀 3237·2021-11-23 09:51
PacificRack七夕優(yōu)惠：$13.14/年KVM-2GB/60GB/1TB/洛杉磯機(jī)房

閱讀 1042·2021-08-05 09:58
前端每日實(shí)戰(zhàn)：86# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)方塊旋轉(zhuǎn)動畫

閱讀 676·2019-08-29 16:05
CSS基礎(chǔ)篇--你知道的display的值有多少？用了多少？

閱讀 985·2019-08-28 18:17
JavaScript入門

閱讀 3039·2019-08-26 14:06
createjs知識點(diǎn)梳理，持續(xù)更新中...

閱讀 2734·2019-08-26 12:20
RegExp對象

閱讀 2171·2019-08-26 12:18
Babylon-AST初探-代碼查詢(Retrieve)

閱讀 3074·2019-08-26 11:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS Modules

相關(guān)文章

簡單易懂的CSS Modules

CSS Modules實(shí)踐

CSS Modules詳解及React中實(shí)踐

***CSS* *Modules***

CSS module 入門

發(fā)表評論

0條評論

wangdai

男|高級講師

TA的文章

【算法】劍指 Offer II 110. 所有路徑｜797. 所有可能的路徑（多語言實(shí)現(xiàn)）

PacificRack七夕優(yōu)惠：$13.14/年KVM-2GB/60GB/1TB/洛杉磯機(jī)房

前端每日實(shí)戰(zhàn)：86# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)方塊旋轉(zhuǎn)動畫

CSS基礎(chǔ)篇--你知道的display的值有多少？用了多少？

JavaScript入門

createjs知識點(diǎn)梳理，持續(xù)更新中...

RegExp對象

Babylon-AST初探-代碼查詢(Retrieve)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS Modules

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！