CSS Module

身為一個網頁新手知道，前端由「HTML」、「JavaScript」、「CSS」三個部分所組成，相輔相成的進化著。

CSS Module 是 CSS 近期被提出的一種模式/寫法，主要的概念是在原本的 CSS 寫法中加入了 模組作用域 與 模組组合與依賴 兩個重要特性。

特性 I. 作用域

局部作用

傳統的 CSS 是對全域有效的，但為了限制局部作用，把 CCS 當成是一個函數引入，並用特定的 className 綁定。

  • App.css
1
2
3
.title {
  color: red;
}
  • App.js
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

首先，我們將 ./App.css 引入到 style 變數當中，接者使用 style.title 綁定。

全域作用

除了局部綁定之外，也有全域使用的方法，在 CSS 中加上 :global(.className) 即可。用法如下：

  • App.css
1
2
3
4
5
6
7
:local(.title) {
  color: red;
}

:global(.title) {
  color: green;
}
  • App.js
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import styles from './App.css';

export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};

特性 II. 组合與相依

第二個重要的特性就是 CSS 中的樣式是可以被組合的。以下的血能夠讓 .title 繼承 .className 的樣式，稱為組合（Composition）；當然，也可以繼承不同 CSS 檔案中的樣式，稱為相依（Dependencies）。

  • App.css
1
2
3
4
5
6
7
8
9
.className {
  background-color: blue;
}

.title {
  composes: className;
  composes: className from './another.css';
  color: red;
}

原理

以上講的只是如何使用，但是背後其實是有一些原理的。在執行作成中 CSS Module 會編譯成 ow-level interchange format 稱為 ICSS（Interoperable CSS）。

以前面的例子來說：

  • App.css
1
2
3
.title {
  color: red;
}
  • App.js
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

實際上透過 CSS Module 的機制會將上面的程式轉譯成：

  • html
1
2
3
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>
  • CSS
1
2
3
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

開始使用

說了那麼多，最重要的就是怎麼開始，我們知道在前端有個人人愛用的打包軟體 - webpack ， CSS 不免俗的也在這個生態系當中。其中一種做法可以採用 css-loader 。

style-loader!css-loader?modules，在 css-loader 加了modules 參數，表示要使用 CSS Modules 功能。

  • webpack.config.js
1
2
3
4
5
6
7
8
9
10
...
module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
...

Reference

[1] CSS Modules
[2] CSS Modules 用法教程

License


本著作由 Chang, Wei-Yaun (v123582) 製作，
以創用CC 姓名標示-相同方式分享 3.0 Unported授權條款釋出。