Vindicar
@Vindicar
RTFM!

Следует ли ограничивать CSS стили с помощью id предка?

Есть веб страница, на которой присутствует десятка два стилей вида
#turns li.event-nextRound {
	text-align: center;
	font-weight: bold;
}

Иными словами:
  • Стилизуемые элементы находятся внутри элемента с id="turns".
  • #turns содержит порядка 100-200 дочерних элементов, как непосредственных детей, так и вложенных потомков.
  • Классы этих элементов не встречаются вне #turns.


Вопрос №1: будет ли выигрыш в скорости рендеринга, если я уберу #turns из селектора?
С одной стороны, эти стили потенциально смогут применяться для любых элементов страницы.
С другой стороны, для каждого подходящего элемента браузеру не придётся проверять, действительно ли он является потомком #turns.

Вопрос №2: есть ли простой способ замерить скорость рендеринга, чтобы я мог сам решить, есть ли эффект?
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
ThunderCat
@ThunderCat Куратор тега CSS
{PHP, MySql, HTML, JS, CSS} developer
Существенную разницу в скорости рендера вы сможете заметить разве что на пентиум 200 без ммх. В остальных случаях это последнее что нужно оптимизировать, так как больше влияет глубина вложенности дом дерева, нежели как будут заданы те или иные стили.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
cannibal_corpse
@cannibal_corpse
Верстальщик руками
То, какие стили вы пишете селектору влияет на перфоманс, а то какому селектору - не влияет.
Если волнует читаемость - используйте препроцессоры и методологию.
Не нравится БЭМ? Посмотрите в сторону AtomicCSS (tailwind и прочее)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы