原子化 CSS 學習筆記

原子化概念

原子化

原子化是指將事物拆分成最小、最基本的單位，就像原子一樣。這種方法強調把各個元件或功能分解為更細緻、可重複使用的部分，以便在不同的場景下靈活應用。原子化設計理念的出現，為設計師和開發者帶來了新的思考方式，讓他們能更有效率的設計與開發。

關於原子化 CSS

單論原子化設計本身是一個概念，這個概念適用於很多事物上，而原子化 CSS 是基於原子化設計概念而提出的一種 CSS 編寫方法，它傾向於小巧且用途單一的 class，並且會以視覺效果進行命名。

撰寫風格與命名規範可能衍生的問題

OOCSS、SMACSS、BEM、ITCSS 等這些撰寫風格和命名規範在網頁開發領域相當常見。其主要目的是通過組件名稱或狀態描述 class，並給予多個 CSS 屬性配置，以提高可維護性和重用性。然而，在實際應用中，這些方法可能會遇到一些挑戰。

隨著專案需求不斷變化，原有的配置可能會與新需求產生衝突。在這種情況下，開發者往往需要新增具有更高權重的 class 來進行擴充或調整。當需求不斷迭代，衝突愈來愈多時，維護 class 變得越來越困難。

另一方面，我們總是要為一個新的 class 命名，也許是表達元件狀態，抑或是元件中的某個小裝飾，都需要賦予有意義的名稱，但這其中也不乏命名過長的問題發生。團隊就需要不斷地維護命名規範，當規範逐漸失控，不同的團隊成員命名差異也可能越來越大。最終導致不可避免的災難發生。

為了避免重複的樣式，我們通常會將 CSS 檔案拆分，提供所謂的“通用樣式”給團隊成員方便引入和調整。然而在多個產品同時開發的情況下，很容易出現重複的配置但命名卻不同的情況。這將導致維護規範變得更加困難，並增加防止樣式重複的工作量。在這種情況下，CSS 維護可能變得相當棘手。

因此原子化 CSS 應運而生，它提供了一種全新的思路來解決這些問題。原子化 CSS 的核心概念是將樣式拆分成小巧且用途單一的 class，以便更容易管理和維護。

原則是：class 按照單一功能命名。

相較於 OOCSS、SMACSS、BEM、ITCSS 等方法，原子化 CSS 的優勢在於它將樣式抽象成獨立的、可重用的原子，這有助於減少樣式衝突和命名問題。此外，原子化 CSS 有助於團隊成員遵循一致的命名規範，避免因不同命名而造成的混亂。

以下是一些原子化 CSS 的範例：

/* 文字對齊相關 */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}

/* 文字大小相關 */
.text-sm {
  font-size: 0.875rem;
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.125rem;
}

/* 顏色相關 */
.text-black {
  color: #000;
}
.border-green {
  border-color: #9ca3af;
}
.bg-gray {
  background-color: #9ca3af;
}

/* 位置與邊距相關 */
.top-0 {
  top: 0;
}
.left-0 {
  left: 0;
}
.mt-0 {
  margin-top: 0;
}
.mb-2 {
  margin-bottom: 2rem;
}

透過上面的範例可以看到原子化 CSS 的簡單且易於理解的特點。開發者很輕鬆的將這些原子 class 組合在一起以實現各種需求。而且原子化 CSS 的組件化設計，未來的擴展和維護工作也將變得更加容易。

原子化 CSS 通過將樣式拆分成小巧且用途單一的 class，為前端開發帶來了一種新的思路。雖然它可能無法完全取代傳統的 OOCSS、SMACSS、BEM、ITCSS 等方法，但它確實為解決這些方法中存在的問題提供了一種有效的替代方案。

原子化 CSS 框架

Tailwind CSS - Tailwind 是一個功能強大且高度可定制的原子化 CSS 框架。它提供了大量的實用工具類，可以快速的建立 RWD 的網頁。與其他 CSS 框架不同，Tailwind 不強制任何特定的 UI 設計，從而使開發者能夠更靈活創建自己的風格。
Tachyons - Tachyons 是一個輕量級的、功能驅動的 CSS 框架，它遵循原子化設計方法。這個框架提供了一組可組合的 CSS 類，讓開發者可以快速地創建獨特且一致的 UI。Tachyons 的目標是提高開發速度、降低 CSS 複雜性並減少維護負擔。
Atomic CSS - Atomic CSS 是另一個基於原子化設計的框架，其核心思想是將樣式分解為最小的可重用部分。它提供了一組規則，可將 HTML 中的元素與 CSS 中的單一功能類相關聯。這種方法有助於減少 CSS 的規模，提高樣式重用性並降低維護成本。
Master CSS - 比起前面提到的原子化 CSS 框架，MasterCSS 是一種具增強語法的虛擬 CSS 語言。提供虛擬 CSS 引擎自動的生成與智慧的排序規則，著重於體驗導向的設計，提供非常豐富的功能，同時也提供持續完善的開發工具帶來舒適的開發體驗。開發者完全可以不用寫任何 CSS 檔案，只需要在元件 HTML 的 class 中加入 MasterCSS 的語法即可。

Jeff Wu's Note