Bootstrap CSS 编码规范之Class 命名规范

Class 命名规范

Class 应该遵守以下命名规范：

• class 名称中只能出现小写字符和破折号（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（如，.btn 和 .btn-danger）。
• 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
• class 名称应当尽可能短，并且意义明确。
• 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
• 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
• 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

在为 Sass 和 Less 变量命名时也可以参考上面列出的各项规范。

1. /* Bad example */
2. .t { ... }
3. .red { ... }
4. .header { ... }
6. /* Good example */
7. .tweet { ... }
8. .important { ... }
9. .tweet-header { ... }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。