首页 > 文章 > 前端

CSS命名规范有哪些？

时间：2026-01-19 15:10:32 411浏览收藏

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

BEM命名规范通过块、元素、修饰符结构提升代码可维护性，如.card__button--primary；SMACSS将样式分为基础、布局、模块等类，推荐l-、is-前缀；OOCSS倡导结构与皮肤分离，实现样式复用；推荐使用kebab-case命名，避免视觉描述，保持团队一致，BEM与kebab-case为最常用组合。

css中有哪些命名规范

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>

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

CSS命名规范有哪些？

1. BEM（Block Element Modifier）

2. SMACSS（Scalable and Modular Architecture for CSS）

3. OOCSS（Object-Oriented CSS）

4. 常见命名风格（语法层面）

5. 实用建议