入门BEM

前言

为什么不用ID标识符

主要考虑到样式重用性以及与页面的耦合性。ID本来就是唯一的而且权值那么大,还不如写在行内样式。

#button {
  text-decoration: underline;
}

为什么不用大于三层嵌套选择器

嵌套选择器增加了代码耦合,使重用变得不可能,过多的嵌套会导致显示性能�下降。简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,让浏览器解析时也会更加高效。同时也会提高开发人员的开发效率,降低了维护成本。子代选择器不好的地方还在于,如果层次关系过长,逻辑不清晰,非常不利于维护。

css的匹配原理不是从左到右的,而是从右到左的,从右边开始匹配是为了尽早过滤掉一些无关的样式规则和元素。

.button_hovered .button__text {
  text-decoration: underline;
}

为什么不用组合选择器

组合选择器的耦合性更强,而且可维护性更加差。

.button.button_theme_islands {
  text-decoration: underline;
}

介绍

BEM是Block,Element,Modifier的缩写。下面分别来介绍一下这三个概念:

  • 块(Block)是一个块级元素,可以理解为组件块,比如头部是个block,内容也是block,一个block可能由几个子block组成。
  • 元素(Element)element是block的一部分完成某种功能,element依赖于block,比如在logo中,img是logo的一个element,在菜单中,菜单项是菜单的一个element。
  • 修饰符(Modifier)modifier是用来修饰block或者element的,它表示block或者element在外观或行为上的改变,例如actived。

这里引用BEM的定义一文中的两张图:

Definitions-BEM-5.jpg

Definitions-BEM-6.jpg

我们通过BEM命名法写样式如下:

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

BEM解决了的问题,

  • 页面CSS模块化,每个block就是一个模块,模块间相互独立,不会造成污染
  • 多级的class命名,避免选择器的嵌套结构
  • 减少通配符*或者类似[hidden="true"]这类选择器的使用
  • 巧妙运用scss的特性,保证了样式的可维护性

BEM将页面解析为block和element,然后根据不同的状态使用modifier来设置样式,在scss的属性帮助下,其实,写BEM并不麻烦。

使用scss写BEM

灵活的&

当嵌套使用&时,它会直接抓取父选择器的类名,自动拼接上元素名字,避免CSS文件中组件样式的冲突。这样,我们可以得到一个完整的BEM结构的类名,这样有效利用scss的嵌套特性避免CSS文件中组件样式的冲突。

示例:

.header {
  &__text {
    text-decoration: underline; 
  }
  &__image {
    background-color: steelblue;
  }
}

强大的@extend

@extend是scss的继承语法,它可以将父级的属性继承到子级。主要使用在modifier上,因为改变状态的属性和原来的基本保持一致。你可以弄少一个classname。

示例:

<nav class="nav">
  <ul class="nav__container">
    <li class="nav__item"></li>
    <li class="nav__item"></li>
    <li class="nav__item"></li>
    <li class="nav__item--active"></li>
  </ul> 
</nav>
.nav {
  background-color: steelblue;
  &__container {
    display: flex;
    justify-content: space-between;
  }
  &__item {
    color: white;
    &--active {
      @extend .nav__item;
      border-bottom: 1px solid red;
    }
  }
}

参考

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,536评论 1 91
  • 作者:狼狼的蓝胖子原文地址:http://luopq.com/2016/01/05/css-optimize/ 写...
    IT程序狮阅读 1,353评论 2 51
  • 【译】前端BEM命名方法论之一:BEM 官方简介文档【译】前端BEM命名方法论之三:命名惯例 重要概念 Block...
    咚门阅读 2,972评论 0 7
  • 人的好奇心很强,很容易被未知的事情吸引,比如手机响了一下,有一条信息提醒,很多人就忍不住想去看看是什么信息。当看到...
    天天DayDayUp阅读 87评论 0 0
  • import java.io.FileNotFoundException; import java.io.File...
    大虾咪阅读 127评论 0 0
  • 刚刚大学录取结果出来的时候,我们这些对大学怀着满满的好奇与期待的一群人加入大学新生群,再然后是学院群,专业群,班...
    十方长安阅读 614评论 0 0
  • 呃 也不知道要写一些什么 现在是23:25这个点大概不忙的人都睡了,我不忙但我睡不着,其实是我不想睡,因为熬夜我的...
    贝果喜欢胡萝卜阅读 104评论 0 0