Large CSS vs Large HTML

Question

將HTML限制爲少數類和ID並將HTML大小保持在低位更好，或者使用大量嵌套CSS代替更好。

這些都是我能想到的優點。

使用一些嵌套的CSS規則的優點：

• 較小CSS文件
• 在CSS中的元素
• 可能更快的渲染時間在CSS（不知道這一點）

高效靶向

使用大量嵌套CSS規則的優點：

01整個網站
• CSS
• 小HTML大小被緩存
• 更好地組織代碼（我使用LESS）

感謝。

Answer 1

我認爲任何一天大型HTML大型CSS。您的CSS將被緩存，所以您的網頁將以更小的HTML加載得更快。更多的類意味着更多的靈活性，但是你會驚訝於你可以使用CSS選擇器完成多少。我唯一一次看到將HTML擴充爲有用的東西就是SEO;有關我的意思的例子，請參閱microformats。準確性不應該成爲一個問題（即使你考慮到人爲錯誤，你應該能夠立即發現你的錯誤）。就速度而言，我懷疑它對性能有影響。記住所有的渲染都是在客戶端完成的，所以你不必擔心服務器會因爲更復雜的CSS選擇器而做更多的工作。

Answer 2

肯定與WEX重新CSS緩存（更多的CSS，少HTML）

至於你的問題上

同意豈不是更好我的HTML限制在儘可能少的class和id可能和保持HTML小尺寸或更好地使用嵌套CSS規則很多 。

從渲染性能角度來看，這實際上是更有益的使用，因爲瀏覽器引擎平（一個級別）選擇匹配它們從右到左，即寧願.list-item-first到ul li:first-child - 這是來自maintanance角度上不可控的，但導致性能略微提高。同時，你很少看到合理大小的樣式表中的差異，所以它更偏向於偏好。

More on css rendering performance

Answer 3

我強烈反對使用大量的nesting與你的CSS ..一個問題的CSS嵌套的是，它使你的CSS代碼少了很多可重複使用。我建議你看一看this頁解釋面向對象的CSS（OOCSS），它有這個關鍵概念的概念：

「很少使用位置相關的樣式」。無論你放在哪裏，一個物體都應該看起來一樣。因此，而不是造型特定<h2>與.myObject h2 {...}，創建和應用類描述問題的<h2>，像<h2 class="category">.*

要知道爲什麼使用CSS選擇器可以限制..看到我的回答here的更詳細的討論。