Bootstrap CSS编码标准

语法

  • 用两个空格来替代制表符(tab) -- 这是仅有能保证在一切环境下取得共同展示的方法。
  • 为选择器分组时,将独自的选择器独自放在一行。
  • 为了代码的易读性,在每个声明块的左花括号前增加一个空格。
  • 声明块的右花括号应当独自成行。
  • 每条声明语句的 : 后应该刺进一个空格。
  • 为了取得更精确的过错报告,每条声明都应该独占一行。
  • 一切声明语句都应当以分号完毕。最终一条声明语句后边的分号是可选的,可是,假如省掉这个分号,你的代码或许更易犯错。
  • 关于以逗号分隔的特点值,每个逗号后边都应该刺进一个空格(例如,box-shadow)。
  • 不要在 rgb()rgba()hsl()hsla()rect() 值的内部的逗号后边刺进空格。这样利于从多个特点值(既加逗号也加空格)中区别多个色彩值(只加逗号,不加空格)。
  • 关于特点值或色彩参数,省掉小于 1 的小数前面的 0 (例如,.5 替代 0.5-.5px 替代 -0.5px)。
  • 十六进制值应该悉数小写,例如,#fff。在扫描文档时,小写字符易于分辩,由于他们的方法更易于区别。
  • 尽量运用简写方法的十六进制值,例如,用 #fff 替代 #ffffff
  • 为选择器中的特点增加双引号,例如,input[type="text"]。,可是,为了代码的共同性,主张都加上双引号。
  • 防止为 0 值指定单位,例如,用 margin: 0; 替代 margin: 0px;

关于这儿用到的术语有疑问吗?请参阅 Wikipedia 上的 。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

声明次序

相关的特点声明应当归为一组,并依照下面的次序摆放:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

由于定位(positioning)能够从正常的文档流中移除元素,而且还能掩盖盒模型(box model)相关的款式,因而排在首位。盒模型排在第二位,由于它决议了组件的尺度和方位。

其他特点仅仅影响组件的内部(inside)或许是不影响前两组特点,因而排在后边。

完好的特点列表及其摆放次序请参阅 。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

不要运用 @import

<link> 标签比较,@import 指令要慢许多,不但增加了额定的恳求次数,还会导致不行意料的问题。替代方法有以下几种:

  • 运用多个 <link> 元素
  • 经过 Sass 或 Less 相似的 CSS 预处理器将多个 CSS 文件编译为一个文件
  • 经过 Rails、Jekyll 或其他体系中供给过 CSS 文件兼并功用

请参阅 了解更多常识。

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

媒体查询(Media query)的方位

将媒体查询放在尽或许相关规矩的邻近。不要将他们打包放在一个单一款式文件中或许放在文档底部。假如你把他们分开了,将来只会被咱们忘记。下面给出一个典型的实例。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

带前缀的特点

当运用特定厂商的带有前缀的特点时,经过缩进的方法,让每个特点的值在笔直方向对齐,这样便于多行修改。

在 Textmate 中,运用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中,运用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

单行规矩声明

关于只包括一条声明的款式,为了易读性和便于快速修改,主张将语句放在同一行。关于带有多条声明的款式,仍是应当将声明分为多行。

这样做的关键要素是为了过错检测 -- 例如,CSS 校验器指出在 183 行有语法过错。假如是单行单条声明,你就不会疏忽这个过错;假如是单行多条声明的话,你就要仔细分析防止漏掉过错了。

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

简写方法的特点声明

在需求显现地设置一切值的状况下,应当尽量约束运用简写方法的特点声明。常见的乱用简写特点声明的状况如下:

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

大部分状况下,咱们不需求为简写方法的特点声明指定一切值。例如,HTML 的 heading 元素只需求设置上、下边距(margin)的值,因而,在必要的时分,只需掩盖这两个值就能够。过度运用简写方法的特点声明会导致代码紊乱,而且会对特点值带来不必要的掩盖然后引起意外的副作用。

MDN(Mozilla Developer Network)上一片非常好的关于 的文章,关于不太熟悉简写特点声明及其行为的用户很有用。

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Less 和 Sass 中的嵌套

防止非必要的嵌套。这是由于尽管你能够运用嵌套,可是并不意味着应该运用嵌套。只要在必须将款式约束在父元素内(也便是子孙选择器),而且存在多个需求嵌套的元素时才运用嵌套。

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

注释

代码是由人编写并保护的。请保证你的代码能够自描述、注释杰出而且易于别人了解。好的代码注释能够传达上下文联系和代码意图。不要简略地重申组件或 class 称号。

关于较长的注释,必须书写完好的语句;关于一般性注解,能够书写简练的短语。

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

class 命名

  • class 称号中只能呈现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关 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 { ... }

选择器

  • 关于通用元素运用 class ,这样利于烘托功能的优化。
  • 关于经常呈现的组件,防止运用特点选择器(例如,[class^="..."])。浏览器的功能会遭到这些要素的影响。
  • 选择器要尽或许短,而且尽量约束组成选择器的元素个数,主张不要超越 3 。
  • 只要在必要的时分才将 class 约束在最近的父元素内(也便是子孙选择器)(例如,不运用带前缀的 class 时 -- 前缀相似于命名空间)。

扩展阅览:

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

代码安排

  • 以组件为单位安排代码段。
  • 拟定共同的注释标准。
  • 运用共同的空白符将代码分隔成块,这样利于扫描较大的文档。
  • 假如运用了多个 CSS 文件,将其依照组件而非页面的方法分拆,由于页面会被重组,而组件只会被移动。
/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

修改器装备

将你的修改器依照下面的装备进行设置,以防止常见的代码不共同和差异:

  • 用两个空格替代制表符(soft-tab 即用空格代表 tab 符)。
  • 保存文件时,删去尾部的空白符。
  • 设置文件编码为 UTF-8。
  • 在文件完毕增加一个空白行。

参照文档并将这些装备信息增加到项意图 .editorconfig 文件中。例如:。更多信息请参阅 。