✔Декларация !important в CSS - «Верстка»

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

Как использовать?

Декларация !important - это ключевое слово, которое может быть добавлено в конце любой пары ключ/значение.
Например:

p {margin-left: 5px !important
p {margin: 10px 5px 0 10px !important

Каково её влияние?

CSS присваивает вес каждому правилу, в зависимости от его выборки и позиции в исходном элементе. Это
определяет стиль HTML-элемента.

Если появляются два конфликтующих правила, то применяется следующий подход для его разрешения:

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


• 
  Специфика - если два или более правил имеют отношение к одному и тому же свойству, одного и того же элемента,
  а также один уровень важности и один источник, то будет применено правило более конкретного селектора.
  


• 
  Порядок - если у двух правил один вес, то будет применено последнее.
  

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

В следующем примере, второй селектор является более конкретным и объявлено в конце, но использоваться будет
именно первое правило, поскольку в нём используется декларация !important, которое заменяет все остальные правила.

p {margin-left: 5px !important
#id p {margin-left: 10px

Когда необходимо использовать !important?

Несколько примеров и тонкостей использования:

IE 5/6

Internat Explorer 5 и 6 игнорируют !important, если одно и тоже свойство объявлено в правиле дважды.

p {
margin-left: 5px !important;
margin-left: 10px

Internat Explorer 5 и 6 применят значение 10px, тогда как остальные браузеры - 5px.

Замена inline-стилей

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

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

Например, пользователь хочет вывести текст красным цветом

<div id="content"><p style="color:red">Some text</p></div>

Однако автор сайта может переопределить этот стиль, чтобы текст всех параграфов выводился, например, чёрным цветом:

#content p {color:black !important

Стилевые файлы для печати

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

Обратная сторона

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

В CSS1 декларация !important автора сайта имела больший приоритет над пользовательским файлом стилей. Это правило
изменилось в CSS2, то есть пользователь всегда может переопределить внешний вид сайта.

Заключение

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