CSS命名 BEM方法

2021-10-12 07:18:56 字數 1903 閱讀 9092

bem 是塊（block）、元素（element）、修飾符（modifier）的簡寫，利用不同的區塊，功能以及樣式來給元素命名。

官網原文表述。

bem方法通過使用混合或建立額外的塊元素來達到相同的結果。您不需要建立額外的抽象包裝器。

相對於其他塊定位乙個塊

設定乙個塊元素相對於其他塊元素的位置，最好的方法通常是使用混合class命名。

example

...


...
.page__header 


.page__footer
定位乙個在塊元素內的元素

定位乙個被巢狀元素的位置時，通常通過建立乙個額外的塊元素(例如，block__inner)來設定。

example

...


...
注意

bem方法命名時,不使用元素標籤和id選擇器。塊和元素的樣式是由類選擇器定義的。

通用類樣式

使用通用類樣式的元素，可以不考慮bem方式命名。

example

button 為通用樣式類

...
類選擇器取名

命名必須準確地描述它所表示定位元素的實體。

example
單一職責原則

就像在物件導向程式設計中一樣，在css的bem方法中，單一職責原則意味著每個css實現都必須有單一職責。

example

html

...
css

.button
此時我們寫header__button類選擇器樣式時：

correct:

.header__button
incorrect:

.header__button
dry

dry（「不要重複自己」）是一種軟體開發原理，旨在減少**中的重複。

example

...


...
.button 


.button_theme_islands 


.button_theme_****** 


.block{}  


.block__element{}  


.block--modifier{}
.block 代表了更高階別的抽象或元件。

.block__element代表.block的後代，用於形成乙個完整的.block的整體。

.block–modifier代表.block的不同狀態或不同版本。

example

.site-search{} /* 塊 */  


.site-search__field{} /* 元素 */  


.site-search--full{} /* 修飾符 */
總的來說，bem是乙個非常有用，強大，簡單的命名約定，讓前端**更容易閱讀和理解，更容易協作，更容易控制，更加健壯和明確而且更加嚴密。

《css — bem 命名規範》

《bem》

CSS命名方法之BEM

bem 源自yandex的css 命名方 bem的意思就是塊 block 元素 element 修飾符 modifier 是由yandex團隊提出的一種前端命名方 這種巧妙的命名方法讓你的css類對其他開發者來說更加透明而且更有意義。bem命名約定更加嚴格，而且包含更多的資訊，它們用於乙個團隊開發乙...

BEM命名規則

bem的意思就是塊 block 元素 element 修飾符 modifier 是由yandex團隊提出的一種前端命名方 這種巧妙的命名方法讓你的css類對其他開發者來說更加透明而且更有意義。bem命名約定更加嚴格，而且包含更多的資訊，它們用於乙個團隊開發乙個耗時的大專案。重要的是要注意，我使用的基...

bem 命名規範

bem代表 塊 block 元素 element 修飾符 modifier 我們常用這三個實體開發元件。在選擇器中，由以下三種符號來表示擴充套件的關係 中劃線 僅作為連字元使用，表示某個塊或者某個子元素的多單詞之間的連線記號。雙下劃線 雙下劃線用來連線塊和塊的子元素 單下劃線 單下劃線用來描述乙個塊...