1.CSSWritingSpecificationIndentation使用4个空格作为缩进级别。.selector{保证金：0;padding:0;}Space1.选择器和'{'之间必须有一个空格;2、属性名与后面的':'、':'和属性值之间不能有空格3、单行写列表属性值时，','后必须有空格；4.注释'/*'之后和'*/'之前必须有一个空格。/*好*/.selector{margin:0;字体系列：宋体，无衬线；}5。">,+,~"在选择器两边预留一个空格。main>nav{padding:10px;}label+input{margin-left:5px;}input:checked~button{background-color:#69C;}分号每个属性声明的末尾都需要分号。.element{宽度：20px；高度：20px；background-color:red;}空行1、'}'后面最好跟一个空行，包括scss、less等中的嵌套规则；2.属性之间需要适当的空行。.element{...}.dialog{颜色：红色；&:after{...}}换行符1.在“{”之后和“}”之前；2.每个属性占一行；3.分隔符','后的多个规则。.element{颜色：红色；background-color:black;}.element,.dialog{...}引号1.最外层统一使用双引号；2、url的内容要用引号；3.属性选择器中的属性值需要引号。.element:after{内容：“”；background-image:url("logo.png");}li[data-type="single"]{...}Selector1.避免过多的祖先选择浏览器，每个浏览器都会有性能差异，以及花费的时间选择器也不同。尽量限制在3级以上。/*bad*/ul.example{}.example1.example2.example3.example4{}/*good*/.example{}.example1,.example2{}2.除非必要类，否则不要使用元素标签名称和ID结合。/*bad*/ul#example{}div.error{}/*good*/#example{}.error{}属性写入顺序1.同一规则集下的属性写入时要按功能分组，并写入FormattingModel（布局方式、位置）>BoxModel（大小）>Typographic（文字相关）>Visual（视觉效果）的顺序，提高代码的可读性；2.FormattingModel相关属性包括：position/top/right/bottom/left/float/display/overflow等；BoxModel相关属性包括：border/margin/padding/width/height等；排版相关属性包括：font/line-height/text-align/word-wrap等；3．视觉相关属性包括：background/color/transition/list-style等；4.另外，如果包含content属性，应该放在最前面。.sidebar{/*格式化模型：定位方案/偏移量/z-indexes/显示/...*/position:absolute;顶部：50px；左：0；溢出-x：隐藏；/*盒子模型：大小/边距/填充/边框/...*/width:200px;填充：5px；边框：1px实心#ddd；/*排版：字体/对齐/文本样式/...*/font-size:14px;:20px;/*视觉：颜色/阴影/渐变/...*/背景：#f5f5f5;颜色：#333；-webkit-transition:color1s;-moz-transition:颜色1s;transition:color1s;}Numeric当数值为0~1之间的小数时，整数部分的0省略。panel{opacity:.8;}当长度为0时，必须省略单位。（只能保存长度单位）body{padding:05px;}color1.rgb颜色值使用十六进制表示形式#rrggbb。不要使用rgb();2.带有alpha的颜色信息可以使用rgba()。使用rgba()时，每个逗号后必须保留一个空格。.success{box-shadow:002pxrgba(0,128,0,.3);border-color:#008000;}3.当颜色值可以缩写时，使用缩写形式。/*good*/.success{background-color:#aca;}/*bad*/.success{background-color:#aaccaa;}4.颜色值不要使用命名颜色值。/*good*/.success{color:#90ee90;}/*bad*/.success{color:lightgreen;}5.颜色值中的英文字符为小写。如果不使用小写，需要保证同一个项目内大小写一致。/*好*/.success{background-color:#aca;color:#90ee90;}/*好*/.success{background-color:#ACA;color:#90EE90;}使用特定供应商时的前缀属性对于带有前缀的属性，使用缩进将每个属性的值在垂直方向对齐，方便多行编辑。/*前缀属性*/.selector{-webkit-box-shadow:01px2pxrgba(0,0,0,.15);框阴影：01px2pxrgba(0,0,0,.15);}不要使用@import与标签相比，@import指令要慢得多，不仅会增加额外请求的数量，还会导致不可预知的问题。备选方案如下：使用多个元素；通过Scss或Less等CSS预处理器将多个CSS文件编译成一个；通过Rails、Jekyll或其他系统中可用的CSS文件合并功能。
