hugh 的个人博客

BEM-CSS规范

css的灵活性和容错性,让我们通常忽略了css的书写,在平时项目中对css的检查力度也远小于js

css的重要性不言而喻, 人靠衣装,站点就得靠层叠样式表了!她是站点展示的重要利器!

 

1. 通常的写法

   a. 分模块, 加id或class用于全局区分, 防止相互污染 - 复用性比较差

   b. vue的流行,scoped属性的运用,通过加模块MD5标识防止相互污染 - 会导致属性名长度明显变长

   c. less\sass的运用 - 导致css层级明显增加

 

2. BEM规范,

定义了三个对象

  a. block 用于定义一个块(可以是一个组件、功能、页面)

  b. element 元素 (可以有多层元素组合)

  c. modifier 修饰符 (可以表示一个状态、一个属性..)

定义了三个符号

-   中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线:双下划线用来连接块和块的子元素
_   单下划线:单下划线用来描述一个块或者块的子元素的一种状态
 
 
优势:
  1. 降低了层级, 提高渲染速度
  2. 加强复用性