CSS Modules 入門及 React 中實踐

寫在前面

讀文先看此圖，能先有個大體概念：

閱讀本文需要 11m 24s。

CSS Modules介紹

CSS Modules是什麼東西呢？首先，讓我們從官方文檔入手：
GitHub – css-modules/css-modules: Documentation about css-modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. CSS模塊就是所有的類名都只有局部作用域的CSS文件。

所以CSS Modules既不是官方標準，也不是瀏覽器的特性，而是在構建步驟（例如使用Webpack或Browserify）中對CSS類名選擇器限定作用域的一種方式（通過hash實現類似於命名空間的方法）。

It doesn’t really matter in the end (although shorter class names mean shorter stylesheets) because the point is that they are dynamically generated, unique, and mapped to the correct styles.在使用CSS模塊時，類名是動態生成的，唯一的，並準確對應到源文件中的各個類的樣式。

這也是實現樣式作用域的原理。它們被限定在特定的模板裏。例如我們在buttons.js裏引入buttons.css文件，並使用.btn的樣式，在其他組件裏是不會被.btn影響的，除非它也引入了buttons.css.

可我們是出於什麼目的把CSS和HTML文件搞得這麼零碎呢？我們爲什麼要使用CSS模塊呢？

爲什麼我們需要CSS模塊化

CSS全局作用域問題

CSS的規則都是全局的，任何一個組件的樣式規則，都對整個頁面有效。相信寫css的人都會遇到樣式衝突（污染）的問題。

於是一般這麼做（筆者都做過）：
* class命名寫長一點吧，降低衝突的機率
* 加個父元素的選擇器，限制範圍
* 重新命名個class吧，比較保險

所以亟待解決的問題就是css局部作用域避免全局樣式衝突（污染）的問題

JS CSS無法共享變量

複雜組件要使用 JS 和 CSS 來共同處理樣式，就會造成有些變量在 JS 和 CSS 中冗餘，CSS預處理器/後處理器等都不提供跨 JS 和 CSS 共享變量這種能力。

健壯並且擴展方便的CSS

作爲有追求的工程師，編寫健壯並且擴展方便的CSS一直是我們的目標。那麼如何定義健壯並且擴展方便？有三個要點：

面向組件 – 處理 UI 複雜性的最佳實踐就是將 UI 分割成一個個的小組件 Locality_of_reference 。如果你正在使用一個合理的框架，JavaScript 方面就將原生支持（組件化）。舉個例子，React 就鼓勵高度組件化和分割。我們希望有一個 CSS 架構去匹配。
沙箱化（Sandboxed） – 如果一個組件的樣式會對其他組件產生不必要以及意想不到的影響，那麼將 UI 分割成組件並沒有什麼用。就這方面而言，CSS的全局作用域會給你造成負擔。
方便 – 我們想要所有好的東西，並且不想產生更多的工作。也就是說，我們不想因爲採用這個架構而讓我們的開發者體驗變得更糟。可能的話，我們想開發者體驗變得更好。

CSS模塊化方案分類

CSS 模塊化的解決方案有很多，但主要有三類。

CSS 命名約定

規範化CSS的模塊化解決方案（比如BEM BEM — Block Element Modifier ,OOCSS,AMCSS,SMACSS,SUITCSS)
但存在以下問題：
* JS CSS之間依然沒有打通變量和選擇器等
* 複雜的命名

CSS in JS

徹底拋棄 CSS，用 JavaScript 寫 CSS 規則，並內聯樣式。 React: CSS in JS // Speaker Deck 。Radium，react-style 屬於這一類。但存在以下問題：
* 無法使用僞類，媒體查詢等
* 樣式代碼也會出現大量重複。
* 不能利用成熟的 CSS 預處理器（或後處理器）

使用JS 來管理樣式模塊

使用JS編譯原生的CSS文件，使其具備模塊化的能力，代表是 CSS Modules GitHub – css-modules/css-modules: Documentation about css-modules 。

CSS Modules 能最大化地結合現有 CSS 生態(預處理器/後處理器等)和 JS 模塊化能力，幾乎零學習成本。只要你使用 Webpack，可以在任何項目中使用。是筆者認爲目前最好的 CSS 模塊化解決方案。

