css之命名規(guī)范 BEM

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

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

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

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

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

代碼量比較多,html中class會特別長,書寫特別麻煩而且還丑

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

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

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

就這樣被迫開啟了我的BEM處女使用

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113493.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

crossoverJie 2019-08-01 16:52 評論0 收藏0