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