code is art 

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

Похожие темы

• Округлые уголки, CSS
• CSS-селекторы в js-core
• Использование CSS подмены текста изображением и SEO. Какие могут быть последствия?
• Все, что вы знали о CSS —  неправда
• W3C CSS API селекторы — методы querySelector() и querySelectorAll()

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

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

Введите Ваш E-mail: