BEM樣式使用規範

2022-06-21 18:24:15 字數 660 閱讀 9666

bem 是 block(塊) element(元素) modifier(修飾器)的簡稱

使用bem規範來命名css,組織html中選擇器的結構,利於css**的維護,使得**結構更清晰(弊端主要是名字會稍長)

__ 雙下劃線:雙下劃線用來連線塊和塊的子元素

-- 雙中劃線: 雙中劃線用來連線塊和塊的修飾狀態或者塊的子元素和塊的子元素的修飾狀態

.search-form 

.search-form__input

.search-form__button--hover {}

/* 避免:避免使用不必要的巢狀(此處只是簡單的巢狀,沒有必要) */

.search-form__content-left .search-form__input {}

/* 稍好的巢狀(此處是在塊的theme1修飾器下的子元素,某些時候有必要) */

.search-form--theme1 .search-form__input {}

/* 錯誤:使用了標籤 */

button.search-form__button {}

.search-form button {}

bem中常見問題及如何避免

前端css樣式 BEM 規則書寫規範

前端經理讓總結css書寫規範,用於公司前端css樣式培訓用,大概總結了一些。bem 是塊 block 元素 element 修飾符 modifier 簡寫,是一套前端css命名方 規範預設有一下幾個約定 讓前端 更容易閱讀和理解,更加的語義化,更容易協作,更容易控制,更加健壯和明確,而且更加嚴密。命...

bem 命名規範

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

BEM的命名規範

css 的命名規範又叫做bem規範,為的是結束混亂的命名方式,達到乙個語義化的css命名方式。bem是三個單詞的縮寫 block 塊 代表更高階別的抽象或元件,element 元素 block的後代,以及modifier 修飾 不同狀態的修飾符。命名方法 block element modifier...