Как инлайн-стиль соотносится по приоритету с обычными CSS-классами?

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

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

Приоритет инлайн-стилей

Инлайн-стили, заданные через атрибут style в HTML, имеют специфичность 1000 (условно), что выше, чем у класса (10). Это означает, что любое свойство, указанное инлайн, переопределит то же свойство из класса, если только в классе не используется !important.

Пример

<div class="box" style="color: red;">Текст</div>

.box {
  color: blue;
}
// Результат: текст будет красным, так как инлайн-стиль имеет приоритет

Исключение: !important

Если в классе добавить !important, он переопределит инлайн-стиль, так как !important имеет наивысший приоритет среди всех правил, включая инлайн.

.box {
  color: blue !important;
}
// Теперь текст будет синим, несмотря на инлайн-стиль

Вывод

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