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

CSS-селекторы напрямую влияют на то, как быстро браузер применяет стили.

Что значит вес CSS-правила

Вес CSS-правила — это сложность селектора и количество операций, необходимых для его сопоставления с DOM.

Селекторы, увеличивающие вес

1. Глубокая вложенность

   .app .content .list li span { ... }
   

2. Универсальный селектор *

   • Применяется ко всем элементам

3. Комбинированные селекторы

   • Потомки, соседи, атрибуты

4. Селекторы по тегам

   • Менее предсказуемы, чем классы

Более лёгкие селекторы

1. Классы

2. Простые селекторы без вложенности

3. Ограниченная специфичность

Практическая рекомендация

Использовать классы как основной способ стилизации и избегать сложных каскадов.

Вывод

Простые селекторы делают CSS быстрее, понятнее и проще в поддержке, особенно в больших приложениях.