摘要:的名稱來源于該方法學(xué)的三個組成部分的英文首字母,分別是塊元素和修飾符。這三個不同的組成部分稱為實體。不推薦在元素中嵌套其他元素。其次,不再存在復(fù)雜的層級關(guān)系,瀏覽器渲染的時候,樣式系統(tǒng)從最右邊的選擇符開始向左進行匹配規(guī)則。
Why use it
近幾年web應(yīng)用的發(fā)展可以用瘋狂來形容,依靠瀏覽器的支持以及前端技術(shù)和框架的發(fā)展,很多應(yīng)用已經(jīng)把大量的邏輯從服務(wù)器端遷移到了瀏覽器端,使用前后端分離技術(shù),瀏覽器端與用戶進行交互來完成復(fù)雜的邏輯。由于這個發(fā)展趨勢,Web應(yīng)用的前端代碼的復(fù)雜度大大提高,尤其是 JavaScript 和 CSS 代碼的數(shù)量大幅增加,面對空前龐大的css和js代碼量,形成科學(xué)的代碼組織方法和命名規(guī)范迫在眉睫。
好的命名規(guī)則應(yīng)該滿足以下幾個優(yōu)點:
安全的命名,不會干擾其它css
我需要很快知道一個 class 位于這個偉大工程的什么位置
class 盡可能少,且結(jié)構(gòu)清晰
嵌套不可以太深,否則會形成難以維護的“謎”之樣式
BEMBEM 是一種前端項目開發(fā)的方法學(xué),由 Yandex 公司提出。BEM 的名稱來源于該方法學(xué)的三個組成部分的英文首字母,分別是塊(Block)、元素(Element)和修飾符(Modifier)。這三個不同的組成部分稱為 BEM 實體。
Block——塊塊即是通常所說的 Web 應(yīng)用開發(fā)中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。塊中封裝了組件相關(guān)的 JavaScript、CSS 代碼和 HTML 模板。由于塊是獨立的,可以在應(yīng)用開發(fā)中進行復(fù)用,從而降低代碼重復(fù)并提高開發(fā)效率。塊可以放置在頁面上的任何位置,也可以互相嵌套。
Element——元素元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。
Modifier——修飾符修飾符用來定義塊或元素的外觀和行為。同樣的塊在應(yīng)用不同的修飾符之后,會有不同的外觀。
// 簡單地說 .block { /* styles */ } .block__element { /* styles */ } .block--modifier { /* styles */ }舉個栗子
如何使用呢BEM命名方法呢?請先看以下例子:
//我們要為這個菜單寫樣式
放在以前,我們或許會這么寫:
看了一下,還是多清爽的。但是各位朋友是否注意到了一個問題:子元素item和其父元素menu,從命名上看,關(guān)系似乎太不緊密。一個box也可以有item子類,一個xxx也可以包含一個item子類。看看其樣式的寫法:
//sass .nav { list-style: none; .item { font-weight: bold; &.selected { color: red; } } } //編譯后產(chǎn)生的css .nav { list-style: none; } .nav .item { font-weight: bold; } .nav .item.selected { color: red; }
從樣式文件上看,仿佛也沒有太大問題,但是,這是在我們代碼層數(shù)較少的情況。如果是一個復(fù)雜的頁面元素,我們sass層級會非常深。編譯后的css,層級也會很深。
2.BEM命名現(xiàn)在我們使用BEM再來編寫看看:
//sass .nav { list-style: none; &__item { font-weight: bold; &--selected { color: red; } } } //使用sass編譯后的css是 .nav {//菜單 list-style: none; } .nav__item {//菜單item font-weight: bold; } .nav__item--selected { //被選中的菜單item color: red; }
乍看之下,根據(jù) BEM 命名規(guī)則產(chǎn)生的 CSS 類名都會很復(fù)雜,但實際上在熟悉了命名規(guī)則之后,可以很容易理解其含義。其次,css不再存在復(fù)雜的層級關(guān)系,瀏覽器渲染的時候,樣式系統(tǒng)從最右邊的選擇符開始向左進行匹配規(guī)則。只要當(dāng)前選擇符的左邊還有其他選擇符,樣式系統(tǒng)就會繼續(xù)向左移動,直到找到和規(guī)則匹配的元素,或者因為不匹配而退出,減少層級就能提升性能,對應(yīng)靜態(tài)css文件大小也會減少。
很多人會吐槽兩個下劃線和兩個橫杠作為連接符,并不優(yōu)雅。但是我覺得,BEM是一種思想,是我們需要理解的,至于我們用什么樣的連接符,什么樣的方式實現(xiàn),可以根據(jù)自己項目的情況考慮。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51633.html
摘要:的名稱來源于該方法學(xué)的三個組成部分的英文首字母,分別是塊元素和修飾符。這三個不同的組成部分稱為實體。不推薦在元素中嵌套其他元素。其次,不再存在復(fù)雜的層級關(guān)系,瀏覽器渲染的時候,樣式系統(tǒng)從最右邊的選擇符開始向左進行匹配規(guī)則。 Why use it 近幾年web應(yīng)用的發(fā)展可以用瘋狂來形容,依靠瀏覽器的支持以及前端技術(shù)和框架的發(fā)展,很多應(yīng)用已經(jīng)把大量的邏輯從服務(wù)器端遷移到了瀏覽器端,使用前后...
摘要:前端編碼規(guī)范之使用規(guī)范前端編碼規(guī)范之樣式編碼規(guī)范前端編碼規(guī)范之結(jié)構(gòu)規(guī)范前端編碼規(guī)范之最佳實踐前端編碼規(guī)范之編碼規(guī)范命名的原則是通俗易懂,盡量保持不重復(fù)沖突,盡量不要用。我覺得應(yīng)該避免出現(xiàn)出現(xiàn)這種方式用預(yù)處理器拼接出來的名稱,會生成。 前端編碼規(guī)范之:Git使用規(guī)范 前端編碼規(guī)范之:樣式(scss)編碼規(guī)范 前端編碼規(guī)范之:HTML結(jié)構(gòu)規(guī)范 前端編碼規(guī)范之:Vue最佳實踐 前端編碼規(guī)范...
摘要:最早遇到的大概的是命名的問題了吧,因為本身積累的詞匯量就少,動不動就沒單詞可用了。用于解決項目命名規(guī)則問題。其哲學(xué)理念是模塊化,功能單一性,關(guān)注點分離。借助而解決了中的命名空間的問題,使得單文件變得簡單清晰。 標(biāo)題黨。這篇文章斷斷續(xù)續(xù)的修改過好幾次,也沒有滿意,本來是想總結(jié)一下我這些零散的 CSS 知識結(jié)構(gòu),可能由于知識體系不全面,總是沒能把知識點串聯(lián)成一個通順的內(nèi)容。貼出來權(quán)當(dāng)大家一...
摘要:上例中打印的結(jié)果是對中的名都做了處理,使用對象來保存原和混淆后的對應(yīng)關(guān)系。結(jié)合實踐在處直接使用中名即可。如因為只會轉(zhuǎn)變類選擇器,所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領(lǐng)域中進化最慢的一塊。由于 ES2015/201...
閱讀 2786·2021-11-22 14:45
閱讀 2925·2021-09-10 11:26
閱讀 3231·2021-09-07 10:18
閱讀 2219·2019-08-30 14:08
閱讀 617·2019-08-29 12:22
閱讀 1393·2019-08-26 13:48
閱讀 2535·2019-08-26 10:24
閱讀 1150·2019-08-23 18:35