Считается ли CSS-селектор вредным (и почему)?

Question

Влияет ли селектор звезд в CSS на производительность рендеринга страницы?

Есть ли какие-то предостережения, использующие его?

* {
  margin:0;
  padding:0;
}

Answer 1

Когда дело доходит до представления, Стив Соудерс - человек:

• Влияние на производительность селекторов CSS
• Упрощение CSS-селекторов

Бесстыдная цитата из одного из докладов:

Ключом к оптимизации CSS-селекторов является фокусировка на крайнем правом селекторе, также называемом селектором клавиш (совпадение?). Вот намного более дорогой селектор: A.class0007 * {}. Хотя этот селектор может показаться более простым, браузер может сравниться дороже. Поскольку браузер перемещается справа налево, он начинает с проверки всех элементов, которые соответствуют ключевому селектору "*". Это означает, что браузер должен попытаться сопоставить этот селектор со всеми элементами на странице.

[жирный акцент мой]

Answer 2

Для некоторых свойств, использующих * может дать неожиданные результаты.

* { color: blue }
li { color: red }

Сейчас дано <li><i>text</i></li>текст будет синим!

Answer 3

Одна точка зрения заключается в том, что проблема не в том, что * это проблема производительности, а в том, что старый добрый фаворит - проблема с IE. Это влияет на IE 5, 5.5 и 6, а также на варианты Macintosh. По сути, существует нечто, называемое ошибкой выбора звезды HTML, которое применяется следующим образом:

* html

Это следует интерпретировать как отсутствие совпадения элементов, поскольку html является корневым и не может быть дочерним элементом. IE интерпретирует это как HTML.

* * body

Опять же, не должно соответствовать ни одному элементу, потому что тело не может быть элементом внука, даже если это дочерний элемент HTML. IE интерпретирует это как * тело.

* html body

Это не должно соответствовать ни одному элементу, но IE интерпретирует это как тело HTML.

С точки зрения производительности обычно считается, что применение * означает только то, что стиль применяется к каждому элементу на странице. Я редко нахожу, что это отдельная проблема - точка, в которой она станет проблемой, означает, что у вас, вероятно, слишком много разметки в любом случае. Точно так же, поскольку это относится ко всему, это означает, что вам нужно увеличить свой код, чтобы справиться с элементами, которые не должны иметь этот стиль. Как и во всем остальном, вам решать, каким должен быть компромисс и баланс.

Answer 4

Поскольку я использую одно и то же правило в каждом из моих проектов, и ни у одного из них нет серьезных проблем с производительностью, я бы сказал: нет, не так, как я знаю.