CSS class命名规范
| 分类 | 具体命名 | 命名说明 | 命名规范 |
|---|---|---|---|
| 基础结构类 | .container | 容器 | 常规 |
| .container-fluid | 流体容器（全宽） | 常规 | |
| .wrapper | 包裹层 | 常规 | |
| .inner | 内部容器 | 常规 | |
| .outer | 外部容器 | 常规 | |
| .row | 行容器 | 常规 | |
| .col | 列容器 | 常规 | |
| .grid | 网格容器 | 常规 | |
| .cell | 网格单元 | 常规 | |
| 布局类 | .header | 页头 | 常规 |
| .footer | 页脚 | 常规 | |
| .main | 主内容区 | 常规 | |
| .sidebar | 侧边栏 | 常规 | |
| .aside | 附加内容区 | 常规 | |
| .content | 内容区 | 常规 | |
| .section | 区块 | 常规 | |
| .article | 文章 | 常规 | |
| 导航类 | .nav | 导航 | 常规/BEM |
| .navbar | 导航栏 | 常规 | |
| .menu | 菜单 | 常规/BEM | |
| .tabs | 标签页 | 常规 | |
| .breadcrumb | 面包屑导航 | 常规 | |
| .pagination | 分页 | 常规 | |
| .dropdown | 下拉菜单 | 常规 | |
| 组件类 | .btn | 按钮 | 常规/BEM |
| .btn--primary | 主要按钮 | BEM修饰符 | |
| .btn--secondary | 次要按钮 | BEM修饰符 | |
| .btn--success | 成功按钮 | BEM修饰符 | |
| .btn--danger | 危险按钮 | BEM修饰符 | |
| .btn--warning | 警告按钮 | BEM修饰符 | |
| .btn--info | 信息按钮 | BEM修饰符 | |
| .btn--link | 链接按钮 | BEM修饰符 | |
| .card | 卡片 | 常规/BEM | |
| .card--featured | 特色卡片 | BEM修饰符 | |
| .form | 表单 | 常规 | |
| .form-group | 表单组 | 常规 | |
| .form-control | 表单控件 | 常规 | |
| .input | 输入框 | 常规 | |
| .input-text | 文本输入框 | 常规 | |
| .input-password | 密码输入框 | 常规 | |
| .select | 下拉选择框 | 常规 | |
| .textarea | 文本域 | 常规 | |
| .checkbox | 复选框 | 常规 | |
| .radio | 单选框 | 常规 | |
| .label | 标签 | 常规 | |
| .icon | 图标 | 常规 | |
| .badge | 徽章 | 常规 | |
| .alert | 提示框 | 常规 | |
| .tooltip | 工具提示 | 常规 | |
| .popover | 弹出框 | 常规 | |
| .modal | 模态框 | 常规 | |
| .list | 列表 | 常规 | |
| .list-item | 列表项 | 常规 | |
| .table | 表格 | 常规 | |
| .table-row | 表格行 | 常规 | |
| .table-cell | 表格单元格 | 常规 | |
| .notification | 通知 | 常规 | |
| .panel | 面板 | 常规 | |
| 状态类 | .active | 激活状态 | 常规 |
| .is-active | 激活状态（常用前缀） | SMACSS | |
| .inactive | 非激活状态 | 常规 | |
| .disabled | 禁用状态 | 常规 | |
| .is-disabled | 禁用状态（常用前缀） | SMACSS | |
| .enabled | 启用状态 | 常规 | |
| .hidden | 隐藏状态 | 常规 | |
| .is-hidden | 隐藏状态（常用前缀） | SMACSS | |
| .visible | 可见状态 | 常规 | |
| .is-visible | 可见状态（常用前缀） | SMACSS | |
| .show | 显示状态 | 常规 | |
| .hide | 隐藏状态 | 常规 | |
| .open | 展开状态 | 常规 | |
| .close | 关闭状态 | 常规 | |
| .collapsed | 折叠状态 | 常规 | |
| .expanded | 展开状态 | 常规 | |
| .is-expanded | 展开状态（常用前缀） | SMACSS | |
| .loading | 加载状态 | 常规 | |
| .is-loading | 加载状态（常用前缀） | SMACSS | |
| .error | 错误状态 | 常规 | |
| .has-error | 错误状态（常用前缀） | SMACSS | |
| .success | 成功状态 | 常规 | |
| .has-success | 成功状态（常用前缀） | SMACSS | |
| .warning | 警告状态 | 常规 | |
| .info | 信息状态 | 常规 | |
| .is-invalid | 无效状态 | SMACSS | |
| .is-selected | 选中状态 | SMACSS | |
| 工具类 | .text-center | 文本居中 | 常规/Atomic CSS |
| .text-left | 文本左对齐 | 常规 | |
| .text-right | 文本右对齐 | 常规 | |
| .text-justify | 文本两端对齐 | 常规 | |
| .text-uppercase | 文本大写 | 常规 | |
| .text-lowercase | 文本小写 | 常规 | |
| .text-capitalize | 文本首字母大写 | 常规 | |
| .font-bold | 粗体文本 | 常规 | |
| .font-light | 轻量文本 | 常规 | |
| .font-italic | 斜体文本 | 常规 | |
| .font-normal | 正常文本 | 常规 | |
| .mt-4 | 上边距4单位 | Atomic CSS | |
| .mb-3 | 下边距3单位 | Atomic CSS | |
| .pt-2 | 上内边距2单位 | Atomic CSS | |
| .pb-1 | 下内边距1单位 | Atomic CSS | |
| .u-mt-20 | 上边距20px | Atomic CSS | |
| .pull-left | 左浮动 | 常规 | |
| .pull-right | 右浮动 | 常规 | |
| .clearfix | 清除浮动 | 常规 | |
| .u-clearfix | 清除浮动（工具类） | 常规 | |
| .sr-only | 屏幕阅读器专用 | 常规 | |
| .u-ellipsis | 文本溢出省略 | 常规 | |
| .display-flex | 弹性布局 | Atomic CSS | |
| .position-relative | 相对定位 | Atomic CSS | |
| 主题类 | .t-dark | 暗黑主题 | 常规 |
| .t-light | 明亮主题 | 常规 | |
| .theme-blue | 蓝色主题 | 常规 | |
| 文本类 | .text | 文本 | 常规 |
| .text-primary | 主要文本 | 常规 | |
| .text-secondary | 次要文本 | 常规 | |
| .text-success | 成功文本 | 常规 | |
| .text-danger | 危险文本 | 常规 | |
| .text-warning | 警告文本 | 常规 | |
| .text-info | 信息文本 | 常规 | |
| .text-muted | 弱化文本 | 常规 | |
| 尺寸类 | .xs | 超小尺寸 | 常规 |
| .sm | 小尺寸 | 常规 | |
| .md | 中等尺寸 | 常规 | |
| .lg | 大尺寸 | 常规 | |
| .xl | 超大尺寸 | 常规 | |
| .full | 全尺寸 | 常规 | |
| .half | 半尺寸 | 常规 | |
| .auto | 自动尺寸 | 常规 | |
| 位置类 | .top | 顶部 | 常规 |
| .bottom | 底部 | 常规 | |
| .left | 左侧 | 常规 | |
| .right | 右侧 | 常规 | |
| .center | 居中 | 常规 | |
| .middle | 中间 | 常规 | |
| .start | 起始位置 | 常规 | |
| .end | 结束位置 | 常规 | |
| .fixed | 固定定位 | 常规 | |
| .absolute | 绝对定位 | 常规 | |
| .relative | 相对定位 | 常规 | |
| .static | 静态定位 | 常规 |
关键说明：
-
命名规范类型：
- BEM：
block__element--modifier结构（如.menu__item--active） - SMACSS：状态类常用
is-/has-前缀（如.is-active） - Atomic CSS：一个class对应单一CSS属性（如
.mt-4） - 常规：无特定方法论的标准命名
- BEM：
-
使用建议：
- 中小项目：BEM + 状态类（
.is-active） - 大型项目：CSS Modules/SCSS + SMACSS分层
- 避免使用样式描述（如
.red-text）而用功能描述（如.error-message） - 命名深度不超过2级（避免
.block__element__subelement）
- 中小项目：BEM + 状态类（
