CSS命名规范是确保代码可维护性和可读性的重要环节。以下是综合多个权威来源的命名规范及最佳实践：
一、命名规范
文件命名 - 基础样式库：`css/core.css`
- 特定模块：`module.css`（如布局、字体等）
- 布局结构：`layout.css`、`header.css`、`footer.css`
- 常见组件：`button.css`、`form.css`、`modal.css`
类名命名
- 使用小写：`button` 而非 `Button`
- 避免缩写：如 `btn` 可改为 `button`（需确保清晰）
- 语义化：`user-profile` 明确表达组件功能
- 避免特殊字符：仅使用字母、数字、连字符和下划线
ID命名
- 保留给JavaScript使用，避免在样式表中定义ID
- 遵循驼峰命名法：`header-container`
- 全局唯一性：确保在HTML中唯一标识元素
二、命名方法
BEM命名法
- Block： 独立功能模块（如 `.button`） - Element
- Modifier：样式修饰（如 `.button--primary`）
- 优势：降低样式冲突风险，便于维护和复用
OOCSS命名法 - 基础样式：
通用类（如 `.reset`、`.typography`）
- 布局样式：针对布局的类（如 `.container`、`.grid`）
- 模块样式：可复用的组件类（如 `.modal`、`.tooltip`）
- 优势：实现样式隔离，提升可维护性
三、其他规范
文件结构 - 按功能模块划分目录，如 `css/` → `layout/` → `components/`
- 使用CSS预处理器（如Sass）时，可按嵌套规则组织文件
命名约定
- 常见前缀：`btn-`（按钮）、`card-`（卡片）、`modal-`（模态框）
- 动态状态：使用后缀如 `.active`、`.disabled`、`.hover`
避免常见错误
- 不要使用数字开头类名（如 `.123`），否则部分浏览器无法识别
- 避免混淆：`.container` 和 `.container-fluid` 需明确区分
四、工具与规范参考
工具： 使用CSS预处理器（如Sass）的嵌套功能自动管理类名 规范
通过遵循以上规范和方法，可以显著提升CSS代码的可读性、可维护性，并减少样式冲突风险。
