一、CSS 书写规范
缩进
使用 4 个空格做为一个缩进层级。
.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.’}’ 后最好跟一个空行，包括 scss、less等中嵌套的规则；
2.属性之间需要适当的空行。
.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级以内。
/* bad */
ul.example {}
.example1 .example2 .example3 .example4 {}
/* good */
.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> 元素；
通过 Scss 或 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、less等中的变量、函数、混合、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 */
}四、编辑器配置
将你的编辑器进行设置，可以避免常见的代码不一致和差异。
具体配置信息可查看这里
