CSS命名规范--BEM

最新推荐文章于 2025-03-04 12:09:32 发布

@C&L

最新推荐文章于 2025-03-04 12:09:32 发布

阅读量769

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/m0_58185754/article/details/124793431

版权

BEM（Block Element Modifier）是一种CSS命名约定，用于提高样式选择器的可读性和组件的可复用性。它通过使用双下划线`__`来表示块的后代元素，如`.block__element`，使用双破折号`--`来表示块的不同状态或版本，如`.block--modifier`。这种命名方式有助于组织和维护大型项目的CSS代码。

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

在阅读element时，发现其CSS命名采用BEM的风格，于是去查阅BEM是什么...

我的理解：BEM是命名规范

BEM的意思就是块（block）、元素（element）、修饰符（modifier）

主要问题是CSS类名中“--”和“__”是什么意思？

__（两个短横线）表示某一个块的后代元素

--表示某一个块的不同状态或版本

.block{}       block块
.block__element{}     block块下的元素
.block--modifier{}        block块的不同状态或版本

示例

<form class="site-search  full">
  <input type="text" class="field">
  <input type="Submit" value ="Search" class="button">
</form>

用BEM风格改写如下

<form class="site-search  site-search--full">
  <input type="text" class="site-search__field">
  <input type="Submit" value ="Search" class="site-search__button">
</form>

我理解的块的不同状态或版本就是一个块有不同的类名

参考原文如下：

CSS命名规范——BEM思想（非常赞的规范）_大奋齐的博客-优快云博客_bem命名规范https://blog.youkuaiyun.com/chenmoquan/article/details/17095465