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 程式碼的可維護性、可擴充套件性和可複用性。