使用stylelint對CSS/Sass作代碼審查

對樣式審查？不多人會這麼作吧，但實際上開發者應該有這樣的態度，尤爲是不一樣團隊多人開發時，這一點尤其重要。

在本文中，我將陳述兩點：一是爲何咱們須要對樣式進行審查，二是如何將審查工具融合到總體的構建流程中（適用於 CSS，也適用於 Sass)。

簡介

什麼是代碼審查

代碼審查是一個檢查代碼是否符合編程規範以及查找代碼錯誤的過程，若是要作個比喻，那麼它就是編程語言的拼寫檢查工具。代碼審查能夠幫助獨立開發者更好的維護代碼，但它更大的能力是幫助團隊維護代碼。

爲何咱們須要審查樣式

對樣式進行審查的緣由有不少，好比它能夠維護代碼的一致性，解析代碼中的錯誤，減小冗餘代碼等等。

下面讓咱們看幾個示例：

.no-space-after-colon { display:block; } ⬆ .no-semicolon { position: relative ⬅ } 

代碼審查工具能夠有效指出上述代碼中的不規範之處。在審查工具中規定代碼的規範寫法雖然不是必要的，但這種作法有助於維護代碼的一致性。此外，在團體開發中彼此不熟悉，若是我看到上述的代碼會感到很惱火。

