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。顯而易見，後者條理更加清晰明瞭！