應該在CSS名稱中包含層次結構嗎？

在包含CSS名稱中的層次結構方面，「最佳實踐」是什麼？ EG：，假設我們有以下的html：應該在CSS名稱中包含層次結構嗎？

<div class="foo"> 
<div class="$className2"> 
<div class="$className3">123 
</div> 
</div> 
</div>

於$ className2包括 'foo-' 作爲前綴，$ className3包括 'foo-' 和$ className2作爲前綴？或者父類名稱不應包含在子類名稱中？

2011-09-23 archmeta

很簡單，你是在重複使用這些類名，還是你會重複使用這些類名，而不是在相同類型的結構中？如果不是，那麼父母就不必限制它。但是，如果你是這樣的話，通過包含它們的父節點選擇器明確指出哪個子元素是一個好主意。

2011-09-23 18:53:43

不需要包含父類的名稱。 CSS選擇器將處理您需要的任何父級格式。

一個類，應該描述你正在使用的內容的類型。例如，

<div class="sidebar"> 
<div class="error"> 
</div> 
</div>

您可能希望具有特定於錯誤類的格式，即不考慮側邊欄類。在要格式化錯誤類的事件所特有的側邊欄，CSS選擇器可以處理爲你

.sidebar > .error

或

.sidebar .error

2011-09-23 18:55:36

一兩件事，我做的大部分時間是前面加上一個下劃線子類 - 我會用下面的CSS從您的示例HTML：

.foo { ... } 
.foo ._$className2 { .. } 
.foo ._$className3 { .. }

在這種情況下，「.foo」此時已經將包裝有點像‘富組件’。而且每個只在這個包裝內使用的子類（意味着它本身沒有意義）被預先加下劃線。這可以讓你的css保持乾淨，並且可以很容易地查看某個類是否打算應用於頁面上的任何位置的元素，或者是否應該顯示在特定的上下文中。

2011-09-23 19:13:39 Niko

回答