Bootstrap CSS编码规范

BootstrapCSS编码规范code{font-family:"PTMono",Menlo,"CourierNew",monospace;padding:2px4px;font-size:85%;color:#d44950;background-color:#f7f7f9;border-radius:.2rem;}语法用两个空格来代替制表符（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上的层叠样式表-语法。/*BadCSS*/.selector,.selector-secondary,.selector[type=text]{padding:15px;margin:0px0px15px;background-color:rgba(0,0,0,0.5);box-shadow:0px1px2px#CCC,inset01px0#FFFFFF}/*GoodCSS*/.selector,.selector-secondary,.selector[type="text"]{padding:15px;margin-bottom:15px;background-color:rgba(0,0,0,.5);box-shadow:01px2px#ccc,inset01px0#fff;}声明顺序相关的属性声明应当归为一组，并按照下面的顺序排列：PositioningBoxmodelTypographicVisual由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（boxmodel）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。完整的属性列表及其排列顺序请参考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:normal13px"HelveticaNeue",sans-serif;line-height:1.5;color:#333;text-align:center;/*Visual*/background-color:#f5f5f5;border:1pxsolid#e5e5e5;border-radius:3px;/*Misc*/opacity:1;}不要使用@import与<link>标签相比，@import指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：使用多个<link>元素通过Sass或Less类似的CSS预处理器将多个CSS文件编译为一个文件通过Rails、Jekyll或其他系统中提供过CSS文件合并功能请参考SteveSouders的文章了解更多知识。<!--Uselinkelements--><linkrel="stylesheet"href="core.css"><!--Avoid@imports--><style>@importurl("more.css");</style>媒体查询（Mediaquery）的位置将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例。.element{...}.element-avatar{...}.element-selected{...}@media(min-width:480px){.element{...}.element-avatar{...}.element-selected{...}}带前缀的属性当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。在Textmate中，使用Text→EditEachLineinSelection(??A)。在SublimeText2中，使用Selection→AddPreviousLine(??↑)和Selection→AddNextLine(??↓)。/*Prefixedproperties*/.selector{-webkit-box-shadow:01px2pxrgba(0,0,0,.15);box-shadow:01px2pxrgba(0,0,0,.15);}单行规则声明对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。这样做的关键因素是为了错误检测--例如，CSS校验器指出在183行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。/*Singledeclarationsononeline*/.span1{width:60px;}.span2{width:140px;}.span3{width:220px;}/*Multipledeclarations,oneperline*/.sprite{display:inline-block;width:16px;height:15px;background-image:url(../img/sprite.png);}.icon{background-position:00;}.icon-home{background-position:0-20px;}.icon-account{background-position:0-40px;}简写形式的属性声明在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：paddingmarginfontbackgroundborderborder-radius大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML的heading元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。MDN（MozillaDeveloperNetwork）上一篇非常好的关于shorthandproperties的文章，对于不太熟悉简写属性声明及其行为的用户很有用。/*Badexample*/.element{margin:0010px;background:red;background:url("image.jpg");border-radius:3px3px00;}/*Goodexample*/.element{margin-bottom:10px;background-color:red;background-image:url("image.jpg");border-top-left-radius:3px;border-top-right-radius:3px;}Less和Sass中的嵌套避免非必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素时才使用嵌套。