语法使用两个空格代替制表符（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;而不是保证金：0px;。/*糟糕的CSS*/.selector,.selector-secondary,.selector[type=text]{padding:15px;边距：0px0px15px；背景色：rgba(0,0,0,0.5);box-shadow:0px1px2px#CCC,inset01px0#FFFFFF}/*好的CSS*/.selector,.selector-secondary,.selector[type="text"]{padding:15px;底部边距：15px；背景颜色：rgba(0,0,0,.5)；box-shadow:01px2px#ccc,inset01px0#fff;}相关属性声明应该组合在一起并按以下顺序排列：PositioningBoxmodelTypographicVisual排在第一位，因为定位从正常文档流中移除元素并覆盖框模型相关样式。盒子模型排在第二位，因为它决定了组件的大小和位置。其他属性只影响组件内部（inside）或不影响前两组属性，所以排在后面。.declaration-order{/*定位*/position:absolute;顶部：0；右：0；底部：0；左：0；z-指数：100；/*盒子模型*/display:block;;宽度：100px；高度：100px；/*Typography*/font:normal13px"HelveticaNeue",sans-serif;行高：1.5；颜色：#333；文本对齐：居中；-颜色：#f5f5f5；边框：1px实心#e5e5e5；边界半径：3px；/*Misc*/opacity:1;}不要使用@import与标签相比，@import指令要慢得多，不仅增加这会导致无法预料的问题。备选方案如下：使用多个元素使用CSS预处理器（如Sass或Less）将多个CSS文件编译成一个文件Rails、Jekyll或其他系统中可用的CSS文件合并功能linkrel="stylesheet"href="core.css">放置媒体查询放置媒体查询作为尽可能接近相关规则。不要将它们捆绑在单个样式表中或文档的底部。如果分开，以后只会被大家遗忘。下面给出一个典型的例子。.element{...}.element-avatar{...}.element-selected{...}@media(min-width:480px){.element{...}.element-avatar{...}.element-selected{...}}前缀属性在使用vendor-specific前缀属性时，使用缩进将每个属性的值在垂直方向对齐，方便多行编辑。在Textmate中，使用Text→EditEachLineinSelection(??A)。在SublimeText2中，使用选择→添加上一行(??↑)和选择→添加下一行(??↓)。/*前缀属性*/.selector{-webkit-box-shadow:01px2pxrgba(0,0,0,.15);框阴影：01px2pxrgba(0,0,0,.15);}单行规则语句对于只包含一条语句的样式，为了可读性和快速编辑，建议将语句放在同一行。对于具有多个声明的样式，声明仍应分成多行。这样做的关键因素是为了错误检测——例如，CSS验证器在第183行指出语法错误。如果是单行单语句，则不会忽略此错误；如果是单行多语句，就要仔细分析，以免遗漏错误。/*单行声明*/.span1{width:60px;}.span2{宽度：140px；}.span3{宽度：220px；}/*多个声明，每行一个*/.sprite{display:inline-block;宽度：16px；高度：15px；背景图片：url(../img/sprite.png);}.icon{背景位置：00;}.icon-home{背景位置：0-20px;}.icon-account{背景位置：0-40px;}属性声明的简写形式在需要显式设置所有值的情况下，应尽可能限制使用简写形式的属性声明。简写属性声明的常见滥用情况如下：paddingmarginfontbackgroundborderborder-radius在大多数情况下，我们不需要为简写属性声明指定所有值。例如，HTML标题元素只需要设置顶部和底部边距值，因此您只需要在必要时覆盖这两个值即可。过度使用速记属性声明会使代码混乱，并通过不必要地覆盖属性值而导致不良副作用。MDN（Mozilla开发者网络）上有一篇关于速记属性的非常好的文章，对不熟悉速记属性声明及其行为的用户很有用。/*错误的例子*/.element{margin:0010px;背景：红色；背景:url("图片.jpg");border-radius:3px3px00;}/*很好的例子*/.element{margin-bottom:10px;背景色：红色；背景图像：url（“image.jpg”）；边框左上角半径：3px；border-top-right-radius:3px;}Less和Sass嵌套避免不必要的嵌套。这是因为尽管您可以使用嵌套，但这并不意味着您应该这样做。嵌套只有在必须将样式限制在父元素（即后代选择器）内，并且有多个元素需要嵌套时才使用。//没有nesting.table>thead>tr>th{…}.table>thead>tr>td{…}//有nesting.table>thead>tr{>th{…}>td{…}}注释代码由人编写和维护。确保您的代码是自我描述的、注释完备的并且易于其他人理解。好的代码注释传达了代码的上下文和目的。不要简单地重复组件或类名。对于较长的笔记，一定要写完整的句子；对于一般的笔记，简短的短语就可以了。/*坏例子*//*模态标题*/.modal-heade1`r{...}/*好例子*//*.modal-title和.modal-close的包装元素*/.modal-header{...类命名类名中只能出现小写字符和破折号（不能是下划线或驼峰式命名）。破折号应该用于相关的类名（类似于命名空间）（例如，.btn和.btn-danger）。避免过于随意的速记。.btn代表按钮，但.s不代表任何东西。类名应尽可能短且明确。使用有意义的名称。使用有条理或有目的的名称，而不是表象名称。根据最近的父类或基类为新类添加前缀。/*不好的例子*/.t{...}.red{...}.header{...}/*好的例子*/.tweet{...}.important{...}.tweet-header{...}选择器对常用元素使用class，有利于渲染性能的优化。避免为频繁出现的组件使用属性选择器（例如[class^="..."]）。这些因素会影响浏览器性能。选择器应尽可能短，并尽量限制组成选择器的元素数量。建议不要超过3个。仅在必要时将类限制为最近的父元素（也称为后代选择器）（例如，当不使用带前缀的类时——前缀类似于名称空间）。/*坏例子*/span{...}.page-container#stream.stream-item.tweet.tweet-header.username{...}.avatar{...}/*好例子*/.avatar{...}.tweet-header.username{...}.tweet.avatar{...}代码组织以组件为单位组织代码片段。制定一致的注解规范。使用一致的空格将代码分成块，这有助于扫描更大的文档。如果使用多个CSS文件，将它们拆分为组件而不是页面，因为页面将被重组而组件只会被移动。/**组件部分标题*/.element{...}/**组件部分标题**有时您需要为整个组件包含可选的上下文。如果它足够重要，请在此处执行此操作。*/。元素{。..}/*上下文子组件或修饰符*/.element-heading{...}编辑器配置使用以下配置设置编辑器以避免常见的代码不一致和差异：使用两个空格而不是制表符（soft-tab表示使用空格来表示制表符）。保存文件时，删除尾随空格。将文件编码设置为UTF-8。在文件末尾添加一个空行。
