BEM思想(css命名規範)
阿新 • • 發佈:2018-11-02
在團隊開發中,由於缺乏規範,樣式管理一直是開發中的痛點,樣式汙染,難以定製化,依賴性高,各種問題層出不窮。
而BEM是一個非常有用,強大,簡單的命名約定,可以讓你的前端程式碼更容易閱讀和理解,更容易協作,更容易控制。
當然,通常人們會認為BEM寫法難看,但是他的好處遠遠超過它外觀上的那點瑕疵。
1. BEM命名約定
BEM:塊(block)、元素(element)、修飾符(modifier)
命名約定的模式
.block{}
.block__element{}
.block--modifier{}
其中塊可以用單個連字元來界定:如
.site-search{} //塊 .site-search__field{} //元素 .site-search--full{} //修飾符
2. 如何使用BEM
Block:一個獨立的,可以複用而不依賴其他元件的部分,可作為一個塊
Element:屬於塊的某部分,可作為一個元素
Modifier:用於修飾塊或元素,體現出外形行為狀態等特徵的,可作為一個修飾器
1)保證各個部分只有一級B__E–M,修飾器需要和對應的塊或元素一起使用,避免單獨使用。
2)僅以類名作為選擇器,不使用ID或標籤名來約束選擇器,且css中的選擇器巢狀不超過2層
3)避免 .block__el1__el2 的格式
如:
//css為例 <p class="article"> <p class="article__body"> <p class="tag"></p> <button class="article__button--primary"></button> <button class="article__button--success"></button> </p> </p> //less為例 .article { max-width: 1200px; &__body { padding: 20px; } &__button { padding: 5px 8px; &--primary {background: blue;} &--success {background: green;} } }
BEM 規範雖然結構比較清晰,但有時候會產生程式碼冗餘。
為避免寫太多重複性的程式碼,我們要學會善於利用預編譯語言的(適當地使用 @include @extend 等)
3. 總結:
BEM 最難的部分之一是明確作用域是從哪開始和到哪結束的,以及什麼時候使用或不使用它。隨著不斷使用的經驗積累,你慢慢就會知道怎麼用,這些問題也不再是問題。
來源
http://www.php.cn/css-tutorial-407152.html
https://blog.csdn.net/bbsyi/article/details/80667072
擴充套件閱讀
BEM官方