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

2018-4-25    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

BEM的意識(shí)就是塊(block)、元素(element)、修飾符(modifier),是由yandex團(tuán)隊(duì)提出的一種CSS Class命名方法。

任何一個(gè)東西的存在都有其存在的道理,如果他毫無(wú)價(jià)值,那么肯定會(huì)被淘汰,后人可能都不了解,甚至都不會(huì)出現(xiàn)在后人的世界里。

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

關(guān)于BEM命名其最大的爭(zhēng)議就是其命名風(fēng)格,它鼓勵(lì)一級(jí)一級(jí)的寫(xiě)的非常具體,但是會(huì)很長(zhǎng)。如此常的命名會(huì)影響書(shū)寫(xiě)效率,名稱(chēng)過(guò)長(zhǎng)代碼量就會(huì)增多,文件體積就會(huì)變大(在gzip下這個(gè)不算是個(gè)問(wèn)題),從而會(huì)影響傳輸速度,用戶(hù)體驗(yàn)度就低,但是作為一個(gè)職業(yè)人我們都不能單純把個(gè)人喜好和習(xí)慣作為借口來(lái)拒絕或否定其用途。

風(fēng)格對(duì)于使用者來(lái)說(shuō)并不是很重要,關(guān)鍵的是看其效果。正所謂人們常說(shuō)的“不看療程,看療效”。

從擴(kuò)展性上來(lái)看,嵌套過(guò)多閱讀性差,超過(guò)3層就很難閱讀了;嵌套越多,選擇器的層級(jí)也會(huì)隨之增多,那么性能不知不覺(jué)就會(huì)變差;如此長(zhǎng)的名字,書(shū)寫(xiě)上想沖突都難。

從編程原則上來(lái)說(shuō),這種命名方式不會(huì)暴露抽象類(lèi)。假如樣式變了需要繼承另一個(gè)抽象類(lèi),不需要改HTML,只需要改css即可。

團(tuán)隊(duì)開(kāi)發(fā)中,風(fēng)格無(wú)非是一種形式,可以約束人們達(dá)到一定程度上的統(tǒng)一。內(nèi)部溝通會(huì)極大降低溝通成本。

BEM命名的方法雖然有自身的不足之處,但至少他可以使我們命名的時(shí)候達(dá)到一定的統(tǒng)一,我們可以學(xué)習(xí)其優(yōu)秀的方面將其納為己用。在實(shí)際項(xiàng)目開(kāi)發(fā)中將其巧妙而又靈活的運(yùn)用起來(lái)也未嘗不是一件壞事。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