CSS Modules 使用教程

啓用 CSS Modules

Crayon Syntax Highlighter v_2.7.2_beta

// webpack.config.js
css?modules&localIdentName=[name]__[local]-[hash:base64:5]

[Format Time: 0.0019 seconds]

加上 modules 即爲啓用， localIdentName 是設置生成樣式的命名規則。

Crayon Syntax Highlighter v_2.7.2_beta

/* components/Button.css */
.normal { /* normal 相關的所有樣式 */ }

[Format Time: 0.0003 seconds] Crayon Syntax Highlighter v_2.7.2_beta

// components/Button.js
import styles from './Button.css';
console.log(styles);
buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

[Format Time: 0.0008 seconds]

生成的 HTML 是

Crayon Syntax Highlighter v_2.7.2_beta

<button class="button--normal-abc53">Submit</button>

[Format Time: 0.0003 seconds]

注意到 button--normal-abc53 是 CSS Modules 按照 localIdentName 自動生成的 class 名。其中的 abc53 是按照給定算法生成的序列碼。經過這樣混淆處理後，class 名基本就是唯一的，大大降低了項目中樣式覆蓋的機率。同時在生產環境下修改規則，生成更短的 class 名，可以提高 CSS 的壓縮率。

上例中 console 打印的結果是：

Crayon Syntax Highlighter v_2.7.2_beta

Object {
  normal: 'button--normal-abc53',
  disabled: 'button--disabled-def886',
}

[Format Time: 0.0004 seconds]

CSS Modules 對 CSS 中的 class 名都做了處理，使用對象來保存原 class 和混淆後 class 的對應關係。

通過這些簡單的處理，CSS Modules 實現了以下幾點：
* 所有樣式都是局部作用域的，解決了全局污染問題
* class 名生成規則配置靈活，可以此來壓縮 class 名
* 只需引用組件的 JS 就能搞定組件所有的 JS 和 CSS
* 依然是 CSS，幾乎 0 學習成本

CSS Modules 在React中的實踐

那麼我們在React中怎麼使用？

手動引用解決

在 className 處直接使用 css 中 class 名即可。

Crayon Syntax Highlighter v_2.7.2_beta

import React from 'react';
import styles from './table.css';
 
export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
            </div>
        </div>;
    }
}

[Format Time: 0.0013 seconds]

渲染出來的組件出來

Crayon Syntax Highlighter v_2.7.2_beta

<div class="table__table___32osj">
    <div class="table__row___2w27N">
    </div>
</div>

[Format Time: 0.0005 seconds]

react-css-modules

如果你不想頻繁的輸入 styles.** ，有一個 GitHub – gajus/react-css-modules: Seamless mapping of class names to CSS modules inside of React components. ，它通過高階函數的形式來生成 className ，不過不推薦使用，後文會提到。

API也很簡單，給組件外包一個CSSModules即可。

Crayon Syntax Highlighter v_2.7.2_beta

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';
 
class Table extends React.Component {
    render () {
        return <div styleName='table'>
        </div>;
    }
}
 
export default CSSModules(Table, styles);

[Format Time: 0.0015 seconds]

不過這樣我們可以看到，它是需要運行時的依賴，而且需要在運行時才獲取className，性能損耗大，那麼有沒有方便又接近無損的方法呢？答案是有的，使用babel插件 babel-plugin-react-css-modules GitHub – gajus/babel-plugin-react-css-modules: Transforms styleName to className using compile time CSS module resolution. 把 className 獲取前置到編譯階段。

babel-plugin-react-css-modules

babel-plugin-react-css-modules 可以實現使用 styleName 屬性自動加載CSS模塊。我們通過該babel插件來進行語法樹解析並最終生成 className 。

來看看組件的寫法，現在你只需要把 className 換成 styleName 即可獲得CSS局部作用域的能力了，是不是非常簡單。

Crayon Syntax Highlighter v_2.7.2_beta

import React from 'react';
import styles from './table.css';
 
class Table extends React.Component {
    render () {
        return <div styleName='table'>
        </div>;
    }
}
 
export default Table；

[Format Time: 0.0012 seconds]

