Cпецифичность выше у important или Inline-стиля

CSS Specificity: !important vs Inline-стили

Специфичность (Specificity) — это правило CSS, которое определяет, какой стиль будет применён, когда несколько селекторов нацеливаются на один элемент. Порядок приоритетов чётко определён, и Inline-стили имеют ВЫШЕ специфичность, чем !important (с одним важным исключением).

Иерархия специфичности CSS

CSS применяет стили в следующем порядке приоритета (от низшего к высшему):

1. Браузерные стили по умолчанию (самый низкий приоритет)
2. Селекторы элементов (p, div, span)
3. Селекторы классов (.class, [attribute])
4. Селекторы ID (#id)
5. Inline-стили (style="...")
6. !important — переопределяет всё остальное (но не Inline + !important)

Inline-стили без !important

<style>
  .button {
    background-color: blue !important;
  }
</style>

<button class="button" style="background-color: red;">
  Какой цвет?
</button>

<!-- Результат: красный (inline выше !important в селекторе класса) -->

Inline-стили имеют приоритет выше, чем !important, применённый в селекторе. Это потому, что Inline-стили уже имеют очень высокую специфичность.

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

CSS использует формулу для подсчёта специфичности:

specificity = (ID селекторов, классов атрибутов, селекторов элементов)

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

/* 0,0,1 - один селектор элемента */
p { color: blue; }

/* 0,1,0 - один селектор класса */
.highlight { color: red; }

/* 1,0,0 - один ID селектор */
#main { color: green; }

/* 1,1,1 - ID + класс + элемент */
#main .content p { color: yellow; }

/* 1000 условно для Inline-стилей */
style="color: purple;" /* примерно 1,0,0,0 */

/* Infinity или 10000 для !important (теоретически) */
color: pink !important; /* выше всего, кроме inline !important */

Таблица приоритетов

Тип стиля                           Приоритет   Пример
-----------------------------------------------------------
Браузерный default                  1           h1 { margin: 8px; }
Тип селектор                        2           p { color: blue; }
Класс, атрибут, псевдокласс        3           .btn, [type="text"], :hover
ID селектор                         4           #header
Inline без !important               5           style="color: red;"
Inline с !important                 6           style="color: red !important;"
!important в селекторе              5,5 (сложно) .btn { color: blue !important; }

Inline-стили vs !important примеры

Пример 1: Inline без !important vs Селектор с !important

<style>
  .danger { color: red !important; }
</style>

<p class="danger" style="color: blue;">
  Какой цвет? ГОЛУБОЙ
</p>

<!-- Inline выигрывает, даже если в селекторе есть !important -->

Пример 2: Inline с !important vs Селектор с !important

<style>
  .warning { background-color: yellow !important; }
</style>

<button class="warning" style="background-color: red !important;">
  Какой цвет? КРАСНЫЙ
</button>

<!-- Inline !important выигрывает -->

Пример 3: ID селектор vs Inline без !important

<style>
  #primary { color: green; }
</style>

<p id="primary" style="color: orange;">
  Какой цвет? ОРАНЖЕВЫЙ
</p>

<!-- Inline всё равно выше ID селектора -->

Практическое применение в Tailwind CSS

Tailwind CSS работает со специфичностью хитро:

<!-- Tailwind классы имеют одинаковую специфичность -->
<div class="text-red-500 text-blue-500">
  Будет синий (последний в файле)
</div>

<!-- Inline стиль переопределит Tailwind -->
<div class="text-red-500" style="color: blue;">
  Будет синий (inline выше)
</div>

<!-- !important в Tailwind противостоит inline без !important -->
<div class="!text-red-500" style="color: blue;">
  Будет красный (!important в Tailwind выше)
</div>

!important и когда его использовать

/* ✅ Редкие используемые случаи: -->

/* 1. Утилиты для изменения состояния */
.visually-hidden {
  display: none !important;
}

/* 2. Глобальные переопределения в библиотеках */
.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* ❌ Не используй !important для -->

/* Обычного стилирования компонентов */
.button { background: blue !important; } /* плохо -->

/* Переопределения в селекторах */
.button { color: blue !important; } /* плохо -->
.button:hover { color: red !important; } /* плохо -->

Как избежать проблем

/* ❌ Проблемный подход -->
.header { color: blue !important; }
.header .title { color: red !important; }
.header .title.active { color: green !important; }

/* ✅ Правильный подход: используй специфичность селекторов -->
.header { color: blue; }
.header .title { color: red; }
.header .title.active { color: green; }

Особенность :not() селектора

/* :not() не влияет на специфичность в старых браузерах */
p:not(.special) { color: blue; } /* 0,1,1 -->

/* В новых браузерах (CSS4) это может быть выше */
p:not(.special) { color: blue; } /* более высокая специфичность -->

Хладные факты о специфичности

// Количество селекторов НЕ влияет на специфичность
a + b + c + d + e { color: blue; } // 0,0,5 (5 элементов)

// А ID селектор весит больше любого количества классов
#main { color: blue; } // 1,0,0
.btn .btn-primary .btn-lg { color: red; } // 0,3,0

// ID выигрывает

// Inline стили считаются отдельно
<div style="color: blue;"> <!-- примерно 1,0,0,0 -->

Визуальная схема приоритета

↑ Выше специфичность
|
| Inline !important: style="color: red !important;"
| Inline: style="color: red;"
| ID селектор !important: #main { color: !important; }
| ID селектор: #main { color: blue; }
| Класс !important: .btn { color: !important; }
| Класс: .btn { color: red; }
| Элемент: p { color: blue; }
| Браузерные стили
|
↓ Ниже специфичность

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

Иерархия специфичности:

1. Inline style + !important — максимальный приоритет
2. Inline style без !important — очень высокий приоритет (выше !important в селекторе)
3. !important в селекторе — очень высокий, но ниже inline
4. ID селектор — средне-высокий приоритет
5. Класс, атрибут, псевдокласс — средний приоритет
6. Селектор элемента — низкий приоритет

Правило: Inline-стили имеют выше специфичность, чем !important в селекторах (кроме случая, когда оба имеют !important).

Лучшая практика — минимизировать использование !important и inline-стилей, предпочитая правильную структуру селекторов.