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% }
.foo { -moz-border-radius : 5px ; border-radius : 5px }
在你的項目中
In your build...
當我們高興地介紹web界面的工具時,我們也注意到大家也許想把它包含到你自己的系統架構里。爲了提供這方面的幫助,這裡有為Node.js環境準備的CSS Lint。你可以通過命令行安裝npm包的方式安裝CSS Lint:
sudo npm install - g csslint
csslint foo.css bar.css dir_of_css /
開源計劃
Contribute
CSS Lint 是 GitHub 上的完全開源的項目。我們正在積極尋找貢獻規則、修改bug或擴展功能的開發人員。此工具的規則是可擴展的,你可以輕鬆地去掉你不需要的規則或者添加你需要的特殊規則,然後建立一個第三方版本來適應你的需要。
CSS的分析程序也是 GitHub 上的開源項目,這個程序有一些已知的問題我計劃要盡可能快地解決掉,但是它們一般符合CSS3的標準。我希望尼克爾和我能夠製作出更多這方面的工具來幫助人們書寫出更好的前端代碼。享受寫代碼的過程吧!
原文地址:http://www.nczonline.net/blog/2011/06/15/introducing-css-lint-2/
工具地址:http://csslint.net/