[翻譯]用PostCSS改善你的CSS代碼質量

「代碼質量」這個術語對於程序員來講並不陌生。畢竟，每一個開發人員都知道，代碼只是能工做是不夠的。它還應該具有其餘要素：它應該是可讀的，良好的格式和一致性。它也應該符合一些標準的量化指標。不過這些在寫CSS時，常常被忽略。咱們能夠花不少時間討論爲何會發生這種狀況，但重要的是，CSS編碼是和JavaScript，PHP等同樣，咱們要關注咱們寫代碼的方式。不然，可能會致使不少複雜的問題。
在本文中，咱們將探討咱們如何可以利用PostCSS幫助咱們，保持咱們的CSS代碼質量更高。首先，找出「好CSS代碼」的含義。有幾件事情須要注意的：

• 一、代碼應該是一致的風格-你能夠選擇如何命名類名，如何換行或如何列出須要的屬性，但你應該保持全部樣式的方式相同。一向的風格提升可讀性，使代碼更容易理解。

• 二、代碼應該遵照一些量化標準-有定量的度量，咱們保證代碼能夠測量並保持在基本標準以上，好比頁面上使用了統一的顏色表示方式，選擇器的最大層數。

• 三、應該避免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或標籤。

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

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

• 二、確保全部的選擇器都是符合編碼風格的。

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

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

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