Bootstrap2用户指南
6.2.11 Class 命名规范
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

Bootstrap插件

Bootstrap编码规范

HTML编码规范

CSS编码规范

注释

Less 和 Sass 中的操作符

Less 和 Sass 中的嵌套

简写形式的属性声明

单行规则声明

带前缀的属性

媒体查询的位置

不要使用 @import

声明顺序

语法规范

Class 命名规范

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

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

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

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验