Nicholas C. Zakas:介紹CSS Lint(检测工具)

Nicholas C. Zakas:介紹CSS Lint(检测工具)

Nicholas C. Zakas近日從yahoo離職,懷著冒險精神投入了自己著迷的新項目。昨天他推出了這幾個禮拜工作的一個階段成果,CSS Lint——CSS規範檢測工具(在線工具地址:http://csslint.net),議論不發,先做翻譯工作:

介紹 CSS Lint
Introducing CSS Lint

不久之前,尼克爾沙利文和我宣佈了我們開始在一起工作。今天,我們高興地向各位推薦我們的第一個合作成果:CSS Lint。就像大家猜測的一樣,CSS Lint的目標就是幫助大家寫出更好的CSS代碼。過去的數個星期里,我們花費了大量的時間(週末和夜晚——從近期博客可知Zakas最近沒少熬夜)建設和制定編寫CSS的規則,以幫助大家寫出高效而優秀的代碼。

建立規則
The rules

首先,爲了檢測CSS,我們建立了一些規則(更多細節的解釋請點擊 CSS Lint About)。這些規則是:
解析錯誤應該被修復
默認的,CSS Lint展示了一些解析錯誤。解析錯誤經常意味著你少輸入了一個字符,以至於造成瀏覽器忽略了你書寫的css選擇器或屬性。如果CSS Lint檢測到了您的代碼里存在解析錯誤,會被視為最重要的待處理問題。
避免使用多個class選擇元素
這種情況具體類似“.foo.bar”的情況。當然技術上是允許CSS這樣寫的,但是IE7或者早期的瀏覽器對此寫法未必能夠正確解析。
移除空的css規則
任意沒有包含任何屬性的選擇器,比如.foo{}這種問題在頁面重構工作最後非常常見。清除此類空的選擇器對減少樣式信息和減小文件大小以利於瀏覽器處理方面大有益處。
精确地使用用来显示的屬性
儘管你可以在CSS選擇器裏面定義任意組CSS屬性,這些屬性中的一部份依然會在顯示過程中被忽略掉。這些不需要的屬性充斥著CSS文件之中。CSS Lint可以檢查的屬性列表如下:
當元素擁有display:inline屬性時,不能有以下屬性:width, height, margin(以及任意變化), padding(以及任意變化), float;
當元素擁有display:inline-block屬性時,不能有屬性float;
當元素擁有display:block屬性時,不能有屬性vertical-align;
當元素擁有display:table-*(如display:table-cell)屬性時,不能有屬性margin(以及任意變化)和float。
移除這些不需要的屬性可以減小文件大小和改善性能。
避免過多的浮動
使用float佈局不是一個好主意,但是有時你不得不如此去做。CSS Lint 簡單地幫你檢查你是否使用了超過10次以上的浮動,如果超過次數,CSS Lint會顯示出一個警告。使用如此多的浮動經常意味著你需要某種抽象的形式去實現佈局。
避免使用過多的web字體
web字體是隨著流行發展的,并使用@font-face進行引用和升級。但是,使用web字體也會帶來一些性能問題,諸如字體文件可能會過大而造成一些瀏覽器阻止下載它們。出於這個原因,當你在同一個樣式文件中引用超過5個web字體的時候,CSS Lint會提出一個警告。
避免使用過多的字號聲明
一個站點通常由有限數目的字體樣式構成,當然也包括字號。如果你使用了10種以上的特殊字號,你可能會想要重構這些樣式以符合標準,這些字體會幫你標記出來。
避免使用ID選擇器
id不要用作選擇器,因為它們和HTML耦合得太緊,基本沒有重用的可能。一定優先使用class作為選擇器,然後將class應用在網頁元素上。
不要為標題元素設置過多(耦合度過高)的樣式
標題元素(h1-h6)應該定義為固定不變的頂級樣式,而不是隨頁面的具體變化而變化。舉例來說,下面是一個很棒的標題:

  
    
.foo h1 { font-size : 110% }
每種標題元素在一個站點中應該保持統一的顯示樣式。
標題元素只定義一次
每個站點的標題元素(h1-h6)應該有精確的標準。如果CSS Lint發現同一個標題元素在多處進行了定義會提出警告。
使用width:100%時要小心
在一個父級元素擁有padding屬性的子元素上使用width:100%會使此元素寬度超過父級元素容器(因為子元素100%寬度的值等於父級元素的width加上左右的padding的值)。使用width:100%不是一個好主意,可以使用width:auto或者display:block來代替它。
值為0時不需要寫單位
值為0時省略書寫單位是一種簡單減小css文件大小的辦法。舉例來說,“0px”和“0”有著一樣精確的效果,所以請去掉單位再行保存吧!
各種瀏覽器專屬的css屬性也需要規範
當使用瀏覽器專屬css屬性,比如-moz-border-radius時,請確認此屬性是否也包含在標準屬性中。標準屬性應該放在瀏覽器專屬屬性之後,比如:
  
    
.foo { -moz-border-radius : 5px ; border-radius : 5px }
CSS漸變屬性需要指定所有的瀏覽器前綴
迄今為止尚沒有標準的css漸變支持,所謂的跨瀏覽器css漸變支持方案需要使用許多不同的瀏覽器私有屬性。當一些需要多個瀏覽器私有屬性支持的屬性沒有書寫完整全部瀏覽器私有屬性時,CSS Lint會提出警告。
避免看起來像正則表達式一樣的CSS選擇器
CSS3添加了複雜的屬性選擇器支持,比如“~=”,這種選擇方法的性能不敢恭維。當使用屬性選擇器時,不要使用複雜的看上去像正則表達式一樣的選擇器方案,以免付出性能上的代價。
注意遵守盒模型規則
border和padding屬性會在元素內容的周圍增加空間。由於你不能實時看到你期望的調整結果,忽略border和padding調整width和height是經常出現的錯誤。當某元素除了padding或border額外設置了width和height時,CSS Lint會提出警告。
上述規則都是使用一個非常簡單的插件模型建立的,它能夠輕鬆地改變特殊規則或者增加新的規則。打開或者關閉特殊規則的方法尚未暴露在web界面和命令行界面中,但是它受到底層API的支持,所以尋找增加規則的速度很快。

在你的項目中
In your build...

當我們高興地介紹web界面的工具時,我們也注意到大家也許想把它包含到你自己的系統架構里。爲了提供這方面的幫助,這裡有為Node.js環境準備的CSS Lint。你可以通過命令行安裝npm包的方式安裝CSS Lint:

  
    
sudo npm install - g csslint
一旦安裝成功,你可以傳遞進任意數量的CSS文件和目錄
  
    
csslint foo.css bar.css dir_of_css /
隨後此工具會和web界面的此工具一樣輸出同樣的信息。

開源計劃
Contribute

CSS Lint 是 GitHub 上的完全開源的項目。我們正在積極尋找貢獻規則、修改bug或擴展功能的開發人員。此工具的規則是可擴展的,你可以輕鬆地去掉你不需要的規則或者添加你需要的特殊規則,然後建立一個第三方版本來適應你的需要。

CSS的分析程序也是 GitHub 上的開源項目,這個程序有一些已知的問題我計劃要盡可能快地解決掉,但是它們一般符合CSS3的標準。我希望尼克爾和我能夠製作出更多這方面的工具來幫助人們書寫出更好的前端代碼。享受寫代碼的過程吧!

原文地址:http://www.nczonline.net/blog/2011/06/15/introducing-css-lint-2/

工具地址:http://csslint.net/

你可能感兴趣的:(css)