css: я должен ограничить использование универсальных селекторов (* .classnames против a.classname)?

Question

У меня вопрос по поводу селекторов CSS.

Скажите, что у меня есть следующий HTML

<div class="message">
  <div class="messageheader">
    <div class='name'>A news story</div>
  </div>
</div>

В css я мог бы сослаться на class под названием name, например,

div.message div.messageheader div.name {}

или

.name {} /* ie *.name{} */

Один путь лучше другого?

Я понимаю, что если у меня есть дополнительный «экземпляр» класса с именем name, то есть

<div class="message">
   <div class="messageheader">
      <div class='name'>A news story</div>
   </div>
</div>

<a class='name'>A news story</div>

Я мог бы использовать div.message div.messageheader div.name {} для ссылки на первый экземпляр и a.name {} на второй экземпляр, но меня интересует только начальный сценарий.

Answer 1

Если вас интересует только начальный сценарий, используйте .name - это нормально. На самом деле, лучшая практика с CSS - всегда начинать с более общего подхода и фокусироваться на ходу.

Кроме того, такие вещи, как div. *, Не нужны, если у вас нет одного и того же класса в другом элементе, и вы хотите, чтобы они отличались. Если вы вкладываете классы, это еще более ненужно. .messageheader .name предложит такой же таргетинг.

Помните, что CSS означает каскадирование. Если вы сделаете все так целенаправленно, вам придется переопределить каждый элемент.

Answer 2

Я согласен с ответом Джереми Б., но хочу кое-что добавить.

В вашем примере вы можете ссылаться на класс с именем name, например,

div.message div.messageheader div.name {}

или

.name {}

или

div.name

Первый имеет смысл, только если вы хотите переопределить менее конкретное правило . Второй является общим. Третий, как вы сказали, хорош, если вы хотите, чтобы применял разные стили к разным элементам, используя один и тот же класс (но в этом последнем случае есть большая вероятность, что вы сделали что-то не так при назначении классов).

Я знаю, что это только пример, но в вашем коде я вижу слишком много классов. Помните, что по возможности полезно использовать селекторы элементов. То есть если вы хотите придать некоторый стиль этому div или всем div внутри div с классом «messagehader», вы должны использовать этот селектор:

div.messageheader div

Вы также можете удалить заголовок сообщения класса и выбрать этот div с помощью:

div.message div

и т. Д.

Очевидно, вам нужно будет использовать некоторые классы на своей странице, но не давать класс всем. Во многих случаях нет необходимости.

Answer 3

На мой взгляд, это действительно зависит от вас. Один путь короче, а другой более точный, хотя и полагается, что разметка остается в основном той же. Если это сложный проект, то, возможно, более конкретный подход - правильный путь. В противном случае, будь немного более расслабленным. Попробуйте найти баланс.

Помните, однако, важно использовать каскад в CSS. Зачем добавлять классы и идентификаторы к вещам, которые на самом деле не нужны?

Answer 4

В целом специфичность благоприятна, но на уровне иерархии больше, чем уровень единицы. Под этим я подразумеваю, что 'div' является излишним и, возможно, разрушительным (см. Следующий абзац), но #foo .bar .baz - хорошая практика.

В общем, я пытаюсь заставить людей задуматься о CSS в терминах ОО. Если вы определяете стиль как класс, убедитесь, что он ведет себя как класс. В этом случае утверждение div.foo вместо .foo похоже на определение подкласса. Это нормально , если вы намерены . Всегда всегда думайте о потенциальных проблемах с будущей наценкой. В идеале вы хотите, чтобы будущий код автоматически наследовал именно то, что ему нужно, не загрязненный неопределенным утверждением CSS и не пропускающий что-либо из-за слишком конкретного утверждения.

На практике я нахожу вас обычно в форме:

#foo .bar {}

Резервирование классов корневого уровня только для самых общих стилей.

Answer 5

Я считаю, что совместное использование обоих методов может помочь логической организации вашего CSS. Используйте универсальный «.class» для свойств, которые вы хотите применить ко ВСЕМ элементам этого класса, и более конкретный «p.class» для объекта определенного типа класса. Например:

<style>
div.product {
float: left;
padding: 1em;
border: 1px solid blue;
}
.price { 
color: #009900;
}
p.price {
text-align: right;
}
</style>

<div class="product">
    <p>Lorem ipsum <span class="price">&pound;8.99</span> dolor sit amet.</p>
    <p class="price">&pound;5.99</p>
</div>

Ответ на ваш вопрос заключается в том, что в любом случае лучше, они просто делают разные вещи. Обязательно используйте оба! Использование возможностей различных типов селекторов - важный аспект хорошего CSS и отличный способ избежать избыточности. Другими полезными методами являются использование нескольких классов в одном объекте (например,

), объединение идентификатора класса и идентификатора объектов (они не являются взаимоисключающими) и использование родительских / дочерних отношений вашего HTML, чтобы избежать "превышение класса" (например, ul.someClass li {} вместо ul li.someClass {}), когда это возможно. Удачного кодирования!