CSS命名规范之BEM-源自Yandex的CSS命名方法论

最新推荐文章于 2025-05-23 16:00:23 发布

原创最新推荐文章于 2025-05-23 16:00:23 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

CSS相关专栏收录该内容

1 篇文章

订阅专栏

BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。BEM命名约定更加严格，而且包含更多的信息，一般用于团队开发一个耗时的大项目中。
我们常见的BEM命名方式一般都是经过改良的，本文介绍的是Nicolas Gallagher（Twitter前端工程师）的改进版。
命名约定的格式如下：

.block{ ... }           /* 代表更高级别的抽象或组件 */
.block__element{ ... }  /* 代表.block的后代，用于形成一个完整的block整体 */
.block--modifier{ ... } /* 代表block的不同状态或不同版本 */

之所以使用两个连字符和下划线而不是一个，是为了让自己定义的块可以用单个连字符来界定，如：

.myHeader-search{ ... }                 /* 自定义的某个块 */
.myHeader-search__textElement{ ... }    /* 自定义块中的textElement元素 */
.myHeader-search--full{ ... }           /* 自定义块中的full修饰符 */

BEM的关键在于，光凭名字就可以告诉其他开发者某个标记(class)是用来干什么的。通过直观地阅读class属性，我们就能明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者元素，还有一些是组件其他形态或者是修饰符。我们通过下面的示例来进一步说明：

<!-- 假设有个组件Person -->
<div class="Person">
    <!-- hand是子元素，left、male是状态或修饰符：左、男性，即男性的左手-->
    <div class="hand left male"></div>
    <!-- 女性的右手 -->
    <div class="hand right female"></div>
</div>

上面的代码使用了常规CSS来表示，各个class都是有意义的，但是他们之间却是脱节的，拿female来说，是指女性人类还是指某种雌性的动物？hand是在表示指针（英文hand有钟表指针的含义）还是一只正在玩指纸牌的手呢？使用BEM我们可以获得更多的描述和更加清晰的结构，并且通过命名我们就可以知道元素之间的关联。代码如下：

<!-- 使用BEM命名 -->
<div class="Person">
    <!-- 女性人类的手 -->
    <div class=Person__hand--female></div>
    <!-- 人类的左手 -->
    <div class="Person_hand--left"></div>
</div>

再看一个常规方式命名的例子：

<!-- 搜索表单，full表示当前状态 -->
<form class="site-search full">
    <input type="text" class="field" />
    <input type="submit" class="button" value="搜索" />
</form>

上面的命名不好的地方就在于名称不够精确，不能告诉我们足够的信息。尽管我们可以用它们完成工作，但它们确实非常含糊不清，不够优雅。使用BEM记号法后就是下面的代码：

<!-- 状态或修饰符使用两个横线（--） -->
<form class="site-search site-search--full">
    <!-- 模块下的元素使用两个下划线（__） -->
    <input type="text" class="site-search__field"/>
    <input type="submit" class="site-search__button" value="搜索" />
</form>

在上面的代码中，我们可以清晰地看到有个叫.site-search的块，内部有个叫做.site-search__field的元素，并且site-search还有另一种形态叫做.site-search–full

通常人们会认为BEM这种写法难看。但是，如果仅仅认为这种写法看上去不怎么好看而羞于使用，那么我们将错失最重要的东西。
BEM看上去有些怪怪的，但是它的好处远远超过外观上的瑕疵
BEM有可能导致输入更长的文本，但是大部分编辑器都有代码自动补全的功能，而且gzip压缩将会让我们消除对文件体积的担忧
BEM命名规则：http://segmentfault.com/a/1190000000391762
class命名方案：http://www.w3cplus.com/css/css-class-name.html
常用的CSS命名规范：http://www.html5cn.org/article-7600-1.html
通用CSS笔记、建议与指导：https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
CSS代码重构和优化之路：http://luopq.com/2016/01/05/css-optimize/
CSS进阶：http://caibaojian.com/toutiao/6098

安装遇到问题，可加老九君个人QQ：614940318，请备注来自优快云
老九学堂免费C、C++、Java课程地址： https://study.163.com/courses-search?keyword=老九学堂