[教學] CSSLint 檢查CSS 安裝及教學. How use CSSLint

[![](http://3.bp.blogspot.com/-B6bVqboLeCw/ThPr1g2tCCI/AAAAAAAAMrM/2KCqEDWFsPc/s320/%25E5%259C%2596%25E7%2589%2587+1.png)](http://3.bp.blogspot.com/-B6bVqboLeCw/ThPr1g2tCCI/AAAAAAAAMrM/2KCqEDWFsPc/s1600/%25E5%259C%2596%25E7%2589%2587+1.png)
前端工程總是需要很多的工具搭配和經驗,Javascript 已經有套很好用的檢驗工具JSLint,而今天介紹的就是使用CSSLint,CSSLint顧名思義,就是用來檢查CSS的項目,當然裡面有許多檢查的範圍,這篇文章就不一一贅述。
CSSLint最棒的地方就是目前有直接線上網站檢查機制。這套工具是由[Nicole Sullivan](http://en.wikipedia.org/wiki/Nicole_Sullivan), [Nicholas C. Zakas](http://www.nczonline.net/about/)共同製作的工具同時也是放置[Github Open source專案](https://github.com/stubbornella/csslint),CSSLint檢查工具是搭配[NPM](http://clonn.blogspot.com/2011/01/nodejs-npm.html)所發展的CLI檢查工具,讓開發者編寫完CSS之後可以立即檢查,透過工具檢查機制,可以讓犯錯的機會降低,這就是工具發展的願景,更也是大家共同的目標。話不多說,直接看看怎麼使用CSSLint。
**CSSLint:**
- [線上網站](http://csslint.net/) - [CSSLint Source code](https://github.com/stubbornella/csslint) - 檢查標準官方有列出所有檢查機制
**安裝以及執行CSSLint:**
`npm install csslint -global

`
[]()
[![](http://1.bp.blogspot.com/-iUKPqEgEmh0/ThPtHFVezPI/AAAAAAAAMrQ/yoguV77y7XQ/s1600/%25E5%259C%2596%25E7%2589%2587+2.png)](http://1.bp.blogspot.com/-iUKPqEgEmh0/ThPtHFVezPI/AAAAAAAAMrQ/yoguV77y7XQ/s1600/%25E5%259C%2596%25E7%2589%2587+2.png)
當以上畫面完成之後,表示CSSLint已經透過npm安裝完成,如果出現錯誤訊息,請查詢是否為權限問題導致,可以試著加入sudo, chown來改變權限。 官方給的指令介紹如下
`csslint file-name.css folder/

`
檢查單一檔案
`csslint test.css ./test/

` 例如我們要將test 資料夾裡面的css檔案全部掃描一次,直接可以下這個指令: `csslint *.css ./test/

`
[![](http://4.bp.blogspot.com/-xNVRCOjospc/ThPvp-3QJDI/AAAAAAAAMrU/QrjEzXwrZGI/s1600/%25E5%259C%2596%25E7%2589%2587+3.png)](http://4.bp.blogspot.com/-xNVRCOjospc/ThPvp-3QJDI/AAAAAAAAMrU/QrjEzXwrZGI/s1600/%25E5%259C%2596%25E7%2589%2587+3.png)
發現錯誤就會顯示項目,並且指出錯誤方向為何,如果檢查結果正確就會顯示No errors,恭喜你,編寫出一個漂亮的css檔案。 **檢查項目:** 如果不需要全部項目都檢查,可以自行加入所需要的檢查選項,假設我們只需要檢查id, box-model,可以輸入以下指令。 `csslint --rules=ids,box-model test.css

` **檢查項目:** - **ID:** `adjoining-classes` - **ID: ID">ID: ID">ID: ID">ID: ID">ID:** `empty-rules: 空規則">empty-rules: 空規則">empty-rules: 空規則">empty-rules: 空規則">empty-rules` - **ID:** `display-property-grouping` - **ID:** `floats` - **ID:** `font-faces` - **ID:** `font-sizes` - **ID:** `ids: IDS">ids: IDS">ids: IDS">ids: IDS">ids` - **ID: ID">ID: ID">ID: ID">ID: ID">ID:** `qualified-headings: 合格的小標題">qualified-headings: 合格的小標題">qualified-headings: 合格的小標題">qualified-headings: 合格的小標題">qualified-headings` - **ID:** `unique-headings: 獨特的小標題">unique-headings: 獨特的小標題">unique-headings: 獨特的小標題">unique-headings: 獨特的小標題">unique-headings` - **ID:** `zero-units: 零單位">zero-units: 零單位">zero-units: 零單位">zero-units: 零單位">zero-units` - **ID: ID">ID: ID">ID: ID">ID: ID">ID:** `vendor-prefix: 供應商的前綴">vendor-prefix: 供應商的前綴">vendor-prefix: 供應商的前綴">vendor-prefix: 供應商的前綴">vendor-prefix` - **ID:** `gradients: 梯度">gradients: 梯度">gradients: 梯度">gradients: 梯度">gradients` - **ID: ID">ID: ID">ID: ID">ID: ID">ID:** `regex-selectors: 正則表達式,選擇">regex-selectors: 正則表達式,選擇">regex-selectors: 正則表達式,選擇">regex-selectors: 正則表達式,選擇">regex-selectors` - **ID: ID">ID: ID">ID: ID">ID: ID">ID:** `box-model: 盒模型">box-model: 盒模型">box-model: 盒模型">box-model: 盒模型">box-model` - **ID: ID">ID:** `import: 進口">import: 進口">import: 進口">import: 進口">import` - **ID: ID">ID: ID">ID: ID">ID: ID">ID:** `important: 重要的">important: 重要的">important: 重要的">important: 重要的">important` - **ID:** `compatible-vendor-prefixes` - **ID:** `duplicate-properties: 重複-屬性">duplicate-properties: 重複-屬性">duplicate-properties: 重複-屬性">duplicate-properties: 重複-屬性">duplicate-properties` 至於每個項目[詳細內容說明,請參考官方網站](http://csslint.net/about.html) 更改輸出格式: 目前可以支援xml的格式,輸出格式就像jslint xml的格式。 `csslint --format=lint-xml test.css

`
[![](http://4.bp.blogspot.com/-gzJD-cRfdoM/ThUrT4pbHiI/AAAAAAAAMr8/IYD7sXt9KbE/s640/%25E5%259C%2596%25E7%2589%2587+2.png)](http://4.bp.blogspot.com/-gzJD-cRfdoM/ThUrT4pbHiI/AAAAAAAAMr8/IYD7sXt9KbE/s1600/%25E5%259C%2596%25E7%2589%2587+2.png)
**結語:** CSS是前端工程中一門很艱深的學問,例如要怎麼將CSS重新利用,或者如何將CSS架構彈性化,CSS命名方式,更不用說跨瀏覽器的問題解法,這些都屬於在前端開發中CSS會遇到的問題。 對於這麼一個好用的工具,我們是樂意看見的,所以也很開心的分享給大家,畢竟寫出有品質的CSS對於後期維護和調整都是一件好事情,利用工具將能避免的錯誤降到最低,同時提供自己的生產力,這才是共同努力的目標。
本文資料參考[Introducing CSS Lint](http://www.nczonline.net/blog/2011/06/15/introducing-css-lint-2/),在此特別註明。
[NodeJS Taiwan](http://www.facebook.com/NodeJS.tw)期待更多人的支持,希望能夠聽到你的回應及分享。

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn