Как использовать правило !important в CSS?

1 февраля, 2022 11:58 дп 20 views | Комментариев нет

| | Комментировать запись

Правило !important в CSS дает вам возможность переопределять стили, повышая вес необходимого вам блока до максимума. Но не слишком ли велика эта сила? В этой статье мы поговорим о том, когда следует использовать правило !important в CSS

Правило !important особенное, потому что оно может переопределить естественный, стандартный каскад стилей CSS.

Читайте также: Что такое специфичность в CSS

Рассмотрим следующий код HTML/CSS в качестве примера. Как вы думаете, какого цвета будет текст?

<div>
  <h1 id="title">Sir Chompsalot</h1>
</div>

И

div h1 {
  color: blue !important;
}

div h1 {
  color: green;
}

Когда в коде есть два правила CSS с одинаковой специфичностью, обычно преимущество отдается последнему правилу. Однако в нашем примере первое правило CSS победит любые последующие правила просто потому, что оно включает правило !important. Текст будет синего цвета.

Используем ту же HTML-разметку в другом примере. Давайте попробуем конкретизировать код и добавим теги body и h1#title.

div h1 {
  color: blue !important;
}

body div h1#title {
  color: green;
}

Сможет ли наш новый блок переопределить правило !important?

Нет, не сможет! Как видите, правило !important само по себе очень мощное (порой даже слишком).

Поскольку !important противоречит ожидаемому поведению CSS, в большинстве случаев рекомендуется избегать его. Если вы используете это правило слишком часто, в будущем ваш код может вести себя неожиданно, а новым разработчикам будет трудно отладить этот CSS.

Но ведь должны быть случаи, когда его следует применить?

Случаи использования правила !important

С тех пор, как правило !important появилось в CSS, появился и некоторый консенсус в отношении его использования. Принято считать, что оно действительно полезно только в одном случае: работы с так называемым «чужим CSS».

Чужой CSS — это любой CSS, который вы не можете изменить или улучшить самостоятельно. Два практических примера чужого CSS:

  • Фреймворки и внешние библиотеки JavaScript: это касается таких популярных библиотек, как Bootstrap и Normalize. Их стили вы не можете редактировать напрямую, и иногда единственным вариантом является переопределение их CSS своими собственными правилами через !important.
  • User Styles – сервис, который был популярен несколько лет назад. Он позволяет создавать пользовательские CSS-стили и вставлять их на веб-сайты, принадлежащие другим людям/компаниям. Для приера взгляните на эту темную тему для instagram.com.

Вы, конечно, можете попробовать устроиться на работу в Instagram, чтобы исправить это жалкое недоразумение и создать встроенную темную тему для приложения. Ну а если вас не возьмут, тогда правило !important — ваш единственный и лучший вариант работы с чужими стилями.

Примечание: Похоже, даже авторы Mozilla Developer Network и CSS-Tricks согласны с тем, что правило !important на самом деле полезно только для работы с чужими CSS-файлами.

Заключение

Если вы постоянно испытываете искушение использовать правило !important, попробуйте обдумать архитектуру вашего приложения в целом, не только ваш CSS. Возможно, вы примените новые классы/идентификаторы или добавите новые теги HTML. Подобная архитектурно-ориентированная практика приведет вас к созданию высококачественного кода, который легко поддерживать.

Tags:

Добавить комментарий