今天講模組化 CSS ~

模組化是軟體設計的一種想法，好處是可以做到重複使用、便於管理，最終可提升開發速度。

HTML, CSS, JS 都可以做模組化，而「預處理器」常是模組化的手段之一。例如 pug 是 HTML 的預處理、Sass/Scss 是 CSS 的預處理、Babel 是 JS 的預處理。

假如今天網站有三頁，登入、首頁、結帳，交給三個人製作，那可能就會各自產出 index.css、login.css、checkout.css 三支 css 檔案。

負責設計按鈕的人，可能會定義好一段按鈕樣式：

//一般按鈕
.button{
    width: 100px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    background: aqua;
}
//警告按鈕
.warning{
    width: 100px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    background: brown;
}
//行動呼籲按鈕
.action{
    width: 100px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    background: navy;
}

其他人就會複製這段到自己負責的 index.css, login.css, checkout.css 檔案去，且可能各自的 class 名稱都不一樣，可能有人的按鈕是 .button, 有人是 .btn。但這樣的結果就是，如果今天全站按鈕的 border-radius 要改成 30%，那是不是就要改十個地方？

而模組化思維的作法如下：(採用 SCSS)

1. 命名方式

就像生物是由「界門綱目科屬種」這樣由大到小的命名方式，模組化 CSS 的命名方式也同理。這三個類型都是「按鈕」這個最大的類別，然後再分屬「一般」、「警告」、「行動呼籲」的次類別。因此可以寫成這樣：

.btn
.btn_warning
.btn_action

完成 class 名稱之後，可以定義在 style.css 裡面，讓每一頁都引入這支 css，就不用在各頁面各自定義了。

2. 繼承

我們仔細看，發現這三種按鈕其實差別只有顏色。所以我們做一個繼承的區塊：

%btn{
    width: 100px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
}

再讓各種按鈕去使用

.btn{
    @extend %btn;
    background: aqua;
}
.btn_warning{
    background: brown;
}
.btn_action{
    background: navy;
}

這樣一來，在 HTML 中就可以這樣使用：

<div class="btn btn_warning"></div>

3. 變數

假如今天要將全站具有警告意味的物件，全都改成紅色，包括了按鈕、圖示、字體等等。那可以這樣使用：

$warning_color: #f00;

.btn_warning{
    background: $warning_color;
}

.font_warning{
    background: $warning_color;
}

.img_warning{
    background: $warning_color;
}

這樣就只要更改一個地方，就可以達到效果！

模組化 CSS 還有很多優美而聰明的作法，今天就先介紹這些囉！