CSS命名规范有哪些？

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS命名规范有哪些？》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

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>/
</p>

通过组合多个类实现不同效果：

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 是目前最广泛采用的组合。不复杂但容易忽略的是坚持执行。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~