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

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

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，我們可以：

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

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

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

1. 新增一個檔案，命名為 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 了，接下來紀錄一些進階運用的小技巧！

進階運用

1. composes 繼承樣式
2. global 全域樣式
3. hover / focus 怎麼加
4. 使用變數
5. 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 方便閱讀。）

完成 ٩(ˊᗜˋ )و