Есть ли преимущество в использовании очень специфических селекторов в 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

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

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

Answer 5

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

span.myclass {}

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

.myclass {}

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