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框架。
➡️
