Что лучше в CSS: div.something или просто .something

Question

В CSS, при установке стиля для div (например), есть ли какое-либо преимущество в том, чтобы включить div, кроме как для повышения точности сопоставления. Возможно, браузер быстрее рендерится?

то есть Is:

div.something { font-size: 1em; }

лучше чем

.something { font-size: 1em; }

по какой-либо другой причине, кроме как сузить его до только div?

(Причина, по которой я спрашиваю, состоит в том, что я недавно попал на видный сайт, который включает в себя div'ы, но большинство из них не беспокоятся)

UPDATE:

Спасибо за все ответы. Вывод заключается в том, что скорость является фактором, но не заметна, поэтому стоит игнорировать. И единый консенсус в отношении лучшей практики заключается в том, что включение тега является более понятным - общее правило должно заключаться в том, чтобы CSS был как можно более «жестким» для требуемого стиля.

Answer 1

Помимо различной семантики обоих селекторов, прочитайте это: Скорость CSS

Answer 2

если вы хотите использовать класс больше, чем просто div, вы можете просто использовать общий класс, например

.something{}

но чем более конкретен класс, тем он более заметен, независимо от порядка, т. Е .:

#someID div.something { background: green; }
div.something { background: blue;}
.something { background: red; }

Так как первый является наиболее конкретным:

<div class="something"> this will be blue </div>
<div id="someID">
  <div class="something">
    this will be green
  </div>
</div>
<p class="something">this will be red</div>

Answer 3

Добавление селектора элемента (div) к правилу увеличивает специфичность правила, делая его более важным, чем универсальный селектор класса (.something)

Это также делает ваш CSS более читабельным. Если все ваши селекторы классов не снабжены элементами, это означает, что ваши классы неоднозначны и могут применяться к любому элементу. (Это может быть намерение, но чаще это не так)

Как указывалось выше, существует компромисс скорости при использовании имен элементов, но он едва заметен.

Answer 4

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

Точно так же, если вы знаете, что стиль будет использоваться только с элементами div с этим классом, имеет смысл ограничить "область действия класса" элементами div. Это делает меньше беспорядка и делает ваши таблицы стилей более удобными для обслуживания.

Answer 5

Ну, я думаю, что единственная цель, как вы сказали, "сузить это до только div". Так что <p class="something"> должен вести себя так же или нет как div ...

Answer 6

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

Answer 7

Классы должны быть хорошо структурированными, функциональными и атомарными. Иногда полезно сузить его до element.name, если вы думаете, что у вас будут ситуации, подобные

div.highlight {
    background: #FF00FF;
}

span.highlight, p.highlight {
    color: #FF00FF;
}

В противном случае вам придется сделать что-то вроде

.highlight {
    color: #FF00FF;
}

div.highlight {
    background; #FF00FF;
    color: inherit;
}

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

Вам также нужно будет решить, когда следует избегать таких структурных зависимостей от ваших селекторов, как

div#main div.section h1.title span.link { }

Но лучше было бы написать

div#main span.link {}

Answer 8

Добавление div в начало селектора создает дополнительную зависимость между правилом css и html-документом. Внезапное изменение типа элемента также требует изменения css без уважительной причины.

Для сценария, в котором вам нужно указать тип элемента, чтобы различать два правила, я бы предложил вместо этого изменить имена классов. Не ожидайте, что div всегда будет div. Это может иметь больше смысла как p или fieldset или метка.

Избегайте ненужных зависимостей.

Правила css с низкой специфичностью являются проблемой, но добавление типа элемента не является решением. Если мой .price был изменен на div.price, вероятность непреднамеренных совпадений снижается лишь незначительно. Вам было бы намного лучше использовать пространство имен с внешним # id.

Answer 9

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

Я всегда включаю имя тега для лучшей читаемости, и я уверен, что я не буду переопределять другие правила, если они разделяют имя класса.