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

Lin Yen-Cheng on 2020-05-27 5 min. read

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

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

前言

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

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

原子化樣式

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

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

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

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

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

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

<!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 &#123;
      padding: 1rem;
      margin: 0.25rem;
      background-color: #007bff;
    &#125;
    .form__input &#123;
      margin: 1rem;
    &#125;
  </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