了解CSS BEM方法论

什么是BEM?

BEM是Block、Element 和 Modifier的简写。

BEM不是一门语言,而是一种书写CSS Class的方法论。

BEM会让你的CSS书写的更简洁、可维护性更好。

B - Block(块):

类似一个组件,例如网页顶部的(导航 - Navigator),那么在BEM方法中我们就可以用.navigator来定义这个块(一般为这个组件的根)。

.navigator {

}

* 注意使用的是Class,而不是元素名。

E - Element(元素):

元素是块的的子节点,例如在(导航 - Navigator)中会有一些列表(ul, li)。

BEM方法定义的元素Class的写法是:块Class__元素Class(双下划线__)

.navigator__list {

}

M - Modifier(修饰符):

如果我么想改变某个(- Block)或(元素- Element)的样式,就用到了BEM方法中的修饰符(块和元素都可以有修饰符)。

修饰符Class的写法是:块Class__元素Class--modifier 或块Class--modifier(双破折号--)。

.navigator__list-item {

}

.navigator__list-item-last {

}

HTML结构:

BEM的内容基本就这些,如果想更深入的了解如何在SASS中应用BEM方法,请看W3CTube专栏:#CSS BEM 方法论#,共6讲:

CSS BEM 方法论 – BEM 如何帮助到你? (1/6)

CSS BEM 方法论 – 块和元素 (2/6)

CSS BEM 方法论 – 修饰 (3/6)

CSS BEM 方法论 – 使用 Sass 书写 (4/6)

CSS BEM 方法论 – 使用 Mixins 改善 (5/6)

CSS BEM 方法论 – Sass 语法的可读性 (6/6)

观看网址:http://w3ctube.com/series/css-bem/

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180926G1WTVH00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券