當我們在撰寫 CSS 時，都會需要考慮的之後的維護方便度或可擴充性，於是就有 CSS 模組化的觀念產生，而這些又大致可以分為 OOCSS、SMACSS 和 BEM 幾種類別，以下就以這幾類來做說明：

OOCSS (Object-Oriented CSS)：

  • 基本理念： OOCSS 的核心理念是將樣式應用到獨立的對象（物件）上，而不是基於特定的頁面或組件。
  • 特點： 分離結構（Objects）和外觀（Skins），使用「結構」的基本樣式，然後透過「外觀」類別來修改樣式。
  • 優點： 提高代碼的可重用性，減少冗余，使樣式更模組化。
  • 缺點： 可能需要額外的類別來描述外觀，可能造成 class 的過度使用。

 範例：

<div class="box object1 skin1"></div>
<div class="box object2 skin2"></div>

CSS：

/* Base styles for the box */
.box {
  width: 100px;
  height: 100px;
}

/* Object styles */
.object1 {
  background-color: #3498db;
}

.object2 {
  background-color: #e74c3c;
}

/* Skin styles */
.skin1 {
  border: 2px solid #2c3e50;
}

.skin2 {
  border: 2px solid #c0392b;
}

 

SMACSS (Scalable and Modular Architecture for CSS)：

  • 基本理念： SMACSS 強調分離樣式表為基本結構、模組、狀態和佈局。
  • 特點： 將樣式分為五個不同的分類：基本結構（Base）、佈局（Layout）、模組（Module）、狀態（State）、主題（Theme）。
  • 優點： 有助於建立一個有組織且易於擴充的 CSS 樣式表。
  • 缺點： 可能需要額外的學習成本，以及嚴格的 class 概念。

範例：

<div class="container">
  <header class="site-header"></header>
  <nav class="site-nav"></nav>
  <main class="site-content"></main>
  <aside class="site-sidebar"></aside>
  <footer class="site-footer"></footer>
</div>

CSS:

/* Base styles */
.container {
  width: 100%;
}

/* Layout styles */
.site-header, .site-nav, .site-content, .site-sidebar, .site-footer {
  margin-bottom: 20px;
}

.site-header {
  background-color: #3498db;
}

.site-nav {
  background-color: #2ecc71;
}

.site-content {
  float: left;
  width: 70%;
}

.site-sidebar {
  float: left;
  width: 30%;
}

.site-footer {
  clear: both;
  background-color: #e74c3c;
}

 

BEM (Block Element Modifier)：

  • 基本理念： BEM 強調將頁面拆分為獨立的模組，並使用特定的命名規則。
  • 命名規則： 區塊（Block）用來描述獨立的模組，元素（Element）用來描述模組內的元素，修改器（Modifier）用來描述元素或模塊的不同狀態或變體。
  • 優點： 清晰的命名規則，易於閱讀和維護，有助於避免樣式的覆蓋和衝突。
  • 缺點： 有時候命名可能變得較長，但這通常是可以接受的代價。

 範例：

<div class="box box--large">
  <div class="box__title">Title</div>
  <div class="box__content">
    <p class="box__content__text">Content text</p>
    <p class="box__content__text box__content__text--important">Important text</p>
  </div>
</div>

CSS:

/* Block styles */
.box {
  border: 1px solid #3498db;
}

/* Modifier styles */
.box--large {
  width: 200px;
}

/* Element styles */
.box__title {
  font-weight: bold;
}

.box__content {
  padding: 10px;
}

.box__content__text {
  color: #2ecc71;
}

.box__content__text--important {
  color: #e74c3c;
}

總合來說，OOCSS、SMACSS 和 BEM 都是為了解決 CSS 開發中的一些常見問題，提升程式碼的可維護性和可擴展性。選擇其中一種方法通常取決於團隊的習慣、專案的需求以及個人喜好。在實際應用中，也可以結合運用這些方法的特點。