CSS Modules 是什麼？為什麼我要改用 CSS Modules？

CSS Modules 優點缺點比較，Styled-components 跟 CSS Modules 哪個好？應該用哪個來寫 CSS？

8 min readFeb 9, 2022

Styled-components and CSS Modules ,Which one is better?
What is Css Modules ? Why should you use it ?

很久以前寫了一篇在React 專案中使用 Styled-components ，但最近公司前輩推薦大家改用 CSS Modules ，於是乎開始研究兩者差異，以及CSS Modules 的優缺點，整理成文章用於紀錄，對你也有幫助就更好了:)

主要分為以下幾點介紹

一、什麼是 CSS Modules ？為什麼要用他？

二、怎麼寫 CSS Modules ？在 React 中使用 CSS Modules。

三、比較 Styled-components 跟 CSS Modules 的優點、缺點。

開始 ٩(ˊᗜˋ )و

一、什麼是 CSS Modules ？為什麼要用他？

CSS Modules 的 github document 解釋為，讓所有的 CSS 名稱和動畫名稱默認都有各自的作用域的 CSS 文件。（有點難懂不過可以先往下看再回來看解釋）

為什麼要用 CSS Modules ?

在寫前端專案的時候，都會需要用 CSS 去調整樣式，但元件過於龐大就會找不到自己寫的 CSS 在哪裡，導致開發過程花費太多時間在找 CSS 的問題。
而這個問題有多種解法，CSS Modules 就是其中之一。

通過 CSS Modules，我們可以：

確保單個組件（元件）的所有樣式集中在同一個地方
確保元件樣式只應用於該組件
解決 CSS 全局作用域的問題

二、怎麼寫 CSS Modules ？在 React 中使用 CSS Modules。

使用 npx create-react-app建立專案的同時，需要的設定都已經自動完成了，也就是說，不須安裝任何其他套件就可以使用 CSS Modules 了。
使用方式也非常簡單。

新增一個檔案，命名為 Hello.module.css

.textColor{
    color: red;
    font-size: 30px;
}

2. 新增一個元件，命名為 Hello.js，引入 css

import React from "react";
import styles from "./Hello.module.css";function Hello() {
    return (
        <div className={styles.textColor}>
            <p>Hello world !</p>
        </div>
    );
}export default Hello;

看一下畫面會發現，樣式有確實呈現，且 class 後綴會增加亂數（唯一性）。

到這邊已經學會如何在 React 中使用 css.modules 了，接下來紀錄一些進階運用的小技巧！

進階運用

composes 繼承樣式
global 全域樣式
hover / focus 怎麼加
使用變數
composes 繼承其他 css 設定

.text {
    color: red;
    font-size: 30px;
}.bgc{
    background-color: bisque; 
    composes:text
}

Hello.js

import React from "react";
import styles from "./Hello.module.css";function Hello() {
    return (
        <div>
            <p className={styles.text}>Hello world !</p>
            <div className={styles.bgc}>
                <p>abcdefg</p>
            </div>
        </div>
    );
}export default Hello;

1–2. composes 也可以繼承其他檔案的 CSS

.text {
    color: red;
    font-size: 30px;
}.bgc {
    background-color: bisque;
    composes: borderColor from "./border.module.css";
}

2. global 全域樣式（等同於一般 className 的寫法，不會增加後綴亂碼）

<h2 className="wrap">this is global</h2>
...// ./Hello.module.css:global(.wrap) {
    color: green;
}

3. hover / focus （寫法跟一般CSS一樣）

.text {
    color: red;
    font-size: 30px;
}
.text:hover {
    color: white;
    background-color: rgb(198, 216, 198);
}

4. 使用變數

新增一個檔案 colors.module.css

定義一個 value ，名 blue 值 #aaa

@value blue: #aaa;

在要使用變數的地方引用（Hello.module.css 中）

@value colors: "./colors.module.css";
@value blue from colors;.text {
    color: rgb(253, 203, 174);
    font-size: 30px;
    padding: 20px;
    background-color: blue;
}

三、比較 Styled-components 跟 CSS Modules 的優點、缺點

CSS Modules 優點：

提高程式碼重用率
提高開發效率、減少溝通成本
提高頁面容錯
降低耦合
降低釋出風險
減少Bug定位時間和Fix成本
更好的實現快速迭代
便於程式碼維護
有效避免全局污染和样式衝突，能最大化地結合現有 CSS 生態和 JS 模塊化能力
只使用一個 className 就能把所有樣式定義好

缺點：

與組件庫難以配合
會帶來一些使用成本，本地樣式覆蓋困難，寫到最後可能一直在用 :global。

Styled-components 優點：

使用成本低，如果是要做一個組件庫， npm 就能直接用，樣式全部自己搞定，不需要依賴其它組件。
適合跨平台
適用於 react-native 這類本身就沒有 css 的運行環境
沒有全域污染的問題。
共享變數和可用程式邏輯撰寫，就像過去 LESS、SASS 或 SCSS 那樣的便利。
每個元件只管自己的樣式，又由於是撰寫 inline-style，不會有冗余（廢棄）的程式碼，只要寫了都是有用的。
在 Code Splitting 上由於和元件合併了，因此只會載入要用到的程式碼，增進效能。

缺點：

缺乏擴展性

// 簡單範例
import React from 'react';
import styles from 'styled-components';const Title = styles.h1`
 background-color: #222;
 color: white;
`;function App () {
   return (
     <Title>
       React
     </Title>
   );
}

總結

沒有最好，只有適不適合。

兩種都有各自的擁護者，就看專案團隊習慣使用哪個（隨公司逐流(?）。

（我自己比較喜歡 css modules，因為對我來說他更貼近原本css的寫法，也有語法 highlight 方便閱讀。）

完成 ٩(ˊᗜˋ )و

CSS Modules 是什麼？為什麼我要改用 CSS Modules？

CSS Modules 優點缺點比較，Styled-components 跟 CSS Modules 哪個好？應該用哪個來寫 CSS？

一、什麼是 CSS Modules ？為什麼要用他？

為什麼要用 CSS Modules ?

二、怎麼寫 CSS Modules ？在 React 中使用 CSS Modules。

進階運用

三、比較 Styled-components 跟 CSS Modules 的優點、缺點

總結

Written by Molly M