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

2021-10-11 14:36:58 字數 792 閱讀 2760

前端經理讓總結css書寫規範,用於公司前端css樣式培訓用,大概總結了一些。

bem 是塊(block),元素(element),修飾符(modifier)簡寫,是一套前端css命名方**。

規範預設有一下幾個約定:

讓前端**更容易閱讀和理解,更加的語義化,更容易協作,更容易控制,更加健壯和明確,而且更加嚴密。

命名方式長且難看,書寫**(使用less/sass解決)

block:

一、block可以巢狀,可以重複。

二、不影響自身布局,不能設定margin或者padding。

三、不能再bem中使用元素選擇器和id選擇器。

四、用於描述目的,例如menu,button等

element:

一、element表示其目的(item,text),而不是狀態(big,red)

二、element 可以任意巢狀,並且巢狀任意數量。

三、element只能作為block的一部分。所以類似於block__item1__item2是不合規矩的

modifiter:

一、修飾符不能單獨使用

二、表示其大小,主題,禁用,狀態,行為等。

三、與塊元素的連線符為 –

}}

}

web前端之CSS樣式書寫方法

回顧之前寫的內容 1.認識編譯軟體和html 2.html中的標籤和特殊字元 3.html中的頭部標籤和常用標籤 4.超連結 錨鏈結和功能性鏈結 之前介紹過修飾網頁需要用到css樣式,但是在 寫css樣式呢?這篇帖子就介紹如何書寫。本篇帖子的目錄 1.內部css樣式 書寫 2.外部css樣式 書寫 ...

CSS樣式書寫規範

編碼設定 必須在css所有字元的前面 包括編碼注釋 charset才會生效。設定css檔案的編碼格式為utf 8編碼,寫在css檔案最前面。字元編碼 charset utf 8 數值與單位 當屬性值或顏色引數為 0 1 之間的數時,省略小數點前的 0 color rgba 255,255,255,5...

CSS 樣式書寫規範

可能不同團隊都有各自的規範,又或者很多人在寫 css 的時候還是想到什麼就寫什麼,不存在太多的約束。我覺得 css 規範還是有存在的必要的,尤其是在團隊配合,多人協作下,規範就顯得尤為重要。我覺得不同的規範都有各自的長處與缺陷,對待所謂的規範最好的方式不是人云亦云,拿來就用,而是應該結合實際情況及需...