Как и когда использовать правило !important в CSS
Когда вы смотрите Каскадную таблицу стилей (CSS) веб-страницы, первое, что вы заметите в коде, это !important. Это ключевое слово влияет на приоритетную обработку внутри таблицы стилей.
Каскадная таблица стилей на самом деле является каскадной. Это означает, что стили расположены в особом порядке. Стили обычно применяются в том порядке, в каком читает их браузер. Примените первый стиль, потом второй и т. д.
Поэтому, если нам встречается стиль наверху таблицы стилей, а потом опускается вниз внутри файла, тогда второй сценарий этого стиля это сценарий, примененный в последующих экземплярах, а не в первом. В сущности последний перечисленный используется, если две стили указывают одно и то же (т. е. они имеют одинаковый уровень специфики).
Давайте представим, что таблица стилей содержит следующие стили:
p { color: green; }
p { color: black; }Несмотря на то, что к первому параграфу применен зеленый цвет, текст параграфа будет отображен в черном цвете. Причиной этому является то, что значение "black" применяется вторым. Так как CSS читается сверху вниз, завершением является "black".
В продолжении расскажем, как правило !important меняет приоритетность.
Как применить правило !important в CSS?
CSS правило !important дает больше значимости, чем любое другое свойство. В CSS !important означает, что “это важно” (this is important), все последующие правила игнорируются и применяется правило !important. Это правило должно быть указано в конце строки, сразу после точки с запятой.
p {
color: green !important;
}Для баланса декларация !important (символ-разделитель "!" и ключевое слово "important" находятся после декларации) имеет преимущество над обычной декларацией. Авторские и пользовательские таблицы стилей могут содержать декларации !important, но пользовательские правила !important переопределяют авторские правила !important. Эта CSS функция улучшает доступность документов, давая пользователям c особыми требованиями (большой шрифт, цветовые комбинации и др.) контроль над отображением.
Объявление, чтобы сокращенное свойство (например, color) было !important, эквивалентно объявлению, чтобы все подсвойства были !important. В результате, !important используется для переопределения стилей, которые раньше были представлены в другом стилевом источнике.
Давайте рассмотрим пример:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
body {
background-color: #1c87c9 !important;
background-color: #ffcc00;
}
h2 {
color: #8ebf42 ;
}
h2 {
color: #eeeeee !important;
}
</style>
</head>
<body>
<h2>W3docs</h2>
<p>W3docs дает возможность бесплатно изучить материалы таких языков программирования, как HTML, CSS, Java Script, PHP и др.</p>
</body>
</html>В данном примере фон имеет синий цвет вместо желтого, а заголовок имеет серый цвет вместо зеленого. Причиной является то, что применено правило !important.
Когда использовать правило !important
При тестировании и отладки веб-страницы !important является эффективным. Если вы не уверены, почему применятся стиль, и думаете, что это может быть конфликтом специфики, добавьте !importantк вашему стилю. Если таким образом проблема решается, измените порядок селекторов и удалите директивы !important из вашего кода.
В результате у вас будет таблица стилей, загруженная стилями !important, если вы слишком много опирались на !important для достижения желаемых стилей. Вы можете изменить обработку CSS страницы в значительной степени.
Используйте !important для проверки или в некоторых случаях для переопределения встроенного стиля, который является частью оформления или шаблонов фреймворка. Даже в таких случаях рекомендуется использовать эту технику редко.
Где использовать правило !important?
Использование правила !important может быть нормальным в следующих случаях:
- Переопределение стилей в пользовательском таблице стилей
Главным образом правило !important было создано, чтобы предоставить пользователю возможность переопределить стили веб-страниц. Оно часто используется программой чтения экрана, средствами блокирования рекламы и т. д.
- Переопределение исходного кода и встроенных стилей.
Как разработчик вы должны стремиться иметь как можно больше контроля над вашим кодом. но бывают случаи. когда нет другого выбора кроме как работать с тем. что имеете. Используйте !important редко.
- Utility Cases
Наверное лучшим способом является использование utility-классов. Рассмотрим кнопки. Если на вашей веб-странице есть название класса подобно .button и неважно, какой элемент вы поместите, вам необходимо, чтобы этот элемент имел вид кнопки (с конкретным шрифтом, круглыми углами, особым фоном и границами), можете попробовать следующее:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 1px solid #666;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" class="button">BUTTON</a>
</body>
</html>Здесь спецификой является 0,0,1,0. Если есть и другие селекторы с высокой спецификой, которые влияют на элемент, у вас могут быть проблемы в таком виде:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
#mybutton a {
border-bottom: 3px dashed #8ebf42;
}
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 3px solid #666;
text-decoration: none;
}
</style>
</head>
<body>
<section id="mybutton">
<p>This is a
<a href="#" class="button">BUTTON</a>
</p>
</section>
</body>
</html>Как видите, кнопки с особым дизайном имеют нижнюю пунктирную границу в зеленом цвете, но мы ожидали другое. Довольно просто и иногда полностью подходяще установить CSS селектор со значением выше 0,0,1,0.
Будет более эффективно добавление правила !important к значениям. Рассмотрим пример, где к кнопкам применено правило !important.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
#mybutton a {
border-bottom: 3px dashed #8ebf42;
}
.button {
background: #1c87c9 !important;
color: white !important;
font-weight: bold !important;
padding: 5px !important;
border-radius: 4px !important;
border: 3px solid #666 !important;
text-decoration: none !important;
}
</style>
</head>
<body>
<section id="mybutton">
<p>This is a <a href="#" class="button">BUTTON</a>
</p>
</section>
</body>
</html>Пользовательские таблицы стилей
Эта директива была введена, чтобы помочь пользователям веб-страниц справиться с таблицами стилей, которые представляют для них трудность при использовании или чтении страниц.
Если кто-то определяет таблицу стилей для просмотра веб-страниц, то эта таблица будет переопределена таблицей стилей автора страницы. Если пользователь указывает стиль подобно !important, этот стиль переопределяет таблицу стилей автора веб-страницы, даже если автор выбирает такое правило, как !important.
Эта структура полезна для тех пользователей, кто каким-нибудь образом должен установить стили. Например на всех используемых ими веб-страницах слабовидящему читателю понадобится увеличить размер шрифта по умолчанию. С помощью использования директивы !importantпри разработке страниц, вы обеспечиваете индивидуальные требования ваших пользователей.