一、语法1.1注意事项(1)使用两个空格代替制表符(tab)——这是唯一一种可以保证在所有环境下显示一致的方法。(2)对选择器进行分组时，将单个选择器放在一行中。(3)为了代码的易读性，在每个声明块的左花括号前添加一个空格。(4)声明块的右花括号应单独一行。(5)每条声明语句后应插入一个空格。(6)为了更准确的错误报告，每条语句应该独占一行。(7)所有的声明语句都应该以分号结束。最后一个声明语句后的分号是可选的，但如果省略它，您的代码可能更容易出错。(8)对于以逗号分隔的属性值，应在每个逗号后插入一个空格（例如，box-shadow）。(9)不要在rgb()、rgba()、hsl()、hsla()或rect()值中的逗号后插入空格。这有助于区分多个颜色值（只有逗号，没有空格）和多个属性值（逗号和空格）。(10)对于属性值或颜色参数，对于小于1的小数，省略前导0（例如，.5而不是0.5；-.5px而不是-0.5px）。(11)十六进制值应全部小写，如#fff。扫描文档时，小写字符更容易区分，因为它们的形式更容易区分。(12)尽量使用缩写的十六进制值，例如，使用#fff而不是#ffffff。(13)为选择器中的属性添加双引号，例如input[type="text"]。它仅在某些情况下是可选的，但是为了代码的一致性，建议包含双引号。(14)避免为0值指定单位，例如使用margin:0；而不是保证金：0px;。1.2示例2.声明顺序2.1相关属性一组相关的属性声明应该组合在一起并按以下顺序排列：(1)定位(2)盒模型(3)排版(4)Visual2.2描述(1))排在第一位是因为定位从正常文档流中移除了元素，并且还覆盖了与框模型相关的样式。(2)盒模型次之，因为它决定了组件的大小和位置。(3)其他属性只影响组件内部(inside)或不影响前两组属性，所以排在后面。2.3例子3.不使用@import3.1没有原因与标签相比，@import命令慢很多，不仅增加了额外请求的次数，而且会引起不可预知的问题。3.2备选方法(1)使用多个元素(2)通过类似Sass或Less的CSS预处理器将多个CSS文件编译成一个文件(3)通过Rails、Jekyll或其他系统提供CSS文件合并功能3.3示例4。媒体查询（Mediaquery）的位置4.1靠近相关规则将媒体查询尽可能靠近相关规则。不要将它们捆绑在单个样式表中或文档的底部。如果分开，以后只会被大家遗忘。4.2示例5.前缀属性5.1垂直对齐当使用供应商特定的前缀属性时，使用缩进将每个属性的值在垂直方向对齐，便于多行编辑。5.2示例6.单行规则语句6.1在一行对于只包含一条语句的样式，建议将语句放在同一行，以便于阅读和快速编辑。对于具有多个声明的样式，声明仍应分成多行。6.2错误检测这样做的关键是为了错误检测——比如CSS验证器指出第100行有语法错误，如果是单行单语句，你不会忽略这个错误；如果是单行多语句，就要仔细分析，以免遗漏错误。6.3示例7.速记属性声明7.1速记滥用在需要显式设置所有值的情况下，应尽可能限制速记属性声明的使用。常见滥用速记属性声明如下：(1)padding(2)margin(3)font(4)background(5)border(5)border-radius7.2表明在大多数情况下，我们不需要shorthand属性声明指定所有值。例如，HTML标题元素只需要设置顶部和底部边距值，因此您只需要在必要时覆盖这两个值即可。过度使用速记属性声明会使代码混乱，并通过不必要地覆盖属性值而导致不良副作用。7.3例八，Less和Sass中的嵌套8.1尽量不要嵌套，避免不必要的嵌套。这是因为尽管您可以使用嵌套，但这并不意味着您应该这样做。嵌套只有在必须将样式限制在父元素（即后代选择器）内，并且有多个元素需要嵌套时才使用。8.2例9、Less、Sass中的运算符为了提高可读性，在括号中的数值、变量和数学计算表达式的运算符之间加了一个空格。十。注释10.1请注意，代码是由人编写和维护的。确保您的代码是自我描述的、注释完备的并且易于其他人理解。好的代码注释传达了代码的上下文和目的。不要简单地重复组件或类名。对于较长的笔记，一定要写完整的句子；对于一般的笔记，简短的短语就可以了。10.2示例11.类命名11.1规范(1)类名中只能出现小写字符和破折号（破折号）（不能出现下划线或驼峰式）。破折号应该用于相关的类名（类似于命名空间）（例如，.btn和.btn-danger）。(2)避免过于随意的速记。.btn代表按钮，但.s不代表任何东西。(3)类名尽量简短，意思清楚。(4)使用有意义的名称。使用有条理或有目的的名称，而不是表象名称。(5)以距离最近的父类或基础（基）类作为新类的前缀。(6)使用.js-*类来标识行为（相对于样式），不要将这些类包含到CSS文件中。在命名Sass和Less变量时，您还可以参考上面列出的约定。11.2实例12.选择器12.1注意事项(1)普通元素使用class，有利于渲染性能的优化。(2)避免对频繁出现的组件使用属性选择器（例如，[class^="..."]）。这些因素会影响浏览器性能。(3)选择器尽量短，尽量限制组成选择器的元素个数。建议不要超过3个。(4)仅在必要时（例如，不使用带前缀的类时——一个前缀类似于一个命名空间）。12.2例13代码组织13.1注(1)以组件为单位组织代码段。(2)制定一致的注解规范。(3)使用一致的空白将代码分成块，这有利于扫描较大的文档。(4)如果使用多个CSS文件，将它们拆分成组件而不是页面，因为页面会重新组织，而组件只会移动。13.2示例14.编辑器配置14.1避免代码差异请按照以下配置设置您的编辑器，以避免常见的代码不一致和差异：(1)将制表符替换为两个空格（soft-tab准备使用空格表示制表符）。(2)保存文件时，删除尾随空白。(3)设置文件编码为UTF-8。(4)在文件末尾添加一个空行。
