CSS命名規(guī)范 BEM

通過閱讀Element-UI源碼來分析學(xué)習(xí)BEM規(guī)范, 使用BEM規(guī)范語義化更加鮮明，閱讀更容易理解，
\color{red}{B}意思是\color{red}{Block} 塊，
\color{red}{E}意思是\color{red}{Element} 元素，
\color{red}{M}意思是\color{red}{Modifier} 修飾器。
塊與元素之間使用__ 雙下劃線連接，塊或元素與修飾器之間使用-- 雙中劃線連接。
BEM中塊、元素、修飾器的命名如果存在多個(gè)單詞使用- 單中劃線連接

<button class="button">
 Normal Button
</button>
<button class="button--state-success">
  Success Button
</button>
<div class="footer">
  <button class="footer__button">footer button</button>
  <button class="footer__button--state-success">footer button</button>
</div>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 本文章參考鏈接：https://blog.csdn.net/qq_27263045/article/details...
    艾薩克菊花閱讀 240評(píng)論 0贊 0
  • 什么是BEM BEM其實(shí)是塊（block）、元素（element）、修飾符（modifier）的縮寫，利用不同的區(qū)...
    小母雞嘰嘰嘰閱讀 822評(píng)論 0贊 4
  • 最近在寫博客主題的時(shí)候發(fā)現(xiàn)一個(gè)很嚴(yán)重的問題，由于css的命名并不是很規(guī)范，導(dǎo)致自己在后期修改的時(shí)候很是頭疼，有些樣...
    楓s的思念閱讀 5,995評(píng)論 0贊 8
  • 背景：最近上了一個(gè)前端項(xiàng)目，技術(shù)棧是angular + ionic。在聽別的前端人員討論的時(shí)候聽到一個(gè)詞叫BEM，...
    前端進(jìn)城打工仔閱讀 397評(píng)論 0贊 1
  • BEM 基于組件方式的web開發(fā)方法，基本思想是將用戶界面分成獨(dú)立的模塊。 Block（塊） 通常指模塊，組件 B...
    xwwawj閱讀 945評(píng)論 0贊 2