BEM實戰(zhàn)之扒一扒淘票票頁面

godlong_X 發(fā)布于2019-08-29 13:50 / 3492人閱讀

摘要：扒一扒淘票票界面淘票票界面寫的挺美觀的，但是最近看了看淘票票的命名方式，覺得稍有不妥。命名與頁面內(nèi)容掛鉤，代碼復(fù)用性低。

BEM解析

BEM是一套CSS國際命名規(guī)范，是一個非常有用的功能強(qiáng)大且簡單的命名約定，它能使前端代碼更易讀，易于理解易于擴(kuò)展。BEM是塊（block）、元素（element）、修飾符（modifier）的縮寫。

B：Block是塊，一個獨立的組件，將所有東西都劃分成一個組件

E：Element是塊中的子節(jié)點，為了表明子節(jié)點屬于哪個塊，寫法是 block__element

M：Modifier聲明某個節(jié)點的修飾狀態(tài)

我們以一個搜索框來簡單說明上述三個東西的用法：

這個搜索框就可以看作一個塊Block，這個塊里由兩個子節(jié)點，一個是輸入?yún)^(qū)域input，還有一個是查詢按鈕button。
對于這個塊的命名，按照BEM法則，我們可以寫成以下這樣：

將整體的搜索框命名為site-search作為一個模塊，模塊下的兩個子節(jié)點就在后面加上兩根下劃線，加上自己的名字 input 和 button，這樣的命名方式，即使我們沒有看到網(wǎng)頁內(nèi)容，只看了CSS樣式名字，也能感受到頁面結(jié)構(gòu)和頁面元素之間的關(guān)系。
如果要說明按鈕button是灰色的，我們還可以加上修飾的類名modifier，比如可以是site-search__button--gray。

上圖就說明能將某個元素進(jìn)行模塊化，里面能夠包含多個元素，這樣的命名規(guī)范能夠更好的說明元素之間的關(guān)系。

為什么要使用BEM方式命名

你是否遇到過寫CSS樣式名抓耳撓腮的時候？你是否遇到過團(tuán)隊合作時看不清別人代碼，只能無奈的說“這個CSS重寫一遍比修改老文件快”？

BEM命名法則給我們帶來了以下的便利：

BEM命名法則給我們提供了一個很好的模板，在命名中就能體現(xiàn)各個元素之間的關(guān)系，CSS的命名更加語義化，元素更易讀懂。

而且獨一無二的命名方式，使得代碼能夠得到更好的復(fù)用，就不用在寫樣式名的時候小心翼翼，生怕和前后文的樣式名重名，導(dǎo)致元素組件的樣式被覆蓋。

剛接觸BEM命名方式可能會覺得一個元素的類名這么冗長，比較難看，可就是這種冗長的命名，極大的減少了類名重復(fù)的可能性。

BEM官網(wǎng)說明這種命名規(guī)范最關(guān)鍵的特征就是：

BEM的關(guān)鍵特征就是塊的獨立性。按照CSS的建議，可以在網(wǎng)頁上的任何位置放置一個塊，并確保不會受到周圍環(huán)境的影響。而且，如果您最近需要將另一個塊嵌套到當(dāng)前塊中，則它們的完全兼容性將得到保證。換句話說，在維護(hù)Web應(yīng)用程序時，您可以在整個頁面上移動塊，添加其他項并將其組合起來。

扒一扒淘票票界面

淘票票界面寫的挺美觀的，但是最近看了看淘票票的CSS命名方式，覺得稍有不妥。
比如淘票票最頂部的索引橫條。

以下是淘票票對于頂部導(dǎo)航欄的CSS命名，為了讓大家更好看清頁面結(jié)構(gòu)，我對頁面元素進(jìn)行了簡單的處理，以及添加了幾行注釋：

這里存在兩個較為嚴(yán)重的問題：
1、頁面結(jié)構(gòu)不清晰。從CSS的命名方式上來看，很難看得出上面這些類是放在一塊的，同一模塊中的內(nèi)容缺少聯(lián)系。
2、CSS命名與頁面內(nèi)容掛鉤，代碼復(fù)用性低。觀察以上的命名方式，比如cityWrap、entrance、phone之類的，命名方式都和頁面內(nèi)容掛鉤，這種命名方式缺點就是不能挪到其他地方進(jìn)行復(fù)用。因為其他頁面可能沒有城市、入口、手機(jī)這些內(nèi)容。或者，萬一頁面元素要進(jìn)行更改，比如把城市（cityWrap）改成國家（country），為了保持CSS和頁面內(nèi)容的統(tǒng)一性，就要更改所有的CSS樣式，給代碼的維護(hù)增加了不小的困難。

我的更改建議是使用BEM命名法則，將頁面元素模塊化.
整個導(dǎo)航欄作為一個模塊，模塊可以分為典型的三層：head、body、footer，分別存放logo、導(dǎo)航條內(nèi)容、尾部的其他功能：

導(dǎo)航條看成一整個模塊Block，該模塊有三個子節(jié)點元素Elemet，經(jīng)過這種命名方式，即使不看頁面元素，只看CSS元素的類名，是不是也能猜出大概結(jié)構(gòu)來呢？而且不使用頁面的內(nèi)容作為命名方式，這樣的話，以后有類似結(jié)構(gòu)的頁面，也能直接復(fù)用這一套CSS樣式，同時，清晰的命名方式也讓頁面維護(hù)變得更為簡單。

掘金文章地址：https://juejin.im/post/5a1399...