css的style guide

使用缩写属性

  /* 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