使用縮寫屬性

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

選擇器命名時需要帶上該應(yīng)用名的前綴

  .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