CSS Modules 初探

Aspirn發表於2019-03-27

區域性作用域

CSS Modules採用使class類名變得獨一無二，不與其他選擇器重名，從而產生了區域性作用域。

一個如下的React元件：

import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};
複製程式碼

App.css：

.title {
  color: red;
}
複製程式碼

styles是App.css的引入，在jsx中就可以通過style.title匹配對應的class。

構建工具會將該類名style.title轉化為一個雜湊字串，確保了其唯一性。

HTML:

<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>
複製程式碼

CSS:

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}
複製程式碼

全域性作用域

CSS Modules允許使用 :global(:className) 的語法，宣告一個全域性規則，但是在元件內使用時如要使用該類名的樣式，不能再以 {style.className} 的方式，而是直接採取 "className" 的形式。

修改上面的App.css:

.title {
  color: red;
}

:global(.title) {
  color: green;
}
複製程式碼

修改React元件：

import React from 'react';
import styles from './App.css';

export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};
複製程式碼

如上修改，h1的內容將被渲染成green。

如果此時我的

<h1 className="title">
      Hello World
    </h1>
複製程式碼

改為：

<h1 className={styles.title}>
      Hello World
    </h1>
複製程式碼

則h1的內容將被渲染成red。

CSS Modules還支援顯示的宣告區域性作用域， :local(:className) ,所以上面的App.css還可以寫成下面這樣：

:local(.title) {
  color: red;
}

:global(.title) {
  color: green;
}
複製程式碼

個性化定製雜湊類名

通過webpack.config.js去進行配置。

className的組合（繼承）

修改App.css：

.className {
  background-color: blue;
}

.title {
  composes: className;
  color: red;
}
複製程式碼

修改React元件：

import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};
複製程式碼

title繼承了className的屬性，渲染出來的h1是藍色背景紅色字型樣式的。

composes只能是composes

編譯以後的HTML:

編譯以後的CSS：

className組合（繼承）其他模組

新建一個another.css:

.className {
  background-color: blue;
}
複製程式碼

修改App.css：

.title {
  composes: className from './another.css';
  color: red;
}
複製程式碼

React元件不變，執行例項可以看到頁面依然渲染出來的h1是藍色背景紅色字型樣式的。

輸入變數

CSS Modules 支援使用變數，不過需要安裝 PostCSS 和 postcss-modules-values。

在一個公共檔案裡去定義一個colors.css，在裡面定義變數：

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;
複製程式碼

App.css引入這些：

@value colors: "./colors.css";
@value blue, red, green from colors;

.title {
  color: red;
  background-color: blue;
}
複製程式碼