CSS：在泛型点上指定对象的重要性？

Question

鉴于

<div class="foo">
    <span class="bar"></span>
</div>

我总是将CSS类定义为：

.foo
{

}
.bar
{

}

指定对象是重要的，还是最终是为了便于阅读，以便您可以快速查看编辑时要搜索的元素类型？ IE：

div.foo
{

}
span.bar
{

}

Answer 1

对元素特异性很重要。

.foo定位具有"foo"类的任何元素。

div.foo定位仅 <div>，其类别为"foo"。这意味着没有选择具有该类的其他元素。

如果你确定只有一种元素可以承载一个给定的类，我想在类选择器前面添加元素名称以提高可读性，或者如果你懒得输入它就完全不用了。

但是，如果您认为其他元素可能包含此类 - 例如，如果它是一个非常通用的名称，如left，larger-font或sep，那么这样做是个好主意你肯定你正在塑造正确的元素。

如果任何具有给定类的元素共享任何共同样式，则只需指定类选择器并在其中添加常用样式，然后指定与每个单独元素相关的任何样式。例如：

.foo { /* Generic styles for foo class */ }
div.foo { /* Styles for <div>s with foo class */ }
blockquote.foo { /* Styles for <blockquote>s with foo class */ }