css中有哪些命名规范_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css中有哪些命名规范

2025-11-29

浏览次数：次

返回列表

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：主题相关（较少用）

示例：

多多校园网络店铺

v3.3增加是否允许用户注册选项，重些登陆验证代码，取消SessionTimeout设置，改成前后台登陆验证设置，重写短消息单元，所有短信功能在个页面完成，更改相关短信连接和图片设置，美化相关小图片，修正若干个小问题，全新界面正装上市丰富用户字段，重命名相关文件，以方便使用管理，适合开发规范，重写修改密码，修改资料，店铺标志上传，店铺公告，店铺连接代码，店铺资料修改，商品发布、修改、删除功能，二手

0 查看详情多多校园网络店铺

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