一、為什么我要測試CSS的性能

這是背景：

我是OOCSS(譯者注：面向對象CSS)的忠實粉絲。但是最近工作，我一直使用Compass,SASS(譯者注：SASS使CSS函數化，有諸如變量，嵌套，混合，繼承等特性，需Ruby支持).我有時候感覺到OOCSS和SASS似乎有點古怪。我的一個朋友把我介紹給了Chris Eppstein(Compass的創建者)，我們就SASS中的@extend方法進行了探討。所以我決定創建一個CSS測試頁面，用一種很原生態的方式來顯示是否SASS的@extend方法和CSS的OOCSS方法之間有著顯著的性能差異。

譯者補充，下圖為SASS@extend繼承實現的示例截圖：

關于OOCSS，Nicole Sullivan有份不錯的ppt教案，具體見下面：

Object Oriented CSS

查看更多Nicole Sullivan的presentations.

本想翻譯下的，結果此幻燈片被作者設置為不能下載，要是自己翻譯并重新制作份幻燈片，是騰不出那么多時間的，所以作罷。其有兩個主要原則：

* 分離結構和皮膚
* 分離容器和內容

此原則多少與自己“CSS樣式分離之再分離”一文中提到的一些思想類似。

二、測試如何工作的

此測試制造了差不多2000個box，所有的box都有一個獨一無二的背景（樣式）。有幾種格式用來測試（見下面的鏈接），你可以逐個更改以測試器速度的差異。只要根據您的意愿點擊相應的鏈接。

此測試用了一小段腳本，此段腳本來自Steve Souder的博文：Performance Impact of CSS Selectors(CSS選擇器的性能影響)

Steve的文章可以說是進入了CSS選擇器性能更細致的一個境界，非常值得閱讀。

三、CSS格式

1. OOCSS (似乎挺快的)，雙class，如：class="box box-#"，基本的CSS樣式在class box中，然后直添加背景樣式在唯一的class中。

2. Sass @extend (速度不確定)，一個class，如class="box-3"，然后在基本規則上創建一個多選擇器規則，如.box-1, .box-2 {generics}。

3. 囂張的CSS 添加所有的基本CSS到一個唯一的class上，沒有“瘦身”。

4. 使用ID選擇器 雖然我不建議使用ID，但是用來測試還是值得一試的。

5. 沒有CSS 很好的底線測試

代碼示例？

OOCSS樣式:一個主class，包含所有的共同規則，然后一個獨特的規則使用其他class

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表