CSS BEM 命名规范入门教程
💡
原文中文，约1900字，阅读约需5分钟。
📝
内容提要
BEM（Block, Element, Modifier）是一种用于HTML/CSS类命名的约定，有助于组织代码。块是独立的HTML元素，元素附属于块，修饰符表示块或元素的状态和外观。文章提供了示例，并建议使用SCSS以获得更清晰的层次结构。还推荐使用像Tailwind CSS和UnoCSS这样的原子CSS框架。
🎯
关键要点
- BEM（Block, Element, Modifier）是一种HTML/CSS类命名方法，帮助组织代码。
- block（块）是独立的HTML元素，element（元素）依附于block，modifier（修饰符）表示状态和外观。
- element前加双下划线__，modifier前加双连字符--，单词用单连字符-连接。
- 使用modifier时，保留不含modifier的类名。
- 提供了HTML和CSS示例，展示BEM命名规范的应用。
- 推荐使用SCSS以清晰展现层级关系，使用父选择器&将block和element样式放在一起。
- 如果不喜欢写类名，可以尝试使用Tailwind CSS和UnoCSS等原子CSS框架。
❓
延伸问答
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>。
➡️
