考慮一個可在頁面上多次使用的可重用組件/小部件。它具有HTML這樣的：CSS選擇器應具有多少嵌套？
<div class='component-banner'>
<div class='component-heading'>
<p>My Widget</p>
</div>
<div class='component-body'>
<p>Blah blah</p>
</div>
</div>
它可能有像CSS：
.component-heading p { ... }
.component-body p { ... {
或，如：
.component-banner .component-heading p { ... }
.component-banner .component-body p { ... }
那麼，應該如何的CSS寫？我想知道主要是爲了可讀性和可維護性，但可能還有其他因素我沒有想到。
這真的取決於你的規格和要求，例如。無論您正在編寫的Web應用程序是否可以長期維護，都是模塊化的，因此可以與構成整體框架的其他組件輕鬆集成。在這種情況下，採用名稱空間的概念，爲您自己的模塊提供所有與CSS，JS相關的代碼，這種方式不會與未來或用戶代碼發生衝突，這是我的建議。
這是一個很好的問題。由於.component-browser是可重用組件的根源，因此我認爲有足夠的上下文來確保規則僅適用於該組件。
Declare the css rules in the most specific ways as needed
如果有兩個（或更多）衝突的指向同一元素的CSS規則，有some basic rules一個瀏覽器如下，以確定哪一個是最特殊的，因此勝出。
嵌套選擇的一組 的實際specificity需要一些 計算。基本上，你給每個 id選擇（「#whatever」）的 值100，每類選擇 （「.whatever‘）的值爲10，每 HTML選擇器（’什麼」）一個的 1的值。然後你將它們全部添加到特定值中。
這樣：
.component-banner .component-heading p { color:green }
.component-heading p { color:red }
p { color:blue }
的.component-banner .component-heading p變成綠色，不分先後順序的。
#test p {color:orange}
body div p { color:green }
div p { color:red }
p { color:blue }
的#test p變爲橙色，無論的量級。
關於特異性的答案在正確的軌道上。這種故意缺乏特異性是面向對象的CSS（oocss）方法的一部分，該方法鼓勵使用類選擇器而不是ID選擇器，並以更模塊化的方式構建，大量使用同一HTML元素上的多個類，並重用類。另外鼓勵的是最大限度地減少！important的使用（它打破級聯並降低可維護性）並留下多餘的HTML元素（您已經在某種程度上已經在做，即使用.component標題而不是div.component標題）。
儘可能地遵循這種方法，可以通過降低對具有多個ID或類的真正長選擇器的需求，大大簡化您的CSS。
你考慮選擇的渲染時間？ ID是最有效的，*是最少的。
http://css-tricks.com/efficiently-rendering-css/
這可能是，就像你說的， 「等因素的影響[你]都沒有想到的。」
盡你所需，但沒有更多。 – Phrogz 2011-01-28 22:07:53
從SO CSS文件中：`.edit-suggestion .options a.action.full-diff`，`＃synonyms同義詞表td .dim .item-multiplier` ...但是，大多數選擇器都有一個或兩個級別。 – 2011-01-28 22:21:37