# Что такое специфичность CSS?
Специфичность CSS — это алгоритм, по которому браузеры определяют, какие значения свойств применять к конкретному элементу. По сути это математический счёт, который говорит браузеру «насколько специфичным» является правило.Если два правила имеют разные уровни специфичности, правило с большим весом побеждает, независимо от порядка их написания. Если оба имеют одинаковый вес, побеждает последнее объявленное в исходном коде.# Как вычислить специфичность CSS
Специфичность вычисляется на основе трёх категорий, образующих трёхколонный вес, часто выражаемый как (A, B, C):- Колонка A (ID): Подсчитывает количество уникальных идентификаторов. Пример:
#headerсчитается как 1 в колонке A. - Колонка B (Классы, атрибуты и псевдо-классы): Подсчитывает все классы (
.button), атрибуты ([type="text"]) и псевдо-классы (:hover). - Колонка C (Элементы и псевдо-элементы): Подсчитывает все HTML элементы (
div,h1) и псевдо-элементы (::before).
# Золотое правило: Нет переноса между колонками
Правило со специфичностью (0,50,0) никогда не будет более специфичным, чем правило (1,0,0). Один ID побеждает бесчисленное количество классов. Колонки никогда не переполняются друг в друга.
# Проблема с !important и архитектурой BEM
Директива!important является исключением из правил специфичности. При использовании это объявление автоматически переопределяет любое другое. Это считается плохой практикой, потому что разрушает естественный каскад.Чтобы избежать войн специфичности в крупных проектах, методология BEM рекомендует использовать только селекторы классов с одинаковой глубиной, искусственно сохраняя специфичность плоской на уровне (0,1,0).