Что знаешь про специфичность селекторов в CSS?

Специфичность селекторов в CSS

Специфичность — это механизм, который определяет, какой CSS-стиль будет применен к элементу, когда к нему подходит несколько селекторов. Это числовое значение, которое браузер использует для разрешения конфликтов между правилами.

Расчет специфичности

Специфичность вычисляется на основе четырех компонентов:

1. Встроенные стили (атрибут style) — 1000 единиц
2. ID селекторы (#id) — 100 единиц за каждый
3. Селекторы класса, атрибутов и псевдо-классы (.class, [attr], :hover) — 10 единиц
4. Селекторы элементов и псевдо-элементы (p, ::before) — 1 единица

Примеры расчета

p { color: red; } имеет специфичность 0,0,0,1

.highlight { color: blue; } имеет специфичность 0,0,1,0

#main { color: green; } имеет специфичность 0,1,0,0

div.container p.text имеет специфичность 0,0,2,2

Правило каскада

Если несколько селекторов применимы к элементу, победит селектор с наибольшей специфичностью. Например, ID-селектор всегда переопределит селектор класса.

Важное про !important

!important переопределяет все остальные декларации. Это плохая практика, так как нарушает каскад CSS и затрудняет отладку. Избегай его использования, кроме случаев, когда нужно переопределить встроенные стили сторонних библиотек.

Практические советы

1. Избегай чрезмерной специфичности — используй классы вместо ID для стилизации
2. Структурируй селекторы логично — не делай цепочки из 5+ селекторов
3. Используй препроцессоры вроде SCSS, которые помогают избежать глубокого вложения
4. CSS-in-JS и Tailwind упрощают управление специфичностью благодаря утилитарному подходу
5. Используй DevTools браузера для проверки какой селектор применяется к элементу и его специфичности

Понимание специфичности критично для эффективной работы с CSS и предотвращения каскадных конфликтов в больших проектах.