CSS中的BEM命名

最新推荐文章于 2025-09-11 13:32:24 发布

weixin_30421809

最新推荐文章于 2025-09-11 13:32:24 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/zhongjuan/p/7436790.html

本文介绍了BEM（块、元素、修饰符）命名规范的基本概念及其应用方式。BEM是一种由Yandex团队提出的前端命名方法论，能够使前端代码更易于阅读、理解和维护。文章详细解释了Block、Element及Modifier的具体含义，并阐述了它们如何帮助提高代码的可维护性和团队协作效率。

BEM是一个非常有用，强大，简单的命名约定。

它能让前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确而且更加严密，更加容易地维护代码。

BEM命名思路：

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

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

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/mindbemding-getting-your-head-round-bem-syntax.html © w3cplus.com

命名约定的模式如下：

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

命名约定的模式如下：

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

Block

将所有东西都划分为一个独立的模块。

一个header是block，header里嵌套的搜索框是block，甚至一个icon一个logo也是block，

block可以相互嵌套。

Element

一个Block下的所有Element无论相互层级如何，都要摊开扁平的属于Block。

所以 BEM 最多只有 B+E+M 三级，不可能出现 B+E+E+..+E+M 超长class名，也要求E不能同名。

Modifier

.current .active 等表达状态

让所有东西之间的联系变得更加紧密，让团队甚至是你个人都能够更加容易地维护代码著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/mindbemding-getting-your-head-round-bem-syntax.html © w3cplus.com

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由 Yandex团队提出的一种前端命名方法论。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/mindbemding-getting-your-head-round-bem-syntax.html © w3cplus.com

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/mindbemding-getting-your-head-round-bem-syntax.html © w3cplus.com