Есть ли преимущество в использовании очень специфических селекторов в CSS?

Question

Я понимаю, что в jQuery выгодно быть более конкретным при использовании селекторов, чтобы jQuery не приходилось обходить весь DOM, чтобы найти то, что вы ищете. Например, $('span.description') лучше, чем просто $('.description'), если я знаю, что класс description применяется только к <span> элементам.

Это тоже касается CSS? Есть ли какое-то конкретное преимущество для меня, чтобы использовать span.description { } вместо .description { }? Я думаю о скорости, оптимизации и т. Д. Сохраняю ли я браузер какую-либо работу, сообщая ему, где именно искать?

Answer 1

Это верно в CSS -

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

Google Code - оптимизировать отображение в браузере

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

Answer 2

Читайте о специфике CSS - это самая важная причина, чтобы быть более или менее конкретным с вашим CSS.

http://www.w3.org/TR/CSS2/cascade.html#specificity

Поскольку производительность браузера в значительной степени не является проблемой (за исключением случаев, когда вы упоминали в jquery), мое руководство должно быть конкретным, когда вы контролируете приоритет или когда вы хотите сделать что-то более читабельным ваш css. Переопределение может усложнить повторное использование селекторов CSS и усложнить задачу.

Редактировать

Это выглядит как дубликат:

Вопрос об эффективности CSS

Answer 3

это всегда зависит от вашего количества HTML-кода и структуры. Это определенно хорошая идея, особенно использовать идентификаторы и соответствующие селекторы. (т.е. #nav li вместо li.nav). Поскольку браузер сначала загружает HTML, а затем применяет CSS, который вам очень помогает.

Здесь говорится, что когда речь идет о чистом CSS (без jquery), разницу в скорости в настоящее время нелегко различить, потому что механизмы рендеринга высоко оптимизированы - особенно когда речь идет о применении CSS. Поэтому обычно это не должно иметь значения.

Answer 4

Более конкретное правило имеет приоритет над менее конкретным правилом, поэтому:

span.myclass {}

имеет приоритет над:

.myclass {}

(независимо от порядка, в котором были объявлены правила)

Answer 5

Насколько я знаю, насколько специфичны ваши селекторы, очень мало влияет на производительность.

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