Считается ли 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 интерпретирует это как * body.

* html body

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

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

Answer 4

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