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

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

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

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

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

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

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

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

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

#foo .bar {}

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

Я считаю, что использование обоих методов вместе может помочь логической организации вашего 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 и отличный способ избежать избыточности. Другими полезными методами являются использование нескольких классов для одного объекта (например, <p class = "someClass someOtherClass">), объединение идентификатора класса и идентификатора на объектах (они не являются взаимоисключающими) и использование родительских / дочерних отношений вашего HTML, чтобы избежать "избыточный класс" (например, ul.someClass li {} вместо ul li.someClass {}), когда это возможно. Удачного кодирования!

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

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

div.message div.messageheader div.name {}

или же

.name {}

или же

div.name

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

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

div.messageheader div

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

div.message div

И так далее.

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