CSS命名規範 - BEM
阿新 • • 發佈:2020-12-28
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的不同狀態或不同版本,也就是修飾器。
參考