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

Question

[Vindicar]

Есть веб страница, на которой присутствует десятка два стилей вида

#turns li.event-nextRound {
	text-align: center;
	font-weight: bold;
}

Иными словами:

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

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

Вопрос №2: есть ли простой способ замерить скорость рендеринга, чтобы я мог сам решить, есть ли эффект?

Comments

[Антон Литвиненко]

не стоит использовать id в селекторах, этим сильно повышается специфичность. Хотите scope наследуйтесь от класса. Везде где можно убрать лишний селектор стоит это сделать, например вместо ul.list li a предпочтительно написать .list a

Answer 1

[ThunderCat]

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

Comments

[Vindicar]

Т.е. можно выбирать вариант который проще с т.з. код-стайла?
Короткие селекторы более читаемы, имхо.

Answer 2

[Ilya Olovyannikov]

То, какие стили вы пишете селектору влияет на перфоманс, а то какому селектору - не влияет.
Если волнует читаемость - используйте препроцессоры и методологию.
Не нравится БЭМ? Посмотрите в сторону AtomicCSS (tailwind и прочее)