CSS BEM 命名规范入门教程
内容提要
BEM（Block, Element, Modifier）是一种用于HTML/CSS类命名的约定，有助于组织代码。块是独立的HTML元素，元素附属于块，修饰符表示块或元素的状态和外观。文章提供了示例，并建议使用SCSS以获得更清晰的层次结构。还推荐使用像Tailwind CSS和UnoCSS这样的原子CSS框架。
延伸解读
BEM 的核心规则与常见误区
BEM 通过 block、element、modifier 三个概念划分类名。block 可独立使用，element 依附于 block，modifier 表示状态或外观。命名时 element 前加双下划线 __，modifier 前加双连字符 --，单词间用单连字符 - 连接。常见错误是 element 嵌套 element，如 block__element1__element2，正确应写为 block__element2。使用 modifier 时，必须保留基础类名，例如 menu__link menu__l
SCSS 如何让 BEM 结构更清晰
文章推荐使用 SCSS 编写 BEM 样式，因为父选择器 & 可以将 block 和 element 的样式组织在一起，直观体现层级关系。例如 .menu 内用 &__list 定义元素，用 &__link 和 &--active 定义链接及其激活状态。这种写法减少了重复的类名前缀，同时保持 BEM 的命名约定，使代码更易维护。如果不熟悉 SCSS，也可以直接写 CSS，但结构上会稍显松散。
原子 CSS 框架作为替代方案
文章末尾提到，如果读者不喜欢手动编写类名，可以尝试 Tailwind CSS 或 UnoCSS 等原子 CSS 框架。这类框架通过组合细粒度的工具类来构建界面，避免了为每个组件起名的负担。但文章并未深入比较 BEM 与原子 CSS 的优劣，只是将其作为一种可选方向。读者应根据项目规模和团队习惯决定是否采用。
Q&A
BEM命名规范的基本概念是什么？
BEM（Block, Element, Modifier）是一种HTML/CSS类命名方法，帮助组织代码，使其更有条理。
BEM中的block、element和modifier分别是什么？
block是独立的HTML元素，element依附于block，modifier表示block或element的状态和外观。
如何正确使用BEM命名规范？
element前加双下划线__，modifier前加双连字符--，单词用单连字符-连接，且保留不含modifier的类名。
使用SCSS有什么好处？
使用SCSS可以通过父选择器&将block和element的样式放在一起，清晰展现层级关系。
如果不想手动写类名，有什么替代方案？
可以尝试使用Tailwind CSS和UnoCSS等原子CSS框架。
BEM命名规范的示例是什么？
例如，<nav class='menu'>包含<ul class='menu__list'>，其中<li class='menu__item'><a class='menu__link menu__link--active'>主页</a></li>。
