說說你對BEM規範的理解，同時舉例說明常見的CSS規範有哪些？

王铁柱6發表於2024-11-23
CSS

BEM (Block, Element, Modifier) 是一種前端命名規範，旨在幫助開發者建立可複用、易維護和可擴充套件的 CSS 程式碼。它透過將 UI 元件分解成三個部分來實現：

  • Block (塊): 代表一個獨立的、可複用的元件。例如：header、menu、button。塊的命名應該簡潔明瞭，能夠清晰地表達元件的含義。
  • Element (元素): 是塊的組成部分，不能獨立存在。例如：header__logo、menu__item、button__icon。元素的命名使用雙下劃線 __ 連線塊和元素名稱。
  • Modifier (修飾符): 用於表示塊或元素的不同狀態或變體。例如：button--primary、menu__item--active、header--fixed。修飾符的命名使用雙連字元 -- 連線塊/元素和修飾符名稱。

BEM 命名示例:

<header class="header">
  <div class="header__logo"></div>
  <nav class="header__nav">
    <ul class="header__list">
      <li class="header__item header__item--active">Home</li>
      <li class="header__item">About</li>
      <li class="header__item">Contact</li>
    </ul>
  </nav>
</header>

.header {}
.header__logo {}
.header__nav {}
.header__list {}
.header__item {}
.header__item--active {}

常見的 CSS 規範除了 BEM 之外，還有:

  • OOCSS (Object Oriented CSS): 物件導向 CSS，強調將樣式抽象成可複用的物件，透過組合物件來構建複雜的 UI。核心思想是分離結構和外觀，以及容器和內容。
  • SMACSS (Scalable and Modular Architecture for CSS): 可擴充套件的模組化 CSS 架構，將 CSS 規則分為五個類別：Base、Layout、Modules、State、Theme。這種分類方式有助於組織和管理大型 CSS 專案。
  • Atomic CSS (ACSS): 原子化 CSS，將樣式拆分成最小的、不可再分的單元，每個單元只負責一個樣式屬性。例如：.margin-top-10、.font-size-16。這種方式可以提高程式碼的複用率，但也可能導致類名冗長。
  • ITCSS (Inverted Triangle CSS): 倒三角 CSS，是一種分層架構，將 CSS 規則按照特異性從高到低排列。這種方式可以提高程式碼的可維護性和可預測性。
  • CSS Modules: CSS 模組，透過構建工具將 CSS 檔案編譯成帶有唯一類名的 CSS 檔案，避免了全域性樣式衝突。

選擇哪種 CSS 規範取決於專案的規模、複雜度和團隊的偏好。 BEM 因為其簡單易懂和易於實現而被廣泛採用，尤其適合中小型專案。 對於大型專案，可以考慮結合使用多種規範，例如 BEM + SMACSS。 最終目標都是提高 CSS 程式碼的可維護性、可擴充套件性和可複用性。

相關文章