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

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

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

  • Block (塊): 代表一個獨立的、可複用的元件。例如:headermenubutton。塊的命名應該簡潔明瞭,能夠清晰地表達元件的含義。
  • Element (元素): 是塊的組成部分,不能獨立存在。例如:header__logomenu__itembutton__icon。元素的命名使用雙下劃線 __ 連線塊和元素名稱。
  • Modifier (修飾符): 用於表示塊或元素的不同狀態或變體。例如:button--primarymenu__item--activeheader--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 程式碼的可維護性、可擴充套件性和可複用性。

相關文章