Какие селекторы влияют на вес CSS-правил?

Question

Вес CSS-правил определяется сложностью селекторов и их специфичностью. Чем длиннее и сложнее селектор, тем дороже его обработка браузером. Особенно влияют вложенные и комбинированные селекторы. Простые классы обрабатываются быстрее и проще.

YeaHub · Accepted Answer

CSS-селекторы напрямую влияют на то, как быстро браузер применяет стили.Что значит вес CSS-правилаВес CSS-правила — это сложность селектора и количество операций, необходимых для его сопоставления с DOM.Селекторы, увеличивающие весГлубокая вложенность.app .content .list li span { ... }
Универсальный селектор *Применяется ко всем элементамКомбинированные селекторыПотомки, соседи, атрибутыСелекторы по тегамМенее предсказуемы, чем классыБолее лёгкие селекторыКлассыПростые селекторы без вложенностиОграниченная специфичностьПрактическая рекомендацияИспользовать классы как основной способ стилизации и избегать сложных каскадов.ВыводПростые селекторы делают CSS быстрее, понятнее и проще в поддержке, особенно в больших приложениях.