更好用的css命名方式——BEM命名

一、什么是BEM?

  BEM代表块(Block),元素(Element),修饰符(Modifier)。无论是什么网站页面,都可以拆解成这三部分。

二、带你认识网页

  我们来看一下qq的官网,它可以由三个块组成:logo,导航nav和页面主题mian三个模块构成,如果再细分一下呢?logo是由图片和文字两个元素组成,导航由三个元素组成,页面主题中包含图片,文字和按钮三个元素,

如果把一个块看作是一个数组的话,那么元素就是数组中的每一项。

  什么是修饰符呢?你可以看作是元素的属性,或者是他的形态、状态,比如导航中的三个元素有的长,有的短,页面主体文字有的大,有的小

更好用的css命名方式——BEM命名

三、BEM命名如何书写

  BEM给我们的规定是块和元素之间用连接,元素和修饰符之间用连接。例如:我们要设置表格某一行的背景颜色为红色,我们可以如下命名

<div class="table-row_red"></div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzfwf.html