摘要：代碼質量這個術語對于程序員來說并不陌生。在本文中，我們將探討我們如何能夠利用幫助我們，保持我們的代碼質量更高。怎樣使用在這篇文章中，我們重點介紹幾個插件，可以幫助我們提高代碼質量。使用相當簡單的。這兩個插件可用于代碼分析。

“代碼質量”這個術語對于程序員來說并不陌生。畢竟，每個開發人員都知道，代碼只是能工作是不夠的。它還應該具備其他要素：它應該是可讀的，良好的格式和一致性。它也應該符合一些標準的量化指標。不過這些在寫CSS時，經常被忽略。我們可以花很多時間討論為什么會發生這種情況，但重要的是，CSS編碼是和JavaScript，PHP等一樣，我們要關注我們寫代碼的方式。否則，可能會導致很多復雜的問題。
在本文中，我們將探討我們如何能夠利用PostCSS幫助我們，保持我們的CSS代碼質量更高。首先，找出“好CSS代碼”的含義。有幾件事情需要注意的：

1、代碼應該是一致的風格-你可以選擇如何命名類名，如何換行或如何列出需要的屬性，但你應該保持所有樣式的方式相同。一貫的風格提高可讀性，使代碼更容易理解。

2、代碼應該遵守一些量化標準-有定量的度量，我們保證代碼可以測量并保持在基本標準以上，比如頁面上使用了統一的顏色表示方式，選擇器的最大層數。

3、應該避免HACK-例如，在某些情況下，!important有時看起來像可行的解決方案，但通常會使代碼更復雜。

這不是一個完整的列表，但我們必須關注上述問題。雖然是顯而易見的，但如果在一個很多人參與的項目里，人們技能各不相同,以上問題就很容易被忽略。我們希望有一個工具，可以幫助我們通過代碼分析工具自動實施這些標準。

怎樣使用PostCSS
在這篇文章中，我們重點介紹幾個PostCSS插件，可以幫助我們提高CSS代碼質量。
在開始之前，先使用gulp工具建立一個環境。首先，創建一個新的文件夾，并用npm初始化。然后，安裝gulp的PostCSS插件reporter plugin，寫一個任務查看PostCSS插件的輸出。
具體方法是切換到新創建的文件夾并運行：

npm i gulp gulp-postcss postcss-reporter --save-dev

在創建一個空的style.css文件和gulpfile.js包含以下內容之后：

var gulp = require("gulp");
gulp.task("analyze-css", function () {
  var postcss = require("gulp-postcss");
  var reporter = require("postcss-reporter");

  return gulp.src("style.css")
    .pipe(postcss([ 
      reporter()
    ]));});

創建掃描style.css內容的任務,并通過一系列PostCSS插件運行它。在命令行下你已經可以運行gulp analyze-css，postcss-reporter只是一個日志插件。讓我們添加一個測試插件。
Stylelint
現在大多數語言都有檢測工具，CSS也不例外。Stylelint允許您按照一組預定義的規則驗證你的CSS代碼，它可以檢查代碼格式的一致性，規則，單位或指令的使用情況，以及潛在的錯誤（如顏色值不正確）。它允許自定義檢查規則 -它本身也有一些基本的檢測，比如，確保選擇器和下面的大括號有一個空格，引號成對使用。還有其它一些規則。下面是幾個例子：
property-blacklist和unit-blacklist允許您指定不使用的屬性和單位的列表。
property-no-vendor-prefix 警告您關于使用瀏覽器前綴，不要求他們根據 Can I use.的數據檢測屬性。
declaration-no-important 不允許使用!important指令。
selector-max-specificity 限制選擇器的最大層級。

Stylelint默認情況下禁用了所有附帶的規則，所以希望你來配置自己的規則。配置可能花點時間。或者，也可以擴展標準配置，如stylelint-標準配置，并用自己的規則對它進行擴展。
設置stylelint一個標準的規則集：

npm i stylelint stylelint-config-standard --save-dev

對gulpfile文件添加代碼，以使用新的插件：

var gulp = require("gulp");
gulp.task("analyze-css", function () {
  var postcss = require("gulp-postcss");
  var stylelint = require("stylelint");
  var reporter = require("postcss-reporter");

  return gulp.src("style.css")
    .pipe(postcss([
      stylelint(), 
      reporter()
    ]));});

Stylelint規則可以內嵌在gulpfile文件中，最后在一個多帶帶的文件定義。在項目文件夾中創建.stylelintrc文件，并添加如下內容：

{"extends": "stylelint-config-standard"}

這將告訴stylelint，我們自己的規則集是基于stylelint的標準配置。現在更新style.css文件并且測試插件查測CSS片斷的情況：

.title,.content{ 
  background: #FFFFFF; 
  font-size:0.9em;
  margin: 0;
}

運行gulp analyze-css 產生下面的報告：

style.css
1:7    Expected newline after "," (selector-list-comma-newline-after) [stylelint]
1:15   Expected single space before "{" (block-opening-brace-space-before) [stylelint]
1:17   Expected newline after "{" of a multi-line block (block-opening-brace-newline-after) [stylelint]
1:17   Unexpected whitespace at end of line (no-eol-whitespace) [stylelint]
2:5    Expected indentation of 2 spaces (indentation) [stylelint]
2:17   Expected "#FFFFFF" to be "#ffffff" (color-hex-case) [stylelint]
2:17   Expected "#FFFFFF" to be "#FFF" (color-hex-length) [stylelint]
2:25   Expected newline after ";" in a multi-line rule (declaration-block-semicolon-newline-after) [stylelint]
2:25   Unexpected whitespace at end of line (no-eol-whitespace) [stylelint]
3:5    Expected indentation of 2 spaces (indentation) [stylelint]
3:15   Expected single space after ":" with a single-line value (declaration-colon-space-after) [stylelint]
4:4    Unexpected whitespace at end of line (no-eol-whitespace) [stylelint]
5:4    Unexpected whitespace at end of line (no-eol-whitespace) [stylelint]
6:5    Expected indentation of 2 spaces (indentation) [stylelint]
7:1    Unexpected missing newline at end of file (no-missing-eof-newline) [stylelint]

使用這個插件可以幫助編寫良好的規范的CSS。通過自定義規則列表和覆蓋標準配置的那些不用的配置。您可以把這些規則作為項目和團隊的規則。如果標準規則，沒有符合要求，你也可以自己寫一個。

Do I Use
在寫css時要適配多個瀏覽器是一件痛苦的事。Do I Use 是一個幫助你寫出適配多個瀏覽器CSS的插件。首先定義哪些瀏覽器是要支持的。之后，當您運行的插件，它會通過caniuse.com的數據庫來檢查你的代碼。如果一些代碼不被支持，則提示錯誤。
使用相當簡單的。安裝：

npm i doiuse --save-dev

更新gulpfile：

return gulp.src("style.css")
  .pipe(postcss([
    doiuse({
      browsers: ["ie >= 9", "last 2 versions"],
    }),
    reporter()]));

此配置定義要支持瀏覽器的最新2個主要版本，IE9及以上。

為了演示，將運行插件來檢測一些新CSS屬性，如：網格布局模功能。

body {
  display: grid;
  grid-columns: 200px 1% 1fr;
  grid-rows: auto 15px auto 15px auto;}

下面是doiuse給出的報告：

style.css
11:2 CSS3 Multiple column layout not supported by: IE (9), Firefox (43,44),
 Chrome (48,49), Safari (8,9), Opera (34,35), iOS Safari (8.1-8.4,9.0-9.2) 
(multicolumn) [doiuse]

在寫CSS的時候，瀏覽器不能很好的支持CSS網格模塊。但是，do i use工具可以幫助我們追蹤瀏覽器的支持情況！

Immutable CSS
現在樣式表中重寫CSS規則，會帶來錯誤和復雜性。即使使用現代調試工具，弄清楚那里的樣式被重寫或為什么，有時也是一項挑戰。這就是為什么添加修飾符給選擇器比重寫樣式更好的原因。immutable CSS插件對樣式重寫發出警告。
有兩種操作模式。默認情況下，如果在不同的文件重寫樣式，只警告你。當多個文件合并成單一的文件，它會利用源文件地址，找出其中哪里重寫的樣式的。這意味著它可以與Sass或postcss-impot插件很好的兼容。如果你想更嚴格，可以啟用嚴格模式，在一個單一的文件重寫樣式也會發生警告。
這里有一個簡單的示例。先安裝插件：

npm i immutable-css --save-dev

并在gulpfile里啟用插件嚴格模式：

return gulp.src("style.css")
  .pipe(postcss([
    immutableCss({
      strict: true
    }),
    reporter()
  ]))

然后準備不友好的CSS片斷：

.title {
  color: blue;
  font-weight: bold;}

.title {
  color: green;}

.article .title {
  font-size: 1.2em;}

下面是該插件的報告，.title偽類已突變：

.title was mutated 3 times[line 1, col 1]: /Users/pavels/Documents/projects/sandbox/postcss/style.css
[line 6, col 1]: /Users/pavels/Documents/projects/sandbox/postcss/style.css
[line 10, col 1]: /Users/pavels/Documents/projects/sandbox/postcss/style.css

想了解更多這個插件的信息，可以訪問 官網.。

CSS Stats and List Selectors

我們來看一下最后兩個插件 CSS stats和list selectors。他們和上面提到的檢查類插件有點不同：它們的目的不是指出問題，而是提供了自定義分析數據。
CSS stats提供了基本的樣式信息：多少規則，選擇器或使用的聲明，它們是什么，指出一些特殊選擇器，或代碼中font-size出現的次數。這只是一個簡單的生成報告中包含的信息樣本。更詳細的說明上它的頁面GitHub的。你也可以訪問cssstats.com看一些利用插件生成數據報告的例子。
List selectors 插件更簡單，它側重于提取的樣式表中使用選擇器的列表，并通過類別將它們分組 - 類選擇器，屬性，ID或標簽。

這兩個插件可用于代碼分析。下面是幾個例子：

1、保證在一個線程的使用的實體的特征，大小和數量。

2、確保所有的選擇器都是符合編碼風格的。

3、確保媒體查詢的一致性。

這些只是一些想法。更實際的做法是先使用之前的插件，再回到這兩個插件，看是否可以提供更多有用的信息。
結束語
代碼測試和分析僅僅PostCSS使用方式之一，其本身可以有很多功能可以添加到你的開發過程，可以節省開發人員的時間和麻煩。即使在其他編程領域，CSS仍然經常被忽視是很覺。但我相信，在配置PostCSS和這幾個插件是使您的開發更容易，更可靠的一步。

原文標題：Improving the Quality of Your CSS with PostCSS
原文件鏈接：http://www.sitepoint.com/improving-the-quality-of-your-css-with-postcss/