BEM是一種針對CSS的前端命名方法論,它由三個主要部分組成:塊(Block)、元素(Element)和修飾符(Modifier)。這種命名方式旨在提高代碼的可讀性和可維護性,便於團隊協作和項目擴展。
塊(Block)代表頁面中的大區域或組件,如輪播圖(banner)、布局(layout)、文章(article)等。
元素(Element)指的是區域中的組成部分,例如輪播圖中的橫幅圖片(banner__img)、輪播圖中的容器(banner__container)、布局中的頭部(layout__header)等。
修飾符(Modifier)用於表示元素的特定狀態或版本,如輪播圖中處於選中狀態的小圓點(banner__dot_selected)等。
一個完整的BEM類名通常由點(.)分隔,例如`banner__dot_selected`。這種命名方式不僅有助於代碼的可讀性,而且便於團隊成員理解和維護代碼。BEM還建議使用兩個連字元和下劃線而不是一個,以便於界定更細緻的塊。
BEM命名約定由Yandex團隊提出,它與其他的CSS命名方法論如OOCSS、AMCSS、SMACSS等有所不同。BEM的命名模式如下:
.block 代表更高級別的抽象或組件。
.block__element 代表.block的後代,用於形成一個完整的.block的整體。
.block--modifier 代表.block的不同狀態或不同版本。
使用BEM可以使得CSS類對其他開發者更加透明且更有意義,適用於開發大型項目時對代碼的規劃和組合。