Что означает !important в CSS?

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

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

Если вы попробуете эту практику и посмотрите на каскадные таблицы стилей сайта, вы можете увидеть в этом коде строку, которая говорит !важный. Этот термин изменяет приоритет обработки в таблице стилей.

Каскад CSS

Каскадные таблицы стилей действительно каскад, что означает, что они расположены в определенном порядке. Как правило, стили применяются в том порядке, в котором они считываются браузером. Применяется первый стиль, затем второй и так далее.

В результате, если стиль появляется в верхней части таблицы стилей, а затем изменяется в нижней части документа, второй экземпляр этого стиля применяется в последующих экземплярах, а не первый. По сути, если два стиля говорят об одном и том же (что означает, что они имеют одинаковый уровень специфичности), будет использоваться последний из перечисленных стилей.

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

Как !important меняет приоритет

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

Чтобы сделать текст абзаца всегда красным, из предыдущего примера измените стиль следующим образом:

Теперь весь текст будет красным, несмотря на то, что значение «черный» указано вторым.Директива !important отменяет обычные правила каскада и придает этому стилю очень высокую специфичность.

Если вам абсолютно необходимо, чтобы абзацы отображались красным, этот стиль подойдет, но это не значит, что это хорошая практика.

Когда использовать !важно

Директива !important полезна при тестировании и отладке веб-сайта. Если вы не уверены, почему стиль не применяется, и считаете, что это может быть конфликт специфики, добавьте объявление !important в свой стиль, чтобы посмотреть, исправит ли это проблему, а если да, измените порядок селекторов и удалите !важные директивы из вашего производственного кода.

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

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

Пользовательские таблицы стилей

Эта директива также была введена, чтобы помочь пользователям веб-страниц справиться с таблицами стилей, которые затрудняют их использование или чтение.

Когда кто-то определяет таблицу стилей для просмотра веб-страниц, эта таблица стилей отменяется таблицей стилей автора страницы. Если пользователь помечает стиль как !important, этот стиль имеет приоритет над таблицей стилей автора веб-страницы, даже если автор помечает правило как !important.

Эта иерархия полезна для пользователей, которым необходимо задать стили определенным образом. Например, читателю с нарушениями зрения может потребоваться увеличить размер шрифта по умолчанию на всех веб-страницах, которые он использует. Умеренно используя директиву !important на страницах, которые вы создаете, вы удовлетворяете уникальные потребности своих читателей.