CSS命名規範 - BEM

CSS 命名規範推薦使用 BEM 命名規範。

規範

BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發者來說更加透明而且更有意義。BEM命名約定更加嚴格，而且包含更多的信息，它們用於一個團隊開發一個耗時的大項目。

BEM的命名規矩很容易記：block-name__element-name--modifier-name，也就是模塊名 + 元素名 + 修飾器名。

.block{}
.block__element{}
.block--modifier{}

• .block 代表了更高級別的抽象或組件。
• .block__element 代表.block的後代，用於形成一個完整的.block的整體。
• .block--modifier 代表.block的不同狀態或不同版本。

示例

.block__element 示例

代碼中 function 和 news 是更具體的塊。className 整理後如下：

c-help
  c-help__header
    c-help__title
  c-help__content
    c-help__function
      c-help__page
      function__block
      function__item
      function__title
      function__datetime
    c-help__right
      c-help__news
        c-help__page
        news__block
        news__items
        news__index
        news__info
        news__title
        news__datetime

style層級代碼如下

.function__block 等名稱雖然通用，但是加了層級後，就只能在 c-help 組件中使用，避免了污染全局。

.block--modifier 示例

modifier 代表.block的不同狀態或不同版本,也就是修飾器。

參考

• CSS命名規範——BEM思想（非常讚的規範）

whosmeya.com