CSS的BEM规范学习笔记

块(Block)

/* 常规写法和BEM写法相同 */
.list   

元素(Element)

块中的子元素是块的子元素,并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。
如上面的例子,li.item 是列表的一个子元素

/* 常规写法 */
.list{}
.list .item{}

/* BEM写法 */
.list{}
.list__item{}

修饰符(modifier)

一个“修饰符”可以理解为一个块的特定状态
比如

  • 多种颜色的按钮

    .btn-list{}
    .btn-list .btn_red{}
    .btn-list .btn_green{}
    
    .btn-list{}
    .btn-list__btn_red{}
    .btn-list__btn_green{}
  • 被激活的列表项

    .list{}
    .list.select{}
    .list .item{}
    .list .item.active{}
    
    .list{}
    .list_select{}
    .list__item{}
    .list__item_active{}

书写原则

  • 原则上不会出现2层以上选择器嵌套

推荐写法

  • 第一项
    我是名称
    看类名 我是link
  • 第二项 且 当前选择项
    我是名称
    我是link
  • 第三项 且 特殊高亮
    我是名称
    我是link
.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

// 嵌套写法
.xxx__item_current{
    .xxx__link{}
}

无意义的__

用新的块来保存新元素

这样做更有意义

命名空间

  • .l-: 布局(layouts)
  • .o-: 对象(objects)
  • .c-: 组件(components)
  • .js: js的钩子(JavaScript hooks)
  • .is-|.has-: 状态类(state classes)
  • .t1|.s1: 排版大小(typography sizes)
  • .u-: 实用类(utility classes)

参考文档

  • 前端css、less、sass编码规范---BEM
  • BEM官方文档

你可能感兴趣的:(css)