Atomic CSS 優化樣式開發 運用特性簡化開發流程、減少維護成本

me
林彥成
2020-05-27 | 2 min.

本篇文章將提到怎麼透過 Atomic CSS 的特性來:

  • 簡化開發流程
  • 減少後續維護成本

前言

最近讀了一篇 Facebook 重新設計前端專案的文章,Facebook 是一個功能非常多元的網站,除了動態牆外還涵蓋了社團、粉專、電商平台…等等,所以原來的架構不再適合,因為:

  • 對於初次進入網站的使用者來說,大部分的程式碼在剛開始都是不需要被載入的
  • 近年需開始實作 dark mode 來提供更好的體驗

原子化樣式

文章裡面提到了原子化樣式 (Atomic-CSS) 的概念,不難發現大家常用的 Bootstrap 4 中也有這樣的設計。

但為了加速大家開發,Bootstrap 提供了過多預設的公版樣式,需要理解後透過覆蓋或是增加權值去修改,感覺有種比誰道行高的感覺 Orz

如果能夠只導入原子化樣式的部分,理論上:

  1. 簡化開發流程
  2. 減少命名與維護成本
  3. 樣式檔的成長也會較接近對數曲線
1
2
3
4
5
6
7
8
9
10
11
12
13
.m-3 {
margin: 1rem !important;
}

.mt-3,
.my-3 {
margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
margin-right: 1rem !important;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" />
<style>
.form-wrapper {
padding: 1rem;
margin: 0.25rem;
background-color: #007bff;
}
.form__input {
margin: 1rem;
}
</style>
</head>
<body>
<form class="form-wrapper">
<input class="form__input"></input>
</form>
<!-- Atomic CSS -->
<form class="p-3 bg-primary m-1">
<input class="m-3"></input>
</form>
</body>
</html>

簡化開發流程

原來的開發流程,要處理兩個檔案:

  • 寫 HTML tag
  • 開 CSS 樣式檔寫樣式
  • 把剛寫的 class 塞回 HTML tag

Atomic CSS 的開發流程,只要提早建立原子化樣式像 .mt-3 後續只需要處理一個檔案:

  • 寫 HTML 的同時就直接加上 <span class="mt-3">test</span>

減少命名與維護成本

寫樣式檔最大的維護性問題會出現在:

  • 多人協作時的命名重複,用 BEM 或是 styled-component 可以去避免
  • 陳年專案不確定到底哪些樣式檔還有在使用

開始使用 Atomic CSS 後我們會發現:

  • 因為不用再花心思在命名,像是 form-wrapper 這種命名將不再需要
  • 樣式檔的成長速度變成接近對數的曲線
  • 可以更快、更小幅度、更安全的修改全站樣式
  • 更方便的修改網站主題 (主視覺)

導入 Atomic CSS 可能的問題

  • 建立時 class 命名一樣需要 convention,需花時間建置符合團隊習慣的命名
  • 如果是用 bootstrap 4 需要時間熟悉
  • 很特殊的狀況其實還是需要走回 BEM 命名風格去客製化少部分樣式

喜歡這篇文章,請幫忙拍拍手喔 🤣

share