Использование !important в CSS

Octane, 09.08.2008

Использование !important в CSSВ статье пойдет речь о том, какими способами можно избежать использования «!important» в CSS.

Итак, почему же стоит отказаться от «!important»?

Во-первых, этот параметр не поддерживает IE6. Во-вторых, в некоторых браузерах могут возникать конфликты с пользовательскими таблицами стилей. В-третьих, это лишний код, без которого, в большинстве случаев, можно обойтись.

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

XHTML

<div id="content">
  <p>Первый абзац</p>
  <p class="p1">Второй абзац</p>
  <p class="p2">Третий абзац</p>
</div>

CSS

#content p {
color: #009;
}
.p1 {
color: #900;
}
.p2 {
color: #090 !important;
}

Результат

Первый абзац

Второй абзац

Третий абзац

Получилось, что цвет текста, описанный в классе «p1», не перекрыл значение цвета, заданное через идентификатор родительского контейнера «#content» для дочерних элементов «p». Это произошло, потому что приоритет стилей, заданных через идентификатор объекта, выше, чем приоритет класса. В случае с «p2» для параметра «color» задано значение «!important», что дает ему высший приоритет, поэтому мы видим в третьем абзаце текст зеленого цвета.

Представим, что нам требуется таким образом перекрыть много CSS-параметров, тогда получится что-то вроде этого:

#content p {
margin: 0 12px;
padding: 12px 0;
color: #009;
font-size: 14px;
line-height: 18px;
text-align: center;
}
.p2 {
margin: 0 24px !important;
padding: 24px 0 !important;
color: #090 !important;
font-size: 12px !important;
line-height: 24px !important;
text-align: left !important;
}

Довольно громоздко и некрасиво получилось, не так ли? Давайте подумаем, как обойтись без «!important». Мы знаем, что стили идентификатора перекрывают оформление класса, поэтому и запишем все через идентификатор «#content»:

#content p {
margin: 0 12px;
padding: 12px 0;
color: #009;
font-size: 14px;
line-height: 18px;
text-align: center;
}
#content .p2 {
margin: 0 24px;
padding: 24px 0;
color: #090;
font-size: 12px;
line-height: 24px;
text-align: left;
}

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

CSS

#content p {
color: #009;
}
.p1 {
color: #900;
}
#content .p2 {
color: #090;
}

Результат

Первый абзац

Второй абзац

Третий абзац

Результат тот же, что и в первом примере, но мы избавились от «!important», а значит избежали проблем, приведенных в начале статьи, да еще и сократили код, если требовалось бы перекрыть несколько параметров.

До момента написания статьи, я ни разу не встречал такого использования CSS-селекторов:

#identificator.class
/* или */
.class#identificator

Как оказалось, применение такой конструкции есть. Допустим, у нас есть меню навигации:

<ul id="nav">
  <li><a id="main" class="current" href="index.html">Главная</a></li>
  <li><a id="projects" href="projects.html">Проекты</a></li>
  <li><a id="partners" href="partners.html">Партнеры</a></li>
  <li><a id="about" href="about.html">О нас</a></li>
  <li><a id="contacts" href="contacts.html">Контакты</a></li>
</ul>

И по каким-то причинам, стили описаны следующим образом:

#main, #projects, #partners, #about, #contacts {
background: #0ff;
}

Например, для того, чтобы выделить ссылку на текущую страницу, мы добавляем для нее класс «current», т. к. идентификатор уже задан, но теперь чтобы перекрыть значение параметра «background» нам потребуется использовать «!important»:

#main, #projects, #partners, #about, #contacts {
background: #0ff;
}
.current {
background: #ff0 !important;
}

Вроде бы «!important» не так и сильно мешает и запись довольно короткая, но вспомним, что IE6 не понимает его. Что же делать? Перепишем код, используя конструкцию, о которой говорилось чуть выше:

#main, #projects, #partners, #about, #contacts {
background: #0ff;
}
#main.current, #projects.current,
#partners.current, #about.current,
#contacts.current {
background: #ff0;
}

Все заработало, аналогично примеру с «!important», но теперь и в IE6. Возможно, пример не совсем удачный потому, что получилось больше кода.

Уверен, что найдется и применение конструкции «.class#identificator». Надеюсь, прочтение этой статьи, поможет Вам сократь использование «!important» в ваших таблицах стилей.

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: CSS | Комментировать

Комментарии (10)

  1. rotor / 10.08.2008 в 23:57

    Ну я бы не стал заявлять, что всегда нужно избавляться от !important.

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

    А вообще многие верстальщики забывают или вообще не знают про такие вещи как !important или селекторы атрибутов в CSS (конечно же, из-за того что они не поддерживаются IE6).

    Только сегодня забрёл сюда. Интересные темы пишешь.
    +1 в RSS :)

  2. Octane / 11.08.2008 в 12:41

    Спасибо :)
    Я и не говорю, что нужно совсем отказаться от «!important», как Вы правильно сказали: «Только применять нужно с умом», например, для эмуляции «min-height» в IE6:

    #foo {
    height: auto !important;
    height: 500px;
    min-height: 500px;
    }

    Хотя, в этой ситуации тоже можно обойтись без «!important», используя «child-selector»:

    #foo {
    height: 500px;
    }
    #conteiner > #foo {
    height: auto;
    min-height: 500px;
    }

    А еще лучше, вынести все исправления для IE в отдельный CSS-файл и подключить его, используя «Conditional Comments».

  3. PHP кодер / 21.08.2008 в 14:46

    У тебя опечатка в первом листинге. Добавь класс p2 к третьему абзацу.

  4. Octane / 21.08.2008 в 16:07

    Спасибо, исправил.

  5. IzumeRoot / 12.12.2008 в 19:59

    Упирается это все в специфичность CSS http://web-linux.ru/?p=479

  6. Женя / 06.03.2009 в 15:27

    !important хорош когда надо «прибить» футер к низу страницы и при изменении height страницы (когда появляется вертик. прокрутка) футуер оставался внизу и страница не прокручивалась ниже него показывая просто фон документа.

  7. Виталий / 04.02.2011 в 17:26

    Целый день искал решение, был конфликт css между джумловким шаблоном и каталогом sobi. Cпасибо Вашей статье добавил id и все решилось :)

  8. Сергей / 06.04.2011 в 16:32

    У меня та же проблема -как и у Виталия: «Виталий / 04.02.2011 в 17:26

    Целый день искал решение, был конфликт css между джумловким шаблоном и каталогом sobi. Cпасибо Вашей статье добавил id и все решилось…»

    В шаблоне template я добавил class
    #content p{
    text-indent: 1.5em; text-align: justify; margin-bottom: 0px; }
    для создания отступов в параграфе.
    в редакторе пишу

    Первый абзац

  9. loki / 03.05.2011 в 14:29

    А почему Вы утверждаете, что ИE6 вообще не поддерживает !important?

    Добавьте его в первую группу селекторов и посмотрите результат.

    #main, #projects, #partners, #about, #contacts {
    background: #0ff !important;
    }
    #main.current, #projects.current,
    #partners.current, #about.current,
    #contacts.current {
    background: #ff0;
    }

    У меня ВСЕ пункты меню стали бирюзовые (я и про ИЕ6 тоже). У Вас нет?

  10. VideoPortal / 29.03.2017 в 12:44

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

Оставить комментарий

480×60
480×60