使用缩写属性
/* Not recommended */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* Recommended */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
忽略掉“0”
font-size: .8em;
颜色的属性值使用三个特殊符号替代6个的
/* Not recommended */
color: #eebbcc;
/* Recommended */
color: #ebc;
选择器命名时需要带上该应用名的前缀
.process-help {} /*Process */
#dataset-note {} /* Dataset */
在每一个申明后添加分号
/* Not recommended */
.test {
display: block;
height: 100px
}
/* Recommended */
.test {
display: block;
height: 100px;
}
在属性和属性值之间使用单个空格
在选择器和大括号之间使用单个空格
在每一个选择器和申明使用新的一行
/* Not recommended */
a:focus, a:active {
position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
使用一个部分的代码使用一个部分的注释，使用注释将每个部分分隔开
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
使用 Autoprefixer自动添加浏览器厂商前缀
屏幕快照 2017-07-17 上午11.17.55.png
