CSS модификатор !important

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

На практике это означает, что если с каким-то свойством использован модификатор !important, то это свойство будет ВСЕГДА переопределять аналогичные свойства, определенные для этого элемента!

Давайте посмотрим на следующий пример:

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

В приведенном примере фон всех трех абзацев будет красного цвета несмотря даже на то, что у селектора идентификатора и селектора класса более высокая специфичность. Модификатор !important переопределяет свойство background-color в обоих случаях.

Важное о !important

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

Вот простой пример. Глядя на этот CSS код совсем не понятно, какой цвет считается более приоритетным:

#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}

Совет: Просматривая исходные коды CSS, вы будите встречать модификатор !important. Тем не менее, не стоит использовать его, пока не возникнет абсолютная необходимость.

Пара случаем оправданного использования !important

Одна из причин использования модификатора !important это, когда необходимо переопределить стили, которые по другому переопределить нельзя. Это может понадобиться, например, когда вы работаете с какой-нибудь Системой управления контентом (CMS) и не можете редактировать код CSS. Тогда вы можете определить пользовательские стили, которые будут переопределять стили CMS.

Другая причина использования модификатора !important: Допустим, вам нужно создать особый вид для всех кнопок на странице. Вот, у кнопок будет серый фон, белый текст, некоторые поля и рамка:

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

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

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Чтобы "заставить" все кнопки всегда иметь один и тот же внешний вид, мы можем добавить модификатор !important к свойствам кнопки:

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}

#myDiv a {
  color: red;
  background-color: yellow;
}