BEM命名规范通过块、元素、修饰符结构提升代码可维护性，如.card__button--primary；SMACSS将样式分为基础、布局、模块等类，推荐l-、is-前缀；OOCSS倡导结构与皮肤分离，实现样式复用；推荐使用kebab-case命名，避免视觉描述，保持团队一致，BEM与kebab-case为最常用组合。
CSS中的命名规范主要是为了提升代码的可读性、可维护性和团队协作效率。虽然CSS本身不限制类名写法，但开发者在实践中总结出了一些主流命名规范，以下是几种常见的CSS命名方式。
1. BEM（Block Element Modifier）
BEM 是最流行的 CSS 命名方法之一，强调组件化结构，通过命名表达元素之间的关系。
命名格式：
- Block（块）：独立的功能模块，如
header、menu - Element（元素）：属于某个块的子元素，格式为
block__element，如menu__item - Modifier（修饰符）：表示状态或变体，格式为
block--modifier或block__element--modifier，如menu--vertical、button__text--large
例如：
立即学习“前端免费学习笔记（深入）”；
.card { }
.card__title { }
.card__button { }
.card__button--primary { }
.card--featured { }
2. SMACSS（Scalable and Modular Architecture for CSS）
SMACSS 提倡将样式分为五类，并建议使用语义化、层级清晰的命名方式。
分类包括：
- Base：基础元素样式，如
body、h1 - Layout：布局容器，如
header、sidebar，可加前缀l-或layout- - Module（组件）：可复用模块，如
btn、carousel - State：描述状态，常用
is-前缀，如is-active、is-hidden - Theme：主题相关（较少用）
示例：
.l-container { }
.btn { }
.btn.is-active { }
.menu.is-open { }
3. OOCSS（Object-Oriented CSS）
面向对象的 CSS 强调“结构与皮肤分离”和“容器与内容分离”，鼓励重用样式对象。
命名更偏向功能性和可组合，比如：
.media { } /* 结构对象 */
.media__img { }
.media__body { }
<p>.btn { } /<em> 可复用按钮 </em>/
.btn-primary { } /<em> 皮肤样式 </em>/
.btn-large { } /<em> 大小样式 </em>/
通过组合多个类实现不同效果：<button class="btn btn-primary btn-large"></button>
4. 常见命名风格（语法层面）
除了架构类规范，命名时也常遵循以下书写风格：
- kebab-case（短横线分隔）：如
main-navigation、user-profile—— 最常见于 HTML/CSS 中，推荐使用 - camelCase（驼峰命名）：如
userProfile—— 更多用于 JavaScript，CSS 中不推荐 - snake_case（下划线）：如
main_menu—— 较少用于 CSS，某些预处理器中可能出现 - PascalCase（大驼峰）：如
UserCard—— 通常用于 React 组件类名，CSS 中少见
5. 实用建议
- 使用语义化名称，避免
red、left等视觉描述，而用error、sidebar - 避免过深嵌套和过于具体的选择器
- 使用前缀区分作用，如
js-用于 JavaScript 钩子（js-toggle-menu），防止样式与行为混淆 - 保持一致性，团队内统一命名规则
基本上就这些。选择哪种规范取决于项目规模和团队习惯，BEM 和 kebab-case 是目前最广泛采用的组合。不复杂但容易忽略的是坚持执行。
