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。显而易见，后者条理更加清晰明了！

             

 

 

转载于:https://www.cnblogs.com/langxiyu/p/10592798.html