Скорость / избыточность селекторов в CSS [закрыто]

Question

У кого-нибудь есть информация о скорости выбора браузера в CSS?Другими словами, как разные селекторы сравниваются друг с другом (в одном браузере).

Например, я часто вижу (и пишу) подобный код:

#content #elem { ...rules... }

Но поскольку эти элементы являются уникальными идентификаторами, мне понадобится только #elem, верно?Это заставило меня задуматься о том, может быть, для браузеров быстрее использовать более сложные селекторы - я думаю, что браузер может найти #content и знайте, что смотреть нужно только в этот элемент, ни куда больше.

Другим примером может быть table tr td .class против table .class

Answer 1

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

С точки зрения использования более специфических селекторов - я думаю, что это хорошая практика по нескольким причинам:

<Ол>

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

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

То, о чем вы говорите, может иметь значение при использовании библиотек JavaScript, таких как jQuery, - поскольку им приходится анализировать весь документ самостоятельно, но я, конечно, никогда не замечал каких-либо различий в скорости.

Answer 2

Здесь - некоторая информация, которую я получил после быстрого поиска.

Answer 3

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

#content #elem {color: black;} 

и

#elem {color: red;}

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

Answer 4

Не для того, чтобы быть мудрым, но время, которое у вас ушло на написание этого вопроса, вероятно, превышает сумму всех затрат времени всех пользователей, которые когда-либо посещают ваш сайт (в отношении #id # id2 vs # id2) , Так что время написать этот ответ ....

Вы можете проголосовать за меня сейчас:)

Answer 5

Рекомендации Mozilla могут быть интересными.

Answer 6

<Ол>

Всегда есть выбор между эффективностью и удобочитаемостью. Конечно, таблица tr td .class наиболее читабельна, но очень неэффективна и может быть упрощена - видели ли вы где-нибудь (допустим допустимую разметку) tr без table или td без tr ? По крайней мере, вы можете прокомментировать лишнюю часть, например:

/* table tr */ td .class {
    color: #ccf;
}

Иногда, как упоминали другие, вам нужна дополнительная конкретность, например, ваш #elem должен быть красным везде, кроме случаев, когда в определенном контексте #content .

#elem {
    /* usually red */
    color: red;
}

#content #elem {
    /* except when in specific context */
    color: black;
}