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