在本文中，我將陳述兩點：一是為什么我們需要對樣式進行審查，二是如何將審查工具融合到整體的構(gòu)建流程中（適用于 CSS，也適用于 Sass)。
代碼審查是一個檢查代碼是否符合編程規(guī)范以及查找代碼錯誤的過程，如果要做個比喻，那么它就是編程語言的拼寫檢查工具。代碼審查可以幫助獨立開發(fā)者更好的維護代碼，但它更大的能力是幫助團隊維護代碼。
對樣式進行審查的原因有很多，比如它可以維護代碼的一致性，解析代碼中的錯誤，減少冗余代碼等等。
下面讓我們看幾個示例：
.no-space-after-colon { display:block;} ?.no-semicolon { position: relative ?}代碼審查工具可以有效指出上述代碼中的不規(guī)范之處。在審查工具中規(guī)定代碼的規(guī)范寫法雖然不是必要的，但這種做法有助于維護代碼的一致性。此外，在團體開發(fā)中彼此不熟悉，如果我看到上述的代碼會感到很惱火。
.invalid-hex { color: #FFF00G;} ?代碼審查工具也可以指出無效的顏色值，拋出一個類型錯誤。如果疏漏了這種錯誤，往往會導(dǎo)致頁面上嚴(yán)重的視覺錯誤。
.unnecessary-prefixes { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}隨著瀏覽器的升級換代，有一些 CSS3 屬性的瀏覽器前綴已經(jīng)沒有意義了。代碼審查工具可以指出這些無意義前綴，此外，將它和 Autoprefixer 搭配起來，可以更加有效。
.duplicate-rule { display: block; transition: opacity .2s; color: #444; background-color: #eee; transition: background-color .4s; ?}樣式重復(fù)是一個常見的錯誤，就上面的代碼而言，這里的 transition 值到底是 opacity 還是 background-color 呢？顯而易見， background-color 會替代 opacity 。
代碼審查是不是很有用呢？如果這還不夠打動你，請繼續(xù)閱讀。
stylelint 是一個基于 Javascript 的代碼審查工具，它易于擴展，支持最新的 CSS 語法，也理解類似 CSS 的語法。此外，因為它是基于 JavaScript，所以比起 Ruby 開發(fā)的 scss-lint 速度更快。
stylelint 是一個強大和現(xiàn)代的 CSS 審查工具，有助于開發(fā)者推行統(tǒng)一的代碼規(guī)范，避免樣式錯誤。
stylelint 由PostCSS 提供技術(shù)支持，所以它也可以理解 PostCSS 解析的語法，比如 SCSS。
PostCSS 是一個使用 JS 解析樣式的插件集合，它可以用來審查 CSS 代碼，也可以增強 CSS 的語法（比如變量和混合宏），還支持未來的 CSS 語法、行內(nèi)圖片等等。
PostCSS 的哲學(xué)是專注于處理一件事，并做到極致，目前它已經(jīng)有了 200 多個插件，由于它們都是基于 JavaScript 編寫的，所以運行速度非常快。
PostCSS 和 stylelint 就是我們接下來將要介紹的代碼審查工具。
stylelint 的強大之處就在于它非常靈活，無需花費過多的時間過濾各種規(guī)則，只需配置需要的規(guī)則即可完成 stylelint 的初始化。 stylelint 的配置文檔 非常適用于初學(xué)者了解相關(guān)的審查規(guī)則。此外，他們還提供了一份 標(biāo)準(zhǔn)配置文件 用作參考。
在本文中，我將帶領(lǐng)大家從一份更友好、簡潔的配置開始。就我個人而言，我認(rèn)為它比官方提供的配置文件更加靈活：
"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 的官方配置文檔 ，在其基礎(chǔ)上做一些個性化的設(shè)置。接下來，讓我們將這些審查規(guī)則融入到構(gòu)建流程中。
首先，讓我們先來審查 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));});上面短短五十行代碼包含了審查規(guī)則和文件路徑，請確保資源路徑與上面的代碼相匹配。
更令人驚奇的是，只需改動一小段代碼就可以同時支持 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}); ?});聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2023 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
