CSS 命名规范 —— BEM 思想

Part.1 何为 BEM?

BEM :Block ( 块 ) 丶Element ( 元素 ) 丶Modifier ( 修饰符 )

出 处:是由 Yandex 团队提出的一种前端命名方法论

优 点:命名方式条理清晰丶易懂;更加适用于团队合作项目

Part.2 例如

  1. .block{}
  2. .block__element{}
  3. .block--modifier{}
  • .block *-块
  • .block__element 代表.block的后代
  • .block--modifier代表.block的不同状态或不同版本

Part.3 如何使用?

    常规命名方式如下:

             <div class="site-search full">

                     <input type="text" class="field"> 

                      <input type="Submit" value ="Search" class="button">

             </div>

 

    BEM 改造如下:

               <div class="site-search site-search--full">

                       <input type="text" class="site-search__field">

                       <input type="Submit" value ="Search" class="site-search__button">

               </div>

 

    区别:改造后我们能清晰地看到有个叫.site-search的块,他内部是一个叫.site-search__field的元素,并且.site-search还有另外一种形态叫.site-search--full。显而易见,后者条理更加清晰明了!

             

 

 

上一篇:BEM战略解码的核心是打赢必赢之战


下一篇:好程序员分享如何看待CSS中BEM的命名方式?