工作原理

那麼該babel插件是怎麼工作的呢？讓我們從官方文檔入手：

GitHub – gajus/babel-plugin-react-css-modules: Transforms styleName to className using compile time CSS module resolution.

筆者不才，稍作翻譯如下：
1. 構建每個文件的所有樣式表導入的索引（導入具有 .css 或 .scss 擴展名的文件）。
2. 使用 postcss 解析匹配到的css文件
3. 遍歷所有 JSX 元素聲明
4. 把 styleName 屬性解析成匿名和命名的局部css模塊引用
5. 查找與CSS模塊引用相匹配的CSS類名稱：
* 如果 styleName 的值是一個字符串字面值，生成一個字符串字面值。
* 如果是JSXExpressionContainer，在運行時使用helper函數來構建如果 styleName 的值是一個 jSXExpressionContainer , 使用輔助函數（[ getClassName ]在運行時構造 className 值。
6. 從元素上移除 styleName 屬性。
7. 將生成的 className 添加到現有的 className 值中（如果不存在則創建 className 屬性）。

使用實例

在成熟的項目中，一般都會用到CSS預處理器或者後處理器。

這裏以使用了 stylus CSS預處理器爲例子，我們來看下如何使用。

安裝依賴

Crayon Syntax Highlighter v_2.7.2_beta

npm install -save-dev sugerss babel-plugin-react-css-modules

[Format Time: 0.0006 seconds]

編寫Webpack配置

Crayon Syntax Highlighter v_2.7.2_beta

// webpack.config.js
module: {
  loaders: [{
    test: /\.js?$/,
    loader: [['babel-plugin-react-css-modules',{
          generateScopedName:'[name]__[local]',
          filetypes: {
              ".styl": "sugerss"
           }
     }]]
  }, {
    test: /\.module.styl$/,
    loader: 'style!css?modules&localIdentName=[name]__[local]!styl?sourceMap=true'
  }, {
    test: /\.styl$/,
    loader: 'style!css!styl?sourceMap=true'
  }]
}

[Format Time: 0.0021 seconds]

組件寫法

Crayon Syntax Highlighter v_2.7.2_beta

import React from 'react';
import './table.module.styl';
 
class Table extends React.Component {
    render () {
        return <div styleName='table'>
        </div>;
    }
}
 
export default Table；

[Format Time: 0.0013 seconds]

如上，你可以通過配置Webpack中module.loaders的test路徑 Webpack-module-loaders-configuration ，來區分樣式文件是否需要CSS模塊化。
搭配 sugerss 這個 postcss 插件作爲 stylus 的語法加載器，來支持babel插件 babel-plugin-react-css-modules 的語法解析。

最後我們回過頭來看下，我們React組件只需要把 className 換成 styleName ，搭配以上構建配置，即可實現CSS模塊化。

最後

CSS Modules 很好的解決了 CSS 目前面臨的模塊化難題。支持與 CSS處理器搭配使用，能充分利用現有技術積累。如果你的產品中正好遇到類似問題，非常值得一試。

希望大家都能寫出健壯並且可擴展的CSS，以上。

CSS Modules 入門及 React 中實踐

寫在前面

CSS Modules介紹

爲什麼我們需要CSS模塊化

CSS全局作用域問題

JS CSS無法共享變量

健壯並且擴展方便的CSS

CSS模塊化方案分類

CSS 命名約定

CSS in JS

使用JS 來管理樣式模塊

CSS Modules 使用教程

啓用 CSS Modules

CSS Modules 在React中的實踐

手動引用解決

react-css-modules

babel-plugin-react-css-modules

工作原理

使用實例

最後

10分鐘搞定Mysql主從部署配置

如何使用 JS 判斷用戶是否處於活躍狀態

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

Java ThreadPoolShutdown

“她”來了，陪伴賽道鉅變！爲GPT-4o加上你的一個數字分身

nodejs學習06——小案例

教你用webgl快速創建一個小世界

CSS Modules 入門及 React 中實踐

Omi框架Store體系的前世今生

移動端輸入框填坑系列（一）

Omi v1.0.3發佈 – 正式支持傳遞javascript表達式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結