如何看待 CSS 中 BEM 的命名方式?

2017-04-05 1475 4 編輯:深圳網站建設 來源:互聯網

BEM的意思就是塊(block)、元素(element)、修飾符(modifier),是由Yandex團隊提出的一種CSS Class 命名方法。 類似…顯示全部

CSS這么多年并沒有一個相對比較嚴謹的套路出來,寬松的寫法導致團隊成員寫法各異,丟在頁面都能跑起來,但混著做項目就不敢動或理不清別人寫的代碼

"這個CSS重寫一遍比修改老文件快",這樣的念頭幾乎所有人都曾有過.

我們團隊用BEM快1年,下面我來談談一些心得

了解什么是 B.E.M

Block

!誤區:這個block并非inline-block里的block,

而是將所有東西都劃分為一個獨立的模塊,一個header是block,header里嵌套的搜索框是block,甚至一個icon一個logo也是block

block可以相互嵌套

Element

!誤區:如果一個Element-son是另一個Element-father的子元素,

那么寫法是 Block__Element-father__Element-son_Modifer,嵌套多了會很長么?

不是的!!!

一個Block下的所有Element無論相互層級如何,都要攤開扁平的屬于Block

所以 BEM 最多只有 B+E+M 三級,不可能出現 B+E+E+..+E+M 超長class名,也要求E不能同名

Modifier

之前我們經常寫的 .current .active 等表達狀態

從Class中解讀B.E.M

我們常說CSS的注釋要寫WHY,而不是寫WHAT,看Class命名最好就知道是WHAT

BEM提出的一個概念是用連接符號來表達,它并不規定必須用什么連接符,但規定用不同連接符做團隊內約定區分BEM 3類元素

例如我們組內約定

__雙下劃線代表B和E連接例如 menu__item

_單下劃線代表B和M或E和M的連接 例如 menu_active 或 menu__item_active

-中劃線同英語里做連字符例如 mod-menu 或 mod-menu__item 這里 B或E或M需要多個單詞來描述,就使用中劃線

我們并沒有用BEM推薦的拆分CSS到更多目錄里,圖片是拆目錄的.因為用的是 Grunt+LESS

團隊項目特色為N個相互獨立的移動端項目,Block并不會很多,所以文件扁平化很直觀,帶來的效率也相對高,如圖為其中某個項目的css部分

另外,寫block的時候需要新建less文件,字母排序,是否重名都很清晰

按ctrl+f查找class定位和按快捷鍵打開文件名沒啥大區別,更何況新版LESS還有source map

最后我們團隊正在開發對應模塊管理的工具,目標是向NPM一樣玩,同Alice一樣規劃解決方案

代碼復用

代碼風格可能文檔里說的也不是很詳細,不如直接對著他們的頁面按F12吧 http://beta.yandex.com/

BEM/OOCSS 風格對維護重用的class有極大幫助,適當的拆分block后組合,威力無窮

那個千年老栗子——如果我想將一個f30的類,改成f35怎么辦?是掛羊頭賣狗肉的直接將.f30{font-size:30px}改成.f30{font-size:35}嗎?還是要進行全局搜索,改動所有的html的class名?

或者 Alice 里面的

.text-size30{font-size:30px;}

.text-size20{font-size:20px;}

.text-size10{font-size:10px;}

而我們采用的是類似 bootstrap 的方案

用程度來劃分,而非具體數值,所以根本就不會存在.text-size30這么個類,那個寫style上去有毛線區別.

在var.less里定義具體的數值

如何看待 CSS 中 BEM 的命名方式.jpg

在 ui.less 里調用

BEM的任何一個block都可以到處用,這對模塊并不多的手機項目非常有利.

關于hax大神吐槽的不用ID和后代選擇器

ID

ID對于我和!important對于我一樣,并不否認價值,但想不起來上一次用是啥時候了.

說到這里順便提一下 z-index的問題,有多少同學寫z-index的時候會寫1000+?有做過整站z-index規劃么? 同樣的用 class 如果能規劃好了,我是不傾向用id,也想不到有什么非用ID不可的情況,性能什么的,呵呵,測過,影響不大

特定場景例子:在騰訊,JS和CSS是分別2種團隊的人在寫,我們約定ID給JS,class給CSS和固定前綴的JS hook,不管是不是BEM,ID在我們這兩種團隊約定下也是不使用,并且也沒帶來啥問題

后代選擇器

這個BEM寫block的時候是不用,但block相互嵌套的時候是用的,

例如一個狀態下需要變動多個表現,用后代選擇器一次性處理

性能以及JS/CSS代碼可維護性都有明顯優勢

Tag selector 是翻譯成標簽選擇器么

BEM是不允許用標簽選擇器的,一開始難以接受...

.menu li 能搞定的事情需要每個 li 都寫.menu-item

壞處

是 k 數增加么?gzip下真不是個問題,或者是寫代碼額外工作量?這難道不是動態生成的么?再不濟編輯器也可以隨便列編輯或復制當前行或代碼提示啊

好處

就是避免 li 里的 li 受影響

舉個例子,商品詳情頁是允許商家自定義標簽的,那么商家展示區域標簽的祖先元素一旦用標簽選擇器定義了樣式,子子孫孫都要背負.

所以十分贊同在無法百分百確定不會嵌套同樣標簽的情況下不用標簽選擇器

專業的網站建設公司,深正互聯,如您有網站營銷需求,請您關注我們,或者致電13828884598

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