我查看了許多項(xiàng)目的樣式表，發(fā)現(xiàn)大多數(shù)css的類名都是這樣的
.table-header-wrapper
.table-group
還有一些同學(xué)會(huì)這樣寫，不過(guò)，最流行的css框架bootstrap的命名規(guī)范不太推薦這種寫法。
.table_header_wraper
.tableHeaderWrapper
公司的項(xiàng)目使用了vue + element-ui，在查看 element-ui 組件的樣式表時(shí)，我發(fā)現(xiàn)這樣命名方式
.el-table__header-wrapper
.el-table--group
一開始我沒(méi)太注意，后來(lái)在查看vue的相關(guān)文檔時(shí)，看到其中提到 BEM 和 CSS Modules，查閱相關(guān)資料后，發(fā)現(xiàn)上面 element-ui 的命名方式正是源于BEM。
接下來(lái)就簡(jiǎn)單介紹一下BEM
什么是BEM
BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。
BEM可以幫我們解決的問(wèn)題
在編寫css的過(guò)程中，我們經(jīng)常遇到的問(wèn)題就是樣式?jīng)_突，尤其是當(dāng)我們重新修改樣式的時(shí)候。由于我們沒(méi)有統(tǒng)一的命名規(guī)范，大多數(shù)樣式都是類的嵌套，很容易遇到相同的類名，為了解決沖突，我們又加入了許多新的類名，拋棄了可以復(fù)用的css樣式，最后的結(jié)果是，我們的css文件越來(lái)越大，越來(lái)越難以維護(hù)。
所以，為了
- 提高css的可維護(hù)性，
- 減少樣式?jīng)_突，
- 優(yōu)化css代碼，
我們可以在一開始就按照一套規(guī)范來(lái)書寫css，BEM正是一個(gè)值得參考的選擇。
如何使用
.block{}
.block__element{}
.block--modifier{}
- block，我們可以將其理解為vue中的組件，組件與組件是可以相互嵌套的，每一個(gè)組件的名字是不同的，
- element，是塊中的元素，這里的元素并不是html元素，而是塊中的上下文，也就是組件中的不同區(qū)域
- modifier，是修飾符，用于表述塊或元素的不同狀態(tài)
來(lái)看下面一個(gè)例子
<form class="search full">
<input type="text" class="field">
<input type="Submit" value ="Search" class="button">
</form>
常規(guī)的寫法是這樣的
.search{}
.full{}
.field{}
.button{}
我們只知道每個(gè)類的單獨(dú)樣式，但無(wú)法看出他們之間有任何的關(guān)系，一旦我們修改field，就會(huì)影響所有的這個(gè)類的input
采用BEM的寫法如下
<form class="box-search box-search--full">
<input type="text" class="box-search__field">
<input type="Submit" value ="Search" class="box_search__button">
</form>
.box-search{}
.box-search--full{}
.box-search__field{}
.box-search__button{}
從這里我們可以看出，box-search是一個(gè)搜索組件，內(nèi)部有一個(gè)box-search__field表示搜索內(nèi)容輸入框，和一個(gè)box-search__button搜索按鈕，box-search--full描述了這個(gè)搜索組件某個(gè)狀態(tài)下的特殊樣式。每一個(gè)組件都有自己的私有狀態(tài)，我們這樣命名，在<style scoped></style>里又可以少寫很多代碼了。
需要說(shuō)明的幾點(diǎn)
- 我們不一定要在所有的地方都使用BEM，如下我們有一個(gè)全局大寫樣式，它可以不屬于任何block
.caps{ text-transform:uppercase; }
我們可以稍稍修改一下，將它當(dāng)成一個(gè)修飾符，或者加一個(gè)不存在的塊global
.--caps{text-transform:uppercase;}
.global__caps{text-transform:uppercase;}
不一定完全按照它的要求來(lái)寫，我們可以根據(jù)自己的項(xiàng)目實(shí)際需求加以改造
- 以上只是個(gè)人對(duì)BEM的簡(jiǎn)單介紹，理解錯(cuò)誤之處還望指正，關(guān)于它更多的思想請(qǐng)移步BEM
參考文章
https://www.cnblogs.com/dujishi/p/5862911.html
https://www.w3cplus.com/css/bem-definitions.html
