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 */ }