登录
css代码规范
2026年1月30日 16:54
css规范
使用属性简写
/* 使用属性简写 */
.container {
margin: 10px 20px;
}
/* 不使用属性简写 */
.container {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
统一样式格式
/* 统一使用双引号 */
.button {
font-family: "Arial", sans-serif;
}
/* 统一使用分号结尾 */
.button {
color: red;
}
避免使用全局样式
全局样式是指能够影响整个页面的样式，比如 body 元素或者 * 选择器。虽然在某些情况下使用全局样式会很方便，但是过度依赖全局样式会增加代码的复杂度，降低代码的可维护性。在编写 CSS 代码时，应该尽量避免使用全局样式，而是优先使用类名和 ID 来控制样式。
!important
除公共样式之外，在业务代码中尽量不能使用 !important
z-index
建议将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。
不要为 id、class 选择器添加类型选择器
/* good */
#error,.message {
font-color: #c00;
}
/* bad */
input#error,p.message {
font-color: #c00;
}
文字排版
- 字号 不要小于12px
- 字重使用数值
- 行高使用数字
/* good */
h1 {
font-weight: 700;
line-height: 1.5;
font-size: 12px
}
/* bad */
h1 {
font-weight: bold;
line-height: 15px;
font-size: 10px
}
清楚浮动
.clearfix::before,
.clearfix::after {
content: "";
display: block;
clear: both;
}
CSS代码命名规范
前端css代码规范：主要遵循BEM命名规范，BEM分别对应的是block,element和modifier,为的是结束混乱的命名方式，达到一个语义话的css命名方式
BEM命名规范
block
block 表示一个外层组件的意思，表示盒子的呈现的内容，如button,card，tabs等，在块被写为和class的名字一样 常见的block有：
布局类
.header /* 页头 */
.footer /* 页脚 */
.sidebar /* 侧边栏 */
.container /* 容器 */
.layout /* 布局 */
.grid /* 网格布局 */
.wrapper /* 包装器 */
.frame /* 框架 */
.holder /* 容器 */
.box /* 盒子 */
.panel /* 面板 */
.segment /* 分段 */
.section /* 区块 */
.stack /* 堆叠布局 */
.column /* 列 */
.row /* 行 */
.main /* 主要内容区 */
.aside /* 侧边内容 */
UI组件类
.button /* 按钮 */
.modal /* 模态框 */
.card /* 卡片 */
.form /* 表单 */
.input /* 输入框 */
.select /* 选择器 */
.checkbox /* 复选框 */
.radio /* 单选框 */
.toggle /* 切换开关 */
.switch /* 开关 */
.slider /* 滑块 */
.range /* 范围选择器 */
.stepper /* 步进器 */
.rate /* 评分组件 */
导航类
.menu /* 菜单 */
.nav /* 导航 */
.breadcrumb /* 面包屑 */
.pagination /* 分页 */
.tabs /* 标签页 */
.dropdown /* 下拉菜单 */
.pager /* 分页器 */
.quick-nav /* 快速导航 */
.action-sheet /* 动作面板 */
.bottom-sheet /* 底部面板 */
.drawer /* 抽屉 */
表单控件
.search /* 搜索框 */
.filter /* 过滤器 */
.sort /* 排序器 */
.upload /* 上传组件 */
.date-picker /* 日期选择器 */
.time-picker /* 时间选择器 */
.color-picker /* 颜色选择器 */
.uploader /* 上传器 */
.search-bar /* 搜索栏 */
.filter-bar /* 筛选栏 */
.textarea /* 文本域 */
.file-input /* 文件输入 */
数据展示
.table /* 表格 */
.list /* 列表 */
.chart /* 图表 */
.graph /* 图形 */
.gauge /* 仪表盘 */
.progress /* 进度条 */
.timeline /* 时间轴 */
.statistic /* 统计数字 */
.counter /* 计数器 */
.metric /* 指标 */
.dashboard /* 仪表板 */
.data-table /* 数据表格 */
.pie-chart /* 饼图 */
.bar-chart /* 柱状图 */
.line-chart /* 折线图 */
内容容器
.accordion /* 手风琴 */
.carousel /* 轮播图 */
.widget /* 小部件 */
.tile /* 磁贴 */
.collection /* 集合 */
.feed /* 信息流 */
.stream /* 流 */
.grid-view /* 网格视图 */
.list-view /* 列表视图 */
.portfolio /* 作品集 */
.gallery /* 画廊 */
交互反馈
.alert /* 警告提示 */
.toast /* 轻量提示 */
.notification /* 通知 */
.snackbar /* 底部提示 */
.popover /* 弹出框 */
.tooltip /* 工具提示 */
.spinner /* 加载器 */
.skeleton /* 骨架屏 */
.placeholder /* 占位符 */
.overlay /* 遮罩层 */
.backdrop /* 背景遮罩 */
.indicator /* 指示器 */
多媒体
.player /* 播放器 */
.audio-player /* 音频播放器 */
.video-player /* 视频播放器 */
.lightbox /* 灯箱 */
.slideshow /* 幻灯片 */
.image /* 图片容器 */
.video /* 视频容器 */
.audio /* 音频容器 */
装饰元素
.avatar /* 头像 */
.icon /* 图标 */
.badge /* 徽章 */
.label /* 标签 */
.chip /* 碎片标签 */
.tag /* 标签 */
.mark /* 标记 */
.highlight /* 高亮 */
.divider /* 分割线 */
.ornament /* 装饰元素 */
.decoration /* 装饰 */
.pattern /* 图案 */
文本相关
.heading /* 标题 */
.subheading /* 副标题 */
.caption /* 说明文字 */
.quote /* 引用 */
.code-block /* 代码块 */
.text /* 文本容器 */
.article /* 文章 */
.testimonial /* 推荐语 */
.title /* 标题 */
.subtitle /* 副标题 */
.paragraph /* 段落 */
功能模块
.wizard /* 向导步骤 */
.tour /* 引导漫游 */
.help /* 帮助组件 */
.sorter /* 排序器 */
.paginator /* 分页器 */
.wishlist /* 收藏夹 */
.cart /* 购物车 */
.checkout /* 结账流程 */
.settings /* 设置面板 */
.profile /* 个人资料 */
.account /* 账户管理 */
移动端
.floating-action /* 浮动按钮 */
.swipe /* 滑动组件 */
.swipeable /* 可滑动 */
.pull-to-refresh /* 下拉刷新 */
.infinite-scroll /* 无限滚动 */
.app-bar /* 应用栏 */
.bottom-nav /* 底部导航 */
.tab-bar /* 标签栏 */
业务相关
.product-card /* 商品卡片 */
.quick-view /* 快速查看 */
.add-to-cart /* 加入购物车 */
.review /* 评论 */
.rating-stars /* 星级评分 */
.price-display /* 价格显示 */
.post /* 帖子 */
.comment-thread /* 评论线程 */
.like-button /* 点赞按钮 */
.share-menu /* 分享菜单 */
.notification-bell /* 通知铃 */
.profile-card /* 个人资料卡片 */
营销展示
.banner /* 横幅 */
.hero /* 主视觉区 */
.feature /* 特色区 */
.cta /* 行动号召 */
.promo /* 推广区块 */
.spotlight /* 聚光灯区 */
.showcase /* 展示区 */
.ad /* 广告 */
.newsletter /* 新闻订阅 */
形状组件
.circle /* 圆形 */
.square /* 方形 */
.triangle /* 三角形 */
.diamond /* 菱形 */
.hexagon /* 六边形 */
.oval /* 椭圆形 */
.polygon /* 多边形 */
状态指示器
.status /* 状态显示 */
.signal /* 信号指示 */
.dot /* 点状指示 */
.marker /* 标记 */
.flag /* 标志 */
链接相关
.link /* 链接 */
.external-link /* 外部链接 */
.internal-link /* 内部链接 */
.nav-link /* 导航链接 */
.button-link /* 按钮样式链接 */
用户界面
.user-profile /* 用户资料 */
.user-settings /* 用户设置 */
.preferences /* 偏好设置 */
.theme-switcher /* 主题切换器 */
通知系统
.notification-center /* 通知中心 */
.notification-bell /* 通知铃 */
.message-center /* 消息中心 */
.inbox /* 收件箱 */
数据分析
.analytics /* 分析 */
.report /* 报告 */
.report-generator /* 报告生成器 */
.data-export /* 数据导出 */
.statistics /* 统计数据 */
系统管理
.admin-panel /* 管理面板 */
.system-status /* 系统状态 */
.backup /* 备份 */
.restore /* 恢复 */
.logs /* 日志 */
.audit /* 审计 */
时间相关
.timeline /* 时间线 */
.schedule /* 计划 */
.calendar /* 日历 */
.time-range /* 时间范围 */
.date-selector /* 日期选择器 */
状态指示
.status-indicator /* 状态指示器 */
.health-status /* 健康状态 */
.connection-status /* 连接状态 */
.battery-level /* 电池电量 */
图表类型
.line-chart /* 折线图 */
.bar-chart /* 柱状图 */
.pie-chart /* 饼图 */
.area-chart /* 面积图 */
.scatter-plot /* 散点图 */
.heatmap /* 热力图 */
.gauge-chart /* 仪表图 */
工具类组件
.toolbar /* 工具栏 */
.context-menu /* 上下文菜单 */
.shortcut /* 快捷方式 */
.quick-action /* 快速操作 */
.bulk-action /* 批量操作 */
.wizard /* 向导 */
.tour /* 引导 */
.help-tooltip /* 帮助提示 */
响应式组件
.mobile-view /* 移动端视图 */
.tablet-view /* 平板视图 */
.desktop-view /* 桌面视图 */
.responsive-grid /* 响应式网格 */
.adaptive-layout /* 自适应布局 */
交互组件
.drag-drop /* 拖放 */
.dropzone /* 放置区域 */
.draggable /* 可拖动 */
.sortable /* 可排序 */
.resizable /* 可调整大小 */
.collapsible /* 可折叠 */
.accordion /* 手风琴 */
存储相关
.storage /* 存储 */
.storage-usage /* 存储使用情况 */
.quota /* 配额 */
.backup-status /* 备份状态 */
.cloud-storage /* 云存储 */
.local-storage /* 本地存储 */
安全组件
.authentication /* 身份验证 */
.login /* 登录 */
.logout /* 登出 */
.password /* 密码 */
.two-factor /* 双重认证 */
.encryption /* 加密 */
.security-log /* 安全日志 */
监控组件
.monitoring /* 监控 */
.real-time /* 实时 */
.historical /* 历史 */
.trend-analysis /* 趋势分析 */
.performance /* 性能 */
.uptime /* 运行时间 */
.downtime /* 停机时间 */
同步组件
.sync /* 同步 */
.sync-status /* 同步状态 */
.offline /* 离线 */
.online /* 在线 */
.conflict /* 冲突 */
.conflict-resolution /* 冲突解决 */
报告组件
.report /* 报告 */
.report-builder /* 报告构建器 */
.report-template /* 报告模板 */
.export-report /* 导出报告 */
.print-report /* 打印报告 */
.schedule-report /* 计划报告 */
Element
元素是块的子节点，元素表示的目的，而不是状态。块和元素之间用一个双下划线划开。
布局结构类
__header /* 头部 */
__footer /* 脚部 */
__body /* 主体 */
__main /* 主要区域 */
__aside /* 侧边区域 */
__content /* 内容区域 */
__container /* 容器 */
__wrapper /* 包装器 */
__inner /* 内部容器 */
__section /* 区块 */
__group /* 分组 */
__panel /* 面板 */
__frame /* 框架 */
导航与交互
__item /* 项目/项 */
__link /* 链接 */
__button /* 按钮 */
__icon /* 图标 */
__toggle /* 切换开关 */
__arrow /* 箭头 */
__caret /* 指示箭头 */
__handle /* 手柄/把手 */
__drag /* 拖拽手柄 */
__scroll /* 滚动区域 */
__trigger /* 触发器 */
__action /* 操作按钮 */
内容显示
__title /* 标题 */
__subtitle /* 副标题 */
__heading /* 标题（可细分 __heading-1, __heading-2） */
__text /* 文本 */
__label /* 标签文字 */
__caption /* 说明文字 */
__description/* 描述 */
__summary /* 摘要 */
__paragraph /* 段落 */
__quote /* 引用 */
__code /* 代码 */
__image /* 图片 */
__video /* 视频 */
__audio /* 音频 */
__media /* 媒体内容 */
表单元素
__input /* 输入框 */
__textarea /* 文本域 */
__select /* 选择框 */
__option /* 选项 */
__checkbox /* 复选框 */
__radio /* 单选按钮 */
__field /* 表单字段 */
__label /* 表单标签 */
__hint /* 提示文字 */
__error /* 错误信息 */
__success /* 成功信息 */
__warning /* 警告信息 */
__validation /* 验证信息 */
列表与集合
__list /* 列表 */
__item /* 列表项 */
__entry /* 条目 */
__row /* 行 */
__cell /* 单元格 */
__col /* 列 */
__grid /* 网格项 */
__card /* 卡片 */
__tile /* 磁贴 */
__block /* 块状项 */
__segment /* 分段 */
__piece /* 片段 */
信息与状态
__status /* 状态显示 */
__badge /* 徽章 */
__tag /* 标签 */
__marker /* 标记 */
__indicator /* 指示器 */
__signal /* 信号 */
__dot /* 点状指示 */
__counter /* 计数器 */
__number /* 数字显示 */
__value /* 数值 */
__percentage /* 百分比 */
__rating /* 评分 */
__star /* 星星 */
装饰与辅助
__icon /* 图标 */
__avatar /* 头像 */
__thumbnail /* 缩略图 */
__preview /* 预览图 */
__background /* 背景 */
__overlay /* 遮罩层 */
__shadow /* 阴影 */
__border /* 边框 */
__divider /* 分割线 */
__separator /* 分隔符 */
__ornament /* 装饰元素 */
__pattern /* 图案 */
__gradient /* 渐变 */
工具与控制
__toolbar /* 工具栏 */
__tool /* 工具按钮 */
__control /* 控制元素 */
__settings /* 设置按钮 */
__config /* 配置 */
__option /* 选项按钮 */
__switch /* 开关 */
__slider /* 滑块 */
__handle /* 滑块手柄 */
__knob /* 旋钮 */
__dial /* 刻度盘 */
时间与进度
__time /* 时间显示 */
__date /* 日期显示 */
__timestamp /* 时间戳 */
__duration /* 时长 */
__progress /* 进度条 */
__bar /* 进度条条状部分 */
__track /* 轨道 */
__step /* 步骤 */
__milestone /* 里程碑 */
__clock /* 时钟 */
__calendar /* 日历 */
交互反馈
__loading /* 加载指示器 */
__spinner /* 旋转器 */
__skeleton /* 骨架屏元素 */
__placeholder/* 占位符 */
__hint /* 提示 */
__tooltip /* 工具提示内容 */
__popup /* 弹出内容 */
__message /* 消息内容 */
__alert /* 警告内容 */
__toast /* 轻提示内容 */
__notification /* 通知内容 */
导航组件 (Navigation)
/* .menu 的 Element */
__item /* 菜单项 */
__link /* 菜单链接 */
__icon /* 菜单图标 */
__text /* 菜单文字 */
__submenu /* 子菜单 */
__dropdown /* 下拉菜单 */
/* .tabs 的 Element */
__tab /* 标签页 */
__content /* 标签内容 */
__nav /* 标签导航 */
__panel /* 标签面板 */
/* .breadcrumb 的 Element */
__crumb /* 面包屑项 */
__separator /* 分隔符 */
表单组件 (Forms)
/* .form 的 Element */
__group /* 表单组 */
__field /* 表单字段 */
__label /* 标签 */
__input /* 输入框 */
__error /* 错误信息 */
__help /* 帮助文字 */
__submit /* 提交按钮 */
__reset /* 重置按钮 */
/* .input 的 Element */
__wrapper /* 包装器 */
__field /* 输入区域 */
__prefix /* 前缀 */
__suffix /* 后缀 */
__clear /* 清除按钮 */
卡片组件 (Cards)
/* .card 的 Element */
__header /* 卡片头部 */
__title /* 卡片标题 */
__subtitle /* 卡片副标题 */
__body /* 卡片主体 */
__content /* 卡片内容 */
__footer /* 卡片脚部 */
__image /* 卡片图片 */
__actions /* 卡片操作区 */
__button /* 卡片按钮 */
模态框 (Modals)
/* .modal 的 Element */
__overlay /* 遮罩层 */
__dialog /* 对话框 */
__header /* 头部 */
__title /* 标题 */
__close /* 关闭按钮 */
__body /* 主体 */
__content /* 内容 */
__footer /* 脚部 */
__actions /* 操作区 */
数据表格 (Tables)
/* .table 的 Element */
__header /* 表头 */
__head /* 头部区域 */
__body /* 表格主体 */
__footer /* 表格脚部 */
__row /* 行 */
__cell /* 单元格 */
__col /* 列 */
__sort /* 排序按钮 */
__filter /* 筛选按钮 */
__pagination /* 分页区域 */
工具栏 (Toolbars)
/* .toolbar 的 Element */
__left /* 左侧区域 */
__center /* 中间区域 */
__right /* 右侧区域 */
__item /* 工具项 */
__button /* 工具按钮 */
__separator /* 分隔符 */
__search /* 搜索框 */
__filter /* 筛选器 */
__sort /* 排序器 */
轮播图 (Carousels)
/* .carousel 的 Element */
__slide /* 幻灯片 */
__content /* 幻灯片内容 */
__image /* 幻灯片图片 */
__caption /* 幻灯片说明 */
__prev /* 上一个按钮 */
__next /* 下一个按钮 */
__dots /* 指示点区域 */
__dot /* 单个指示点 */
__pagination /* 分页指示器 */
图表组件 (Charts)
/* .chart 的 Element */
__container /* 容器 */
__canvas /* 画布 */
__axis /* 坐标轴 */
__axis-x /* X轴 */
__axis-y /* Y轴 */
__grid /* 网格线 */
__legend /* 图例 */
__tooltip /* 工具提示 */
__data /* 数据点 */
__bar /* 柱状 */
__line /* 线条 */
__area /* 面积 */
通知组件 (Notifications)
/* .notification 的 Element */
__icon /* 图标 */
__title /* 标题 */
__message /* 消息内容 */
__close /* 关闭按钮 */
__actions /* 操作按钮 */
__time /* 时间显示 */
__progress /* 进度条 */
位置关系
__top /* 顶部 */
__bottom /* 底部 */
__left /* 左侧 */
__right /* 右侧 */
__center /* 中间 */
__side /* 侧边 */
__edge /* 边缘 */
__corner /* 角落 */
__start /* 起始端 */
__end /* 结束端 */
大小尺寸
__small /* 小尺寸 */
__medium /* 中尺寸 */
__large /* 大尺寸 */
__mini /* 迷你尺寸 */
__tiny /* 超小尺寸 */
__compact /* 紧凑型 */
__expanded /* 展开型 */
__full /* 全尺寸 */
状态指示
__active /* 激活状态 */
__inactive /* 非激活状态 */
__enabled /* 启用状态 */
__disabled /* 禁用状态 */
__selected /* 选中状态 */
__checked /* 勾选状态 */
__focused /* 聚焦状态 */
__hover /* 悬停状态 */
__pressed /* 按下状态 */
数量关系
__single /* 单个 */
__multiple /* 多个 */
__first /* 第一个 */
__last /* 最后一个 */
__even /* 偶数 */
__odd /* 奇数 */
__nth /* 第n个 */
__all /* 所有 */
__none /* 无 */
时间关系
__past /* 过去 */
__present /* 现在 */
__future /* 未来 */
__old /* 旧的 */
__new /* 新的 */
__current /* 当前的 */
__previous /* 上一个 */
__next /* 下一个 */
功能角色
__primary /* 主要的 */
__secondary /* 次要的 */
__tertiary /* 第三级的 */
__auxiliary /* 辅助的 */
__main /* 主要的 */
__sub /* 次要的 */
__support /* 支持的 */
__detail /* 详细的 */
Modifier
修饰符是改变某个块的外观的标志。要使用修饰符，用一个双短横线线隔开
通用状态
--active /* 激活/活动状态 */
--inactive /* 非激活状态 */
--enabled /* 启用状态 */
--disabled /* 禁用状态 */
--selected /* 选中状态 */
--checked /* 已勾选 */
--unchecked /* 未勾选 */
--focused /* 获得焦点 */
--blurred /* 失去焦点 */
--hover /* 悬停状态 */
--pressed /* 按下状态 */
--dragging /* 拖拽中 */
--loading /* 加载中 */
--processing /* 处理中 */
--waiting /* 等待中 */
可见性状态
--visible /* 可见 */
--hidden /* 隐藏 */
--collapsed /* 折叠 */
--expanded /* 展开 */
--closed /* 关闭 */
--open /* 打开 */
--show /* 显示 */
--hide /* 隐藏 */
交互状态
--clickable /* 可点击 */
--editable /* 可编辑 */
--draggable /* 可拖动 */
--droppable /* 可放置 */
--sortable /* 可排序 */
--resizable /* 可调整大小 */
--selectable /* 可选择 */
数据状态
--empty /* 空状态 */
--filled /* 已填充 */
--valid /* 有效 */
--invalid /* 无效 */
--verified /* 已验证 */
--unverified /* 未验证 */
--dirty /* 已修改（表单） */
--clean /* 未修改 */
文件/上传状态
--uploading /* 上传中 */
--uploaded /* 已上传 */
--failed /* 失败 */
--success /* 成功 */
--pending /* 等待中 */
--completed /* 已完成 */
--cancelled /* 已取消 */
网络/连接状态
--online /* 在线 */
--offline /* 离线 */
--connected /* 已连接 */
--disconnected /* 断开连接 */
--connecting /* 连接中 */
--syncing /* 同步中 */
--synced /* 已同步 */
通用尺寸
/* 通用尺寸 */
--small /* 小尺寸 */
--medium /* 中等尺寸 */
--large /* 大尺寸 */
--xl /* 加大尺寸 */
--xxl /* 特大尺寸 */
--tiny /* 超小尺寸 */
--mini /* 迷你尺寸 */
--compact /* 紧凑型 */
/* 宽度尺寸 */
--narrow /* 窄 */
--wide /* 宽 */
--full /* 全宽 */
--half /* 半宽 */
--third /* 三分之一宽 */
--quarter /* 四分之一宽 */
--fluid /* 流体宽度 */
--fixed /* 固定宽度 */
/* 高度尺寸 */
--short /* 矮 */
--tall /* 高 */
--full-height /* 全高 */
--auto-height /* 自动高度 */
/* 间距尺寸 */
--dense /* 密集间距 */
--loose /* 宽松间距 */
--tight /* 紧凑间距 */
--spacious /* 宽敞间距 */
颜色主题
--primary /* 主要颜色 */
--secondary /* 次要颜色 */
--tertiary /* 第三颜色 */
--accent /* 强调色 */
--muted /* 柔和色 */
--light /* 浅色 */
--dark /* 深色 */
--inverse /* 反色 */
语义颜色
--success /* 成功/绿色 */
--error /* 错误/红色 */
--warning /* 警告/黄色 */
--info /* 信息/蓝色 */
--danger /* 危险/红色 */
--safe /* 安全/绿色 */
--critical /* 严重/橙色 */
样式变体
--outline /* 轮廓样式 */
--solid /* 实心样式 */
--ghost /* 幽灵样式（透明背景） */
--flat /* 扁平样式 */
--raised /* 凸起样式 */
--shadow /* 有阴影 */
--borderless /* 无边框 */
--rounded /* 圆角 */
--square /* 直角 */
--circle /* 圆形 */
透明度
--transparent /* 透明 */
--semi-transparent /* 半透明 */
--opaque /* 不透明 */
--translucent /* 半透明 */
布局方向
--vertical /* 垂直排列 */
--horizontal /* 水平排列 */
--row /* 行方向 */
--column /* 列方向 */
文本方向
--left /* 左对齐 */
--center /* 居中对齐 */
--right /* 右对齐 */
--justify /* 两端对齐 */
--start /* 起始对齐 */
--end /* 结束对齐 */
位置方向
--top /* 顶部 */
--bottom /* 底部 */
--left /* 左侧 */
--right /* 右侧 */
--middle /* 中间 */
--center /* 居中 */
--absolute /* 绝对定位 */
--relative /* 相对定位 */
--fixed /* 固定定位 */
--sticky /* 粘性定位 */
浮动方向
--float-left /* 左浮动 */
--float-right /* 右浮动 */
--float-none /* 不浮动 */
行为模式
--readonly /* 只读 */
--editable /* 可编辑 */
--required /* 必填 */
--optional /* 可选 */
--multiple /* 多选 */
--single /* 单选 */
--searchable /* 可搜索 */
--filterable /* 可筛选 */
--sortable /* 可排序 */
交互模式
--interactive /* 可交互 */
--static /* 静态 */
--dynamic /* 动态 */
--animated /* 有动画 */
--static /* 静态 */
--fixed /* 固定 */
--sticky /* 粘性 */
数据模式
--empty /* 空数据 */
--loading /* 加载数据 */
--loaded /* 数据已加载 */
--error /* 数据错误 */
--no-data /* 无数据 */
--has-data /* 有数据 */
内容类型
--text /* 文本类型 */
--number /* 数字类型 */
--date /* 日期类型 */
--file /* 文件类型 */
--image /* 图片类型 */
--video /* 视频类型 */
--audio /* 音频类型 */
文件类型
--pdf /* PDF文件 */
--doc /* Word文档 */
--xls /* Excel文件 */
--ppt /* PowerPoint文件 */
--image /* 图片文件 */
--archive /* 压缩文件 */
--code /* 代码文件 */
设备类型
--mobile /* 移动设备 */
--tablet /* 平板设备 */
--desktop /* 桌面设备 */
--phone /* 手机 */
--watch /* 手表 */
--tv /* 电视 */
时间状态
--new /* 新的 */
--old /* 旧的 */
--recent /* 最近的 */
--past /* 过去的 */
--future /* 未来的 */
--expired /* 已过期 */
--upcoming /* 即将到来 */
频率状态
--frequent /* 频繁的 */
--rare /* 罕见的 */
--once /* 一次性的 */
--recurring /* 重复的 */
--daily /* 每日的 */
--weekly /* 每周的 */
--monthly /* 每月的 */
屏幕尺寸
--mobile /* 移动端 */
--tablet /* 平板端 */
--desktop /* 桌面端 */
--sm /* 小屏幕 */
--md /* 中等屏幕 */
--lg /* 大屏幕 */
--xl /* 超大屏幕 */
设备方向
--portrait /* 竖屏 */
--landscape /* 横屏 */
断点相关
--below-md /* 小于中等屏幕 */
--above-lg /* 大于大屏幕 */
--only-mobile /* 仅移动端 */
--only-desktop /* 仅桌面端 */
数据质量
--valid /* 数据有效 */
--invalid /* 数据无效 */
--verified /* 已验证 */
--pending /* 待验证 */
--expired /* 已过期 */
--fresh /* 新鲜数据 */
--stale /* 陈旧数据 */
数据量
--empty /* 空数据 */
--few /* 少量数据 */
--many /* 大量数据 */
--full /* 数据已满 */
--overflow /* 数据溢出 */
安全状态 Modifier
--secured /* 已保护 */
--unsecured /* 未保护 */
--encrypted /* 已加密 */
--decrypted /* 已解密 */
--authenticated /* 已认证 */
--unauthenticated /* 未认证 */
--authorized /* 已授权 */
--unauthorized /* 未授权 */
按钮 Button
--primary /* 主要按钮 */
--secondary /* 次要按钮 */
--danger /* 危险操作按钮 */
--warning /* 警告操作按钮 */
--success /* 成功操作按钮 */
--link /* 链接样式按钮 */
--icon /* 图标按钮 */
--block /* 块级按钮（宽度100%） */
输入框 Input
--filled /* 已填充 */
--error /* 错误状态 */
--success /* 成功状态 */
--warning /* 警告状态 */
--disabled /* 禁用状态 */
--readonly /* 只读状态 */
--search /* 搜索框样式 */
表格 Table
--striped /* 斑马纹 */
--bordered /* 有边框 */
--hover /* 悬停效果 */
--condensed /* 紧凑型 */
--responsive /* 响应式表格 */
--sortable /* 可排序 */
卡片 Card
--shadow /* 有阴影 */
--border /* 有边框 */
--hoverable /* 悬停效果 */
--selected /* 选中状态 */
--clickable /* 可点击 */
--draggable /* 可拖动 */
模态框 Modal
--small /* 小尺寸模态框 */
--medium /* 中尺寸模态框 */
--large /* 大尺寸模态框 */
--fullscreen /* 全屏模态框 */
--centered /* 居中显示 */
导航 Nav
--vertical /* 垂直导航 */
--horizontal /* 水平导航 */
--pills /* 胶囊式导航 */
--tabs /* 标签式导航 */
--underline /* 下划线式导航 */
国际化 Modifier
--ltr /* 从左到右 */
--rtl /* 从右到左 */
--en /* 英语 */
--zh /* 中文 */
--ja /* 日语 */
--ar /* 阿拉伯语 */
--locale-en /* 英语地区 */
--locale-zh /* 中文地区 */
优先级 Modifier
--high /* 高优先级 */
--medium /* 中优先级 */
--low /* 低优先级 */
--critical /* 关键优先级 */
--normal /* 普通优先级 */
--urgent /* 紧急优先级 */
