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