Bootstrap CSS编号标准
摘要： 用2个空格符来替代制表符（tab） __ 它是唯一能确保在全部自然环境下得到一致呈现的方式。为挑选器排序时，将独立的挑选器独立放到一行。以便编码的最易读性，在每一个申明块的...
针对这儿采用的专业术语有疑惑吗？请参照 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;
有关的特性申明理应归到一组，并依照下边的次序排序：
Positioning Box model Typographic Visual因为精准定位（positioning）能够从一切正常的文本文档流中清除原素，而且还能遮盖盒实体模型（box model）有关的款式，因而排到第一位。盒实体模型排到第二位，由于它决策了部件的规格和部位。
别的特性仅仅危害部件的內部（inside）或是不是危害前2组特性，因而排到后边。
详细的特性目录以及排序次序请参照 Recess。
.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; }
.ount { background_position: 0 _40px; }
缩写方式的特性申明
在必须显示信息地设定全部值的状况下，理应尽可能限定应用缩写方式的特性申明。普遍的乱用缩写特性申明的状况以下：
padding margin font background border border_radius大部分分状况下，大家不用为缩写方式的特性申明特定全部值。比如，HTML 的 heading 原素只必须设定上、下面距（margin）的值，因而，在必需的情况下，只需遮盖这2个值便可以。过多应用缩写方式的特性申明会造成编码错乱，而且会对特性值产生无须要的遮盖进而造成出现意外的不良反应。
/* 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 ，那样有利于3D渲染特性的提升。
针对常常出現的部件，防止应用特性挑选器（比如，[class^="..."]）。访问器的特性会遭受这种要素的危害。
挑选器要尽量短，而且尽可能限定构成挑选器的原素数量，提议不必超出 3 。
仅有在必需的情况下才将 class 限定在近期的父原素内（也便是子孙后代挑选器）（比如，不应用带作为前缀的 class 时 __ 作为前缀相近于取名室内空间）。
拓展阅读文章：
Scope CSS classes with prefixes Stop the cascade
/* 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 { ... }
* Sometimes you need to include optional context for ponent. Do that up here if it's important enough.
.element { ... }
/* ponent or modifer */
.element_heading { ... }
编写器配备
将你的编写器依照下边的配备开展设定，以免普遍的编码不一致和差别：
用2个空格符替代制表符（soft_tab 即用空格符意味着 tab 符）。 储存文档时，删掉尾部的空白页符。 设定文档编号为 UTF_8。 在文档末尾加上一个空白页行。参考文本文档并将这种配备信息内容加上到新项目的 .editorconfig 文档中。比如：Bootstrap 中的 .editorconfig 案例。大量信息内容请参照 about EditorConfig。
