我應該讓我的CSS更容易閱讀或優化速度

Question

當我在一個小型網站上工作時，我決定使用PageSpeed擴展來檢查它們是否可以提高網站加載速度。然而，當我告訴我我的CSS選擇器的使用「效率低下」時，我感到非常驚訝。我總是被告知應該儘量減少HTML中的class屬性的使用，但是如果我正確理解了PageSpeed告訴我的是什麼，瀏覽器直接匹配類名稱會更有效率。它對我有意義，但這也意味着我需要在我的HTML中放置更多的CSS類。它使我的.css文件更難閱讀。

我通常傾向於以紀念我的CSS是這樣的：

#mainContent p.productDescription em.priceTag { ... } 

，這使得它容易閱讀：我知道這會影響到的主要內容，它影響一個段落標記的東西（所以我不會開始將各種佈局代碼放入其中）描述產品及其需要強調的事物。不過看起來我應該將其改寫爲

.priceTag { ... } 

刪除關於樣式的所有上下文信息。如果我想使用不同格式的價格標籤（例如，一個在段落中的側邊欄和一個列表），我需要的，因爲我似乎使用類似的東西

.paragraphPriceTag { ... } 
.listPriceTag { ... } 

這真的激怒了我在我的課程中複製HTML的語義。這意味着我不能把普通的款式在不合格

.priceTag { ... } 

，因此我需要複製的風格在這兩個CSS規則，使其難以做出改變。 （雖然我可以使用多個類選擇器，但IE6不支持它們）

我相信爲了速度而難以閱讀代碼從未被認爲是一種非常好的做法。當然，除非它很重要。這就是爲什麼人們使用PHP/Ruby/C＃等代替C/assembly來編寫他們的網站。編寫和調試更容易。所以我想知道是否應該堅持使用少量的CSS類和複雜的選擇器，或者如果我爲了速度而去優化路徑並刪除我喜歡的CSS選擇器？

PageSpeed是否超過最高推薦？在大多數現代計算機上，它甚至會有所作爲嗎？

Answer 1

我應該讓我的CSS更易於閱讀或優化速度嗎？

你應該這樣做。

你應該編寫你的CSS，以便它可讀，如果你想摺疊它，使用一個工具來自動生成「生產CSS」。

因此，你應該使用可讀的塊，並且發佈的文件應該很小。

在具體選擇

#mainContent p.productDescription em.priceTag { ... } 

方面只有當你有

p.productDescription em.priceTag { ... } 

或者

em.priceTag { ... } 

在你不想影響其他地方增加價值 - 例如，如果您有一個「#secondaryContent p.productDescription em.priceTag」，那麼您不想將樣式應用於該樣式。

所以，如果你想使用

em.priceTag 

並擁有適用於所有的規則，你會真正看到任何性能問題（的區別是大致相同的文件大小的差異，你無論如何保存通過減少規則中的字符）。但是，不要因爲你不想編寫適當的規則而污染你的HTML。

Answer 2

我個人發現複雜的選擇器比較容易混淆長期，只要確保給出合適的名稱即可。

長選擇器將會對性能產生影響，因爲它需要每次走DOM來分析進程。我看到它的方式有時間和地點，但它是一個例外，而不是標準規則。

Answer 3

定義您的優先級。

1. 可讀性
2. 效率
3. 速度

如今，除了在一個真正的特定謨和複雜的頁面，你不需要混淆你的代碼，以加快速度。

首先想到可維護性。

順便說一句，使用#id是一個很好的實踐，既可讀性又提高速度，因爲它不需要遍歷所有DOM來找到它。同樣適用於你。