.invalid-hex { color: #FFF00G; } ⬆ 

代碼審查工具也能夠指出無效的顏色值，拋出一個類型錯誤。若是疏漏了這種錯誤，每每會致使頁面上嚴重的視覺錯誤。

.unnecessary-prefixes { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 

隨着瀏覽器的升級換代，有一些 CSS3 屬性的瀏覽器前綴已經沒有意義了。代碼審查工具能夠指出這些無心義前綴，此外，將它和 Autoprefixer 搭配起來，能夠更加有效。

.duplicate-rule { display: block; transition: opacity .2s; color: #444; background-color: #eee; transition: background-color .4s; ⬅ } 

樣式重複是一個常見的錯誤，就上面的代碼而言，這裏的 transition 值究竟是 opacity 仍是 background-color 呢？顯而易見， background-color 會替代 opacity 。

代碼審查是否是頗有用呢？若是這還不夠打動你，請繼續閱讀。

stylelint 簡介

stylelint 是一個基於 Javascript 的代碼審查工具，它易於擴展，支持最新的 CSS 語法，也理解相似 CSS 的語法。此外，由於它是基於 JavaScript，因此比起 Ruby 開發的 scss-lint 速度更快。

stylelint 是一個強大和現代的 CSS 審查工具，有助於開發者推行統一的代碼規範，避免樣式錯誤。

stylelint 由PostCSS 提供技術支持，因此它也能夠理解 PostCSS 解析的語法，好比 SCSS。

PostCSS 是一個使用 JS 解析樣式的插件集合，它能夠用來審查 CSS 代碼，也能夠加強 CSS 的語法（好比變量和混合宏），還支持將來的 CSS 語法、行內圖片等等。

PostCSS 的哲學是專一於處理一件事，並作到極致，目前它已經有了 200 多個插件，因爲它們都是基於 JavaScript 編寫的，因此運行速度很是快。

PostCSS 和 stylelint 就是咱們接下來將要介紹的代碼審查工具。

安裝

stylelint 的強大之處就在於它很是靈活，無需花費過多的時間過濾各類規則，只需配置須要的規則便可完成 stylelint 的初始化。 stylelint 的配置文檔 很是適用於初學者瞭解相關的審查規則。此外，他們還提供了一份 標準配置文件 用做參考。

在本文中，我將帶領你們從一份更友好、簡潔的配置開始。就我我的而言，我認爲它比官方提供的配置文件更加靈活：

"rules": { "block-no-empty": true, "color-no-invalid-hex": true, "declaration-colon-space-after": "always", "declaration-colon-space-before": "never", "function-comma-space-after": "always", "function-url-quotes": "double", "media-feature-colon-space-after": "always", "media-feature-colon-space-before": "never", "media-feature-name-no-vendor-prefix": true, "max-empty-lines": 5, "number-leading-zero": "never", "number-no-trailing-zeros": true, "property-no-vendor-prefix": true, "rule-no-duplicate-properties": true, "declaration-block-no-single-line": true, "rule-trailing-semicolon": "always", "selector-list-comma-space-before": "never", "selector-list-comma-newline-after": "always", "selector-no-id": true, "string-quotes": "double", "value-no-vendor-prefix": true } 

最後，建議讀一下 stylelint 的官方配置文檔 ，在其基礎上作一些個性化的設置。接下來，讓咱們將這些審查規則融入到構建流程中。

如何審查 CSS

首先，讓咱們先來審查 CSS 代碼。配置審查工具的過程很是簡單，你只須要安裝 gulp-postcss / postcss-reporter 和 stylelint 便可：

npm install gulp-postcss postcss-reporter stylelint --save-dev 

接下來是 gulp 的配置文件 gulpfile.js :

/** * Linting CSS stylesheets with Stylelint * http://www.creativenightly.com/2016/02/How-to-lint-your-css-with-stylelint/ */ var gulp = require('gulp'); var postcss = require('gulp-postcss'); var reporter = require('postcss-reporter'); var stylelint = require('stylelint'); gulp.task("css-lint", function() { // Stylelint config rules var stylelintConfig = { "rules": { "block-no-empty": true, "color-no-invalid-hex": true, "declaration-colon-space-after": "always", "declaration-colon-space-before": "never", "function-comma-space-after": "always", "function-url-quotes": "double", "media-feature-colon-space-after": "always", "media-feature-colon-space-before": "never", "media-feature-name-no-vendor-prefix": true, "max-empty-lines": 5, "number-leading-zero": "never", "number-no-trailing-zeros": true, "property-no-vendor-prefix": true, "rule-no-duplicate-properties": true, "declaration-block-no-single-line": true, "rule-trailing-semicolon": "always", "selector-list-comma-space-before": "never", "selector-list-comma-newline-after": "always", "selector-no-id": true, "string-quotes": "double", "value-no-vendor-prefix": true } } var processors = [ stylelint(stylelintConfig), // Pretty reporting config reporter({ clearMessages: true, throwError: true }) ]; return gulp.src( // Stylesheet source: ['app/assets/css/**/*.css', // Ignore linting vendor assets: // (Useful if you have bower components) '!app/assets/css/vendor/**/*.css'] ) .pipe(postcss(processors)); }); 

上面短短五十行代碼包含了審查規則和文件路徑，請確保資源路徑與上面的代碼相匹配。

更使人驚奇的是，只需改動一小段代碼就能夠同時支持 Sass，讓咱們來修改一下吧。

如何審查 Sass

使用 PostCSS 審查 Sass 代碼很是簡單，與審查 CSS 代碼惟一不一樣的地方就在於，你須要讓 PostCSS 識別 .scss 語法。這一問題能夠經過安裝 postcss-scss 插件來完成，安裝插件後，修改一下配置文件：

npm install postcss-scss --save-dev 

修改配置文件：

//[...] return gulp.src( ['app/assets/css/**/*.css', '!app/assets/css/vendor/**/*.css'] ) .pipe(postcss(processors), {syntax: syntax_scss}); ⬅ }); 

以上就是 gulp 配置文件的所有內容了。總結起來，你須要安裝如下工具：

npm install gulp-postcss postcss-reporter stylelint postcss-scss --save-dev 

/** * Linting Sass stylesheets with Stylelint * http://www.creativenightly.com/2016/02/How-to-lint-your-css-with-stylelint/ */ var gulp = require('gulp'); var postcss = require('gulp-postcss'); var reporter = require('postcss-reporter'); var syntax_scss = require('postcss-scss'); var stylelint = require('stylelint'); gulp.task("scss-lint", function() { // Stylelint config rules var stylelintConfig = { "rules": { "block-no-empty": true, "color-no-invalid-hex": true, "declaration-colon-space-after": "always", "declaration-colon-space-before": "never", "function-comma-space-after": "always", "function-url-quotes": "double", "media-feature-colon-space-after": "always", "media-feature-colon-space-before": "never", "media-feature-name-no-vendor-prefix": true, "max-empty-lines": 5, "number-leading-zero": "never", "number-no-trailing-zeros": true, "property-no-vendor-prefix": true, "rule-no-duplicate-properties": true, "declaration-block-no-single-line": true, "rule-trailing-semicolon": "always", "selector-list-comma-space-before": "never", "selector-list-comma-newline-after": "always", "selector-no-id": true, "string-quotes": "double", "value-no-vendor-prefix": true } } var processors = [ stylelint(stylelintConfig), reporter({ clearMessages: true, throwError: true }) ]; return gulp.src( ['app/assets/css/**/*.css', // Ignore linting vendor assets // Useful if you have bower components '!app/assets/css/vendor/**/*.css'] ) .pipe(postcss(processors), {syntax: syntax_scss}); }); 

若是你想了解如何使用插件擴展 stylelint，那麼就請繼續閱讀後續內容

擴展 stylelint

和 PostCSS 同樣，Stylelint 也能夠經過插件進行擴展。接下來讓咱們經過一些實例學習如何使用審查工具改善代碼的可讀性和可維護性。

實戰演練

話說有個產品經理新接了個 web app 的活，項目正處於緊張的開發中，爲了減小一些開發時間，他決定增長一個特性來替代以前的一攬子方案，這個特性是這樣的：給組件自己添加一個鼠標懸停時的 box-shadow 效果，同時給組件的內部的連接增長一個鼠標懸停樣式。

下面是這個產品經理增長的代碼段：

.component { position: relative; //[...] &:hover { ⬅ box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); .component__child { ⬅ ul { ⬅ li { ⬅ a { ⬅ &:hover { ⬅ text-decoration: underline; } } } } } } } 

真是慘不忍睹！

選擇器嵌套是 Sass 最容易被誤用的特性，合理使用它能夠提升開發效率，濫用則會毀掉整個項目。嵌套每每是由偷懶引發的，這些代碼每每難以閱讀。上面的 &:hover{...} 的嵌套層級太深，很容易混淆其餘開發者對這段代碼的理解。最重要的是，這段嵌套在這裏徹底是沒有必要的。

這就是上面的嵌套代碼編譯生成的 CSS：

.component:hover .component_child ul li a:hover {} /* What the heck is this?! */ 

若是後續接手項目的開發者想要覆蓋這段級聯樣式，那真是大工程。因此有一點值得牢記，那就是除非你很是肯定嵌套是必要的，不然不要使用它。

幸運的是，咱們有插件來阻止這種狀況的發生！咱們能夠安裝 stylelint-statement-max-nesting-depth 插件，設置最大嵌套層級來避免過渡嵌套的現象：

npm install stylelint-statement-max-nesting-depth --save-dev 

在 gulp 的排位置文件中增長 scss-lint 相關的任務信息：

gulp.task("scss-lint", function() { var stylelintConfig = { "plugins": [ "stylelint-statement-max-nesting-depth" ], "rules": { //[...] "statement-max-nesting-depth": [3, { countAtRules: false }], } } //[..] }); 

爲了加強團隊的共建意識，我在這裏將 limit 設置爲了 3 。因爲有嵌套層級的限制，因此產品經理就會來自 stylelint 的重構提示。產品經理沒怎麼細想，就改爲了下面這樣：

.component:hover { box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75); .component__child { ul { li { a:hover { text-decoration: underline; } } } } } 

這個重構以後的版本看起來可讀性好多了，但仍然有很多缺陷。事實上，上面代碼中的嵌套是徹底沒有必要的。stylelint 能夠檢測出這一點，並會強制產品經理從新思考樣式代碼。

.component:hover { box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75); } .component__child { a:hover { text-decoration: underline; } } 

如今，代碼更加健壯了！stylelint 已經接受了代碼，不會再提出異議了。雖然上面的代碼沒有問題，但咱們其實能夠作的更好。若是你但願嚴格要求團隊的每個成員，那麼能夠禁用嵌套，這會讓團隊成員，包括產品經理，更加嚴謹地編寫代碼。

.component:hover { box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75); } .component__link:hover { text-decoration: underline; } 

經過以上介紹和實戰演練，但願我已經說服了你：樣式審查是很是值得投入的一項流程。代碼審查應該成爲咱們的朋友，只需投入一點時間，就能夠收穫代碼總體的可讀性、可維護性。

本文根據 @Scotty Vernon 的《 How to lint your Sass/CSS properly with Stylelint 》所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處： http://www.creativenightly.com/2016/02/How-to-lint-your-css-with-stylelint/ 。