CSS 中的 BEM 规范

最新推荐文章于 2025-03-12 20:09:00 发布

嗜码

最新推荐文章于 2025-03-12 20:09:00 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css3 css BEM 前端

本文链接：https://blog.youkuaiyun.com/qq_37954086/article/details/109060625

版权

css 专栏收录该内容

6 篇文章

订阅专栏

BEM是一种由Yandex提出的CSS命名方法论，包括块、元素和修饰符。BEM规范提高了代码的可读性和可维护性，但也因其长命名受到批评。预编译语言如LESS/SASS能简化BEM的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BEM 规范

BEM 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。

规范默认有以下的几个约定：

- 中划线：仅作为连字符使用
-- 双中划线：表示不同状态或不同版本
__ 双下划线：双下划线用来连接块和块的子元素

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

其中

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

优点

通过 BEM 的命名规范，可以让前端代码更容易阅读和理解，更加的语义化，更容易协作，更容易控制，更加健壮和明确，而且更加严密。

下面是一些例子，方面更深入的理解。

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

css 选择器：

//css
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

缺点

BEM 的一个槽点是，命名方式长而难看，书写不雅。相比 BEM 格式带来的便利来说，我们应客观看待。
而且，一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS，利用其语言特性书写起来要简单很多。

BEM 和预编译结合

.header {
    &__body {
        padding: 20px;
    }
    &__button {
        &--primary {
            background: #329FD9;
        }
        &--default {
            background: none;
        }
    }
}

Reference

http://getbem.com/naming/