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 { }
.btn { }            / 可复用按钮 /
.btn-primary { }    / 皮肤样式 /
.btn-large { }      / 大小样式 /

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

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

除了架构类规范，命名时也常遵循以下书写风格：

kebab-case（短横线分隔）：如 main-navigation、user-profile —— 最常见于 HTML/CSS 中，推荐使用
camelCase（驼峰命名）：如 userProfile —— 更多用于 JavaScript，CSS 中不推荐
snake_case（下划线）：如 main_menu —— 较少用于 CSS，某些预处理器中可能出现
PascalCase（大驼峰）：如 UserCard —— 通常用于 React 组件类名，CSS 中少见