web前端培訓(xùn)：如何看待CSS中BEM的命名方式?

來源：培訓(xùn)無憂網(wǎng)-星星 發(fā)布人：星星

2021-11-27 11:48:33|已瀏覽：233次

BEM的意識就是塊(block)、元素(element)、修飾符(modifier)，是由yandex團(tuán)隊(duì)提出的一種CSS Class命名方法。任何一個(gè)東西的存在都有其存在的道理，如果他毫無價(jià)值，那么肯定會(huì)被淘汰，后人可能都不了解，甚至都不會(huì)出現(xiàn)在后人的世界里。

關(guān)于BEM命名其最大的爭議就是其命名風(fēng)格，它鼓勵(lì)一級一級的寫的非常具體，但是會(huì)很長。如此常的命名會(huì)影響書寫效率，名稱過長代碼量就會(huì)增多，文件體積就會(huì)變大(在gzip下這個(gè)不算是個(gè)問題)，從而會(huì)影響傳輸速度，用戶體驗(yàn)度就低，但是作為一個(gè)職業(yè)人我們都不能單純把個(gè)人喜好和習(xí)慣作為借口來拒絕或否定其用途。
風(fēng)格對于使用者來說并不是很重要，關(guān)鍵的是看其效果。正所謂人們常說的“不看療程，看療效”。從擴(kuò)展性上來看，嵌套過多閱讀性差，超過3層就很難閱讀了;嵌套越多，選擇器的層級也會(huì)隨之增多，那么性能不知不覺就會(huì)變差;如此長的名字，書寫上想沖突都難。
從編程原則上來說，這種命名方式不會(huì)暴露抽象類。假如樣式變了需要繼承另一個(gè)抽象類，不需要改HTML，只需要改css即可。團(tuán)隊(duì)開發(fā)中，風(fēng)格無非是一種形式，可以約束人們達(dá)到一定程度上的統(tǒng)一。內(nèi)部溝通會(huì)極大降低溝通成本。

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

本文由培訓(xùn)無憂網(wǎng)千鋒教育課程顧問老師整理發(fā)布，更多課程信息可關(guān)注web前端培訓(xùn)或添加老師微信：15033336050

注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://www.dedgn.cn/news-id-5201.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注web前端頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050