摘要：代碼質(zhì)量這個術(shù)語對于程序員來說并不陌生。在本文中，我們將探討我們?nèi)绾文軌蚶脦椭覀?，保持我們的代碼質(zhì)量更高。怎樣使用在這篇文章中，我們重點介紹幾個插件，可以幫助我們提高代碼質(zhì)量。使用相當(dāng)簡單的。這兩個插件可用于代碼分析。

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

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

2、代碼應(yīng)該遵守一些量化標(biāo)準(zhǔn)-有定量的度量，我們保證代碼可以測量并保持在基本標(biāo)準(zhǔn)以上，比如頁面上使用了統(tǒng)一的顏色表示方式，選擇器的最大層數(shù)。

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

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

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

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

在創(chuàng)建一個空的style.css文件和gulpfile.js包含以下內(nèi)容之后：

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()
    ]));});

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

Stylelint默認(rèn)情況下禁用了所有附帶的規(guī)則，所以希望你來配置自己的規(guī)則。配置可能花點時間?；蛘撸部梢詳U(kuò)展標(biāo)準(zhǔn)配置，如stylelint-標(biāo)準(zhǔn)配置，并用自己的規(guī)則對它進(jìn)行擴(kuò)展。
設(shè)置stylelint一個標(biāo)準(zhǔn)的規(guī)則集：

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規(guī)則可以內(nèi)嵌在gulpfile文件中，最后在一個多帶帶的文件定義。在項目文件夾中創(chuàng)建.stylelintrc文件，并添加如下內(nèi)容：

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

這將告訴stylelint，我們自己的規(guī)則集是基于stylelint的標(biāo)準(zhǔn)配置。現(xiàn)在更新style.css文件并且測試插件查測CSS片斷的情況：

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

運行g(shù)ulp analyze-css 產(chǎn)生下面的報告：

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]

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

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

npm i doiuse --save-dev

更新gulpfile：

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

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

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

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網(wǎng)格模塊。但是，do i use工具可以幫助我們追蹤瀏覽器的支持情況！

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

npm i immutable-css --save-dev

并在gulpfile里啟用插件嚴(yán)格模式：

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

然后準(zhǔn)備不友好的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

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

CSS Stats and List Selectors

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

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

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

2、確保所有的選擇器都是符合編碼風(fēng)格的。

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

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

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