css之命名規范 BEM

NicolasHe 發布于2019-08-29 15:42 / 1275人閱讀

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

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

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

Google 必應百度各種搜查,了解到優缺點,以及研究其他項目的實踐
然后總結了自己的一套缺點,來說服領導

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

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

需要完善的說明文檔和規則

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

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

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

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

然后發現之前寫的都是屎,一坨屎,加粗標紅
我知道現在也不是使用的很好,但是已經再越來越好了,我相信會越來越好
在使用過程中,總結一下特點

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

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

GPU云服務器云服務器命名規范二級域名命名規范 html的命名規范二級域名命名規范

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113493.html

前端編碼規范之：樣式（scss）編碼規范

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

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

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

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

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

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

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

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

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

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