Что такое специфичность CSS?

Слушайте, бывало у вас такое: сидите вы, верстаете сочный макет, прописываете в стилях «тот самый» оттенок бирюзового для кнопки, а она — хоть ты тресни! — остается уныло-серой? Вы и так, и эдак, и кэш чистите, и по монитору стучите, а коду хоть бы хны. Скорее всего, вы просто столкнулись с «серым кардиналом» верстки. Так всё же, что такое специфичность CSS и почему без понимания этой штуки ваша жизнь превратится в бесконечную борьбу с ветряными мельницами?

Если говорить по-простому, это такой хитрый механизм, с помощью которого браузер решает, какое именно правило применить к элементу, когда на него претендуют сразу несколько селекторов. Представьте себе иерархию в какой-нибудь серьезной конторе. Директор сказал одно, начальник отдела — другое, а коллега нашептал третье. Кого вы послушаете? Вот и браузер постоянно занимается таким взвешиванием авторитетов.

Из чего складывается вес, или еще раз о том, что такое специфичность CSS?

Тут не нужно быть математиком от бога, но прикинуть в уме придется. У каждого типа селектора есть своя «убойная сила». Весь этот винегрет обычно представляют в виде четырех чисел, разделенных запятыми.

Во-первых, это инлайновые стили. Те самые, что пишутся прямо в HTML-теге через атрибут style. Это, друзья мои, тяжелая артиллерия. Они бьют почти всё на своем пути. Во-вторых, идут идентификаторы (ID). Они как VIP-персоны в ночном клубе: редкие, гордые и очень весомые. Следом за ними выстроились классы, псевдоклассы и атрибуты — это крепкий средний класс, рабочие лошадки нашей верстки. И в самом хвосте плетутся обычные селекторы тегов.

Знаете, в чем главная фишка? Сколько бы вы ни наплодили селекторов тегов, один-единственный класс их переплюнет. Математика тут не десятичная, так что сто тегов не станут сильнее одного класса. Удивительно, правда?

Тонкости и подводные камни

Рассматривая вопрос, что такое специфичность CSS, нельзя не упомянуть нашего «запретного плода» — !important. Эх, сколько же дров наломали новички этой командой! Это как ядерный чемоданчик: если бахнуть, то перекроет всё остальное. Но пользоваться им стоит только в самом крайнем случае, когда вы точно понимаете: других путей нет. Иначе через неделю ваш код превратится в непролазные джунгли, где никто ни за что не отвечает.

Кстати, селектор * (звездочка), а также комбинаторы вроде + или > на специфичность вообще никак не влияют. Они просто помогают найти путь к элементу, не добавляя ему лишнего «жирка».

Как не сойти с ума?

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

В общем, специфичность — это не страшилка из учебника, а логичная система приоритетов. Разобравшись в ней один раз, вы перестанете гадать на кофейной гуще, почему шрифт вдруг стал курсивом. И помните: если что-то не работает, не спешите винить браузер — возможно, вы просто случайно перевесили чашу весов в другую сторону? Удачного кода и пусть ваши стили всегда попадают точно в цель!