前端总结100点-3-BEM

flex

学习资源

https://en.bem.info/

BEM是什么

block-element-modifier的简写；
块（block）：代表高级别的抽象或组件；
元素（element）：代表block的后代，用于形成一个完整的block的整体；
修饰符（modifier）：代表block的不同状态或不同版本

命名规则

block-name__element-name_mod-name_mod-val

• 名称以小写字母书写
• 单词之间用中横行（-）分割
• 块名称为其元素和修饰符定义名称空间
• 元素名称与块名称之间使用双下划线（__）分割
• 修饰符名称与块或元素名称之间用单个下划线（_）分割
• 修饰符值与修复符名称之间用单个下划线（_）分割
• 对于布尔修复符，该值不包括在名称中
  BEM方法论中不存在元素的元素，适当的才分组件

感受

使用BEM可以更好的细化组件，提高复用，要正确理解和区分block、elemnt