BEM: 取单词block,element,modifier首字母，是一种前端命名方法
    命名约定遵循如下形式：

    1. .block{}
    2. .block__element{}
    3. .block--modifier{}

    • .block 表示一个高级别的组件或抽象元素

    • .block__element: 表示 .block 下的一个子元素

    • .block—modifier: 表示 .block 的不同状态或版本

    .site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

    常用的命名方式：

    <form class="site-search  full">
    <input type="text" class="field">
    <input type="Submit" value ="Search" class="button">
</form>

    这些class 都相当松散，没有显示的通过命名知道class的含义， 下面通过BEM规则重新命名：

    <form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
</form>

    我们能看到一个block叫 .site-search 下面有一个element叫 .site-search__field. 同时还有 .site-search的一个新版本叫 .site-search—full