css之命名規(guī)范 BEM

NicolasHe 發(fā)布于2019-08-29 15:42 / 1286人閱讀

摘要：最后的最后使用并不是最終目的，而是將項(xiàng)目合理地組件化，將組件合理地結(jié)構(gòu)化，構(gòu)建易維護(hù)易擴(kuò)展的程序

這篇文章主要是記錄下我從討厭,習(xí)慣,喜歡,熱愛(ài)BEM方式的心路歷程

剛?cè)肼毸? 第一個(gè)需求是做5個(gè)落地頁(yè),開(kāi)了需求,過(guò)了設(shè)計(jì)圖,so easy
一切都在計(jì)劃中,提測(cè),準(zhǔn)備上線
最后階段codereview 居然打回重寫,原因是css要按照BEM規(guī)范,迷茫臉 what?what?what? 這個(gè)是什么鬼

Google 必應(yīng) 百度各種搜查,了解到優(yōu)缺點(diǎn),以及研究其他項(xiàng)目的實(shí)踐
然后總結(jié)了自己的一套缺點(diǎn),來(lái)說(shuō)服領(lǐng)導(dǎo)

代碼量比較多,html中class會(huì)特別長(zhǎng),書寫特別麻煩而且還丑

現(xiàn)在每個(gè)代碼塊中的style都加入了scope 不會(huì)對(duì)其他樣式造成影響

需要完善的說(shuō)明文檔和規(guī)則

吧啦吧啦吧啦吧啦...........
估計(jì)領(lǐng)導(dǎo)也懶得和我這種白癡爭(zhēng)辯,最后用了,誰(shuí)用誰(shuí)知道的傲慢臉和一句:我們就這樣規(guī)定的必須按照BEM方式,來(lái)結(jié)束了我的雄辯

就這樣被迫開(kāi)啟了我的BEM處女使用

中間查閱了大量的資料以及看了好幾個(gè)的項(xiàng)目實(shí)踐
而且在項(xiàng)目中也開(kāi)始了好幾個(gè)頁(yè)面的使用,一切都在習(xí)慣中

現(xiàn)在時(shí)隔兩個(gè)月,翻看了之前的代碼以及對(duì)比了現(xiàn)在的代碼

然后發(fā)現(xiàn)之前寫的都是屎,一坨屎,加粗標(biāo)紅
我知道現(xiàn)在也不是使用的很好,但是已經(jīng)再越來(lái)越好了,我相信會(huì)越來(lái)越好
在使用過(guò)程中,總結(jié)一下特點(diǎn)

按組件劃分類名，減少層次關(guān)系，實(shí)現(xiàn)扁平化、語(yǔ)義化，通過(guò)唯一的類名來(lái)避免不必要的樣式繼承，提高渲染效率。

最后的最后
使用BEM并不是最終目的，而是將項(xiàng)目合理地組件化，將組件合理地結(jié)構(gòu)化，構(gòu)建易維護(hù)、易擴(kuò)展的程序

云服務(wù)器 GPU云服務(wù)器命名規(guī)范二級(jí)域名命名規(guī)范 html的命名規(guī)范二級(jí)域名命名規(guī)范

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113493.html

相關(guān)文章

前端編碼規(guī)范之：樣式（scss）編碼規(guī)范

摘要：前端編碼規(guī)范之使用規(guī)范前端編碼規(guī)范之樣式編碼規(guī)范前端編碼規(guī)范之結(jié)構(gòu)規(guī)范前端編碼規(guī)范之最佳實(shí)踐前端編碼規(guī)范之編碼規(guī)范命名的原則是通俗易懂，盡量保持不重復(fù)沖突，盡量不要用。我覺(jué)得應(yīng)該避免出現(xiàn)出現(xiàn)這種方式用預(yù)處理器拼接出來(lái)的名稱，會(huì)生成。前端編碼規(guī)范之：Git使用規(guī)范前端編碼規(guī)范之：樣式（scss）編碼規(guī)范前端編碼規(guī)范之：HTML結(jié)構(gòu)規(guī)范前端編碼規(guī)范之：Vue最佳實(shí)踐前端編碼規(guī)范...

reclay 2019-08-29 16:58 評(píng)論0 收藏0
BEM實(shí)戰(zhàn)之扒一扒淘票票頁(yè)面

摘要：扒一扒淘票票界面淘票票界面寫的挺美觀的，但是最近看了看淘票票的命名方式，覺(jué)得稍有不妥。命名與頁(yè)面內(nèi)容掛鉤，代碼復(fù)用性低。 BEM解析 BEM是一套CSS國(guó)際命名規(guī)范，是一個(gè)非常有用的功能強(qiáng)大且簡(jiǎn)單的命名約定，它能使前端代碼更易讀，易于理解易于擴(kuò)展。BEM是塊（block）、元素（element）、修飾符（modifier）的縮寫。 B：Block是塊，一個(gè)獨(dú)立的組件，將所有東西都劃分...

godlong_X 2019-08-29 13:50 評(píng)論0 收藏0
CSS規(guī)范--BEM入門

摘要：一開(kāi)始，公司推出的，包括了規(guī)范以及其配套構(gòu)建工具。代表的不同狀態(tài)或不同版本。再來(lái)看一個(gè)之前用常規(guī)方式命名的的例子這些類名真是太不精確了，并不能告訴我們足夠的信息。這段時(shí)間在整理前端部分的代碼規(guī)范，前面提到的CSS規(guī)范里面會(huì)涉及到選擇器的命名，就參考BEM的命名規(guī)范，內(nèi)容整理如下，供大家參考，請(qǐng)斧正！如大家有興趣，可移步至CSS編碼規(guī)范 BEM是由Yandex公司推出的一套CSS命名...

li21 2019-08-29 12:49 評(píng)論0 收藏0
關(guān)于css命名的一點(diǎn)思考，探討一下css命名空間的可行性

摘要：畢竟這是張?chǎng)涡衿吣昵暗奈恼?。命名法的意思就是塊元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒(méi)有經(jīng)過(guò)大型項(xiàng)目的考驗(yàn)，希望大神們來(lái)探討一下可行性。本文主要是探討傳統(tǒng)項(xiàng)目中的css命名，vue、react等單頁(yè)應(yīng)用都可以使用css-module來(lái)解決這個(gè)問(wèn)題作為一名初級(jí)前端，免不了要切圖(寫css、html靜態(tài)部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...

lk20150415 2019-08-29 12:36 評(píng)論0 收藏0
關(guān)于css命名的一點(diǎn)思考，探討一下css命名空間的可行性

摘要：畢竟這是張?chǎng)涡衿吣昵暗奈恼?。命名法的意思就是塊元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒(méi)有經(jīng)過(guò)大型項(xiàng)目的考驗(yàn)，希望大神們來(lái)探討一下可行性。本文主要是探討傳統(tǒng)項(xiàng)目中的css命名，vue、react等單頁(yè)應(yīng)用都可以使用css-module來(lái)解決這個(gè)問(wèn)題作為一名初級(jí)前端，免不了要切圖(寫css、html靜態(tài)部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，...

crossoverJie 2019-08-01 16:52 評(píng)論0 收藏0