CSS书写规范之BEM

一、BEM来源

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。

二、书写规范

命名约定的模式如下：

.block{
    
    }
.block__element{
    
    }
.block--modifier{
    
    }

• .block 代表了更高级别的抽象或组件。
• .block__element 代表.block的后代，用于形成一个完整的.block的整体。

三、补充说明

之所以使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定，如：

.site-search{} /* 块 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修饰符 */