一. 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 */
}
四. 编辑器配置
将你的编辑器进行设置，可以避免常见的代码不一致和差异。具体配置信息可查看这里