Итак, почему же стоит отказаться от «!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» в ваших таблицах стилей.