一. CSS 书写规范缩进使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。.selector { margin: 0; padding: 0;}空格1.选择器 与 ‘{’ 之间必须包含空格；2.属性名 与之后的 ‘:’ 之间不允许包含空格， ‘:’ 与 属性值 之间必须包含空格；3.列表型属性值书写在单行时，’,’ 后必须跟一个空格；4.注释 ‘/’ 后和 ‘/’ 前必须有一个空格。/* good /.selector { margin: 0; font-family: Arial, sans-serif;}5.">、+、~ “选择器的两边各保留一个空格。main > nav { padding: 10px;}label + input { margin-left: 5px;}input:checked ~ button { background-color: #69C;}分号每个属性声明末尾都要加分号。.element { width: 20px; height: 20px; background-color: red;}空行1.文件最后保留一个空行；2.’}’ 后最好跟一个空行，包括 scss 中嵌套的规则；3.属性之间需要适当的空行。.element { …}.dialog { color: red; &:after { … }}换行1.’{’ 后和 ‘}’ 前；2.每个属性独占一行；3.多个规则的分隔符 ‘,’ 后。.element { color: red; background-color: black;}.element,.dialog { …}引号1.最外层统一使用双引号；2.url的内容要用引号；3.属性选择器中的属性值需要引号。.element:after { content: “”; background-image: url(“logo.png”);}li[data-type=“single”] { …}选择器1.避免出现过多的祖先选择器，各浏览器会有性能差异，消耗在选择器的时间也不尽相同。尽量最多控制在3级以内。.example {}.example1, .example2 {}2.非必要的情况下不要使用元素标签名和 ID 或 class 进行组合。/ bad /ul#example {}div.error {}/ good /#example {}.error {}属性书写顺序1.同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性;2.Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等Box Model 相关属性包括：border / margin / padding / width / height 等Typographic 相关属性包括：font / line-height / text-align / word-wrap 等;3.Visual 相关属性包括：background / color / transition / list-style 等;4.另外，如果包含 content 属性，应放在最前面。.sidebar { / formatting model: positioning schemes / offsets / z-indexes / display / … / position: absolute; top: 50px; left: 0; overflow-x: hidden; / box model: sizes / margins / paddings / borders / … / width: 200px; padding: 5px; border: 1px solid #ddd; / typographic: font / aligns / text styles / … / font-size: 14px; line-height: 20px; / visual: colors / shadows / gradients / … / background: #f5f5f5; color: #333; -webkit-transition: color 1s; -moz-transition: color 1s; transition: color 1s;}数值当数值为 0 - 1 之间的小数时，省略整数部分的 0。panel { opacity: .8;}长度长度为 0 时须省略单位。 (也只有长度单位可省)body { padding: 0 5px;}颜色1.RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()；2.带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。.success { box-shadow: 0 0 2px rgba(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.颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。/ good /.success { background-color: #aca; color: #90ee90;}/ good /.success { background-color: #ACA; color: #90EE90;}带前缀的属性当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。/ Prefixed properties /.selector { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15); box-shadow: 0 1px 2px rgba(0, 0, 0, .15);}不要使用 @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>二. CSS 命名规范1.类名使用小写字母，以中划线分隔。2.避免过度任意的简写，要意义明确。.btn 代表 button，但是 .s 不能表达任何意思。3.id采用驼峰式命名4.scss中的变量、函数、混合、placeholder采用驼峰式命名。/ class /.element-content { …}/ id /#myDialog { …}/ 变量 /$colorBlack: #000;/ 函数 /@function pxToRem($px) { …}/ 混合 /@mixin centerBlock { …}/ placeholder /%myDialog { …}附常用类 / ID命名规范：页　眉：header内　容：content容　器：container页　脚：footer版　权：copyright　导　航：menu主导航：mainmenu子导航：submenu标　志：logo标　语：banner标　题：title侧边栏：sidebar图　标：icon注　释：note搜　索：search按　钮：btn登　录：login链　接：link信息框：message三. CSS 注释1.注释统一用’/ /’；2.缩进与下一行代码保持一致；3.可位于一个代码行的末尾，与代码间隔一个空格。/ Modal header /.modal-header { …}/ * Modal header /.modal-header { …}.modal-header { / 50px / width: 50px; color: red; / color red */}四. 编辑器配置将你的编辑器进行设置，可以避免常见的代码不一致和差异。具体配置信息可查看这里