应该在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

回答