HTML靜態頁面與CSS該如何審查代碼？

著重說說css的代碼審查吧

一般來說，代碼的審查，如上圖所示，需要不斷重複這兩個步驟，直到產出合格的代碼：

• 初級開發人員提交代碼
• 高級開發人員評審這次提交的代碼

在實際工作中，由於高級開發人員人數較少，所以初級開發人員等待反饋的時間往往很長，所以我們需要引入自動化審查的機制，減少高級開發人員的工作量，同時能夠讓高級開發人員更快反饋對代碼評審的結果。

在這個流程中，在兩個開發人員之間，加入了stylelint這個css代碼靜態分析工具，它承擔了部分代碼評審工作，並且更加快速高效，幾秒內就能反饋出結果。這時，高級開發人員只需要評審stylelint檢查通過的代碼即可，大大減輕了工作量。

stylelint可以在多種環境下工作，如：

編輯器/IDE：

CI(持續集成)服務：

最後，讓我們看看哪些機構在使用stylelint：

附，相關資源

stylelint官網

Stylelint: Why and How to Lint CSS

請使用stylelint 和 htmllint。

StyleLint: A mighty, modern CSS linter and fixer that helps you avoid errors and enforce consistent conventions in your stylesheets. stylelint

HtmlLint: This is a Comp 523 project at UNC in the fall of 2014. The goal is to create an html5 linter and validator. The linter will be an npm module and should be usable as a Grunt plugin. Some solutions exist for validation and linting html, but many aren"t configurable or require an outside service. The purpose of this module is to provide a highly configurable, open source alternative. htmllint

他們都有對應的構建工具和CLI。感興趣的話，查看相關文檔吧。StyleLint相關的教程蠻多的：

• Smashing Magazine
• Integrate Stylelint Into Your Workflow For Better CSS - Web Design Weekly
• What is stylelint and how to integrate a modern CSS linter in your workflow
• Lint your CSS with stylelint | CSS-Tricks
• Taking CSS Linting to the Next Level with Stylelint — SitePoint