Как и когда использовать правило !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при разработке страниц, вы обеспечиваете индивидуальные требования ваших пользователей.

Не рекомендуется использовать правило !important слишком часто, так как единственное, что может переопределить !important - это другое правило !important. Один раз используя его, у вас получится CSS файл, полный правилами !important, и это не очень хорошо.

Считаете ли это полезным?

Похожие статьи