iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
1
自我挑戰組

前端成長日記系列 第 27

模組化CSS

今天講模組化 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 還有很多優美而聰明的作法,今天就先介紹這些囉!


上一篇
第二份工作(Frontend)
下一篇
Element UI簡介
系列文
前端成長日記30

尚未有邦友留言

立即登入留言