CSS !important и что мы можем с ним поделать

17 июня 2018 г.

Используя !important вы даете максимально больше важности CSS правилу на котором его применяете. Вы можете применять его не только в таблице сталей, но и в инлайновых стилях. И кстати, если вы так делаете, то вы совершаете большую ошибку. Сейчас узнаем почему.

Правило !important представлено в спецификации CSS1 с целью перезаписи буквально любых стилевых значений. Для разработчиков это куда более важный элемент, нежели для простых пользователей. Как вы уже наверное догадались, этот подход был мало связан с доступностью и поэтому пришлось его переосмыслить, но уже в CSS2.

Перевод статьи CSS !important and What We Can Use for It

Правило с !important само по себе не обращает внимания на специфику или каскадирование. Поведение зависит от контекста, но практически всё в CSS может быть перезаписано с !important.

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

И так, зная это, зачем тогда нам использовать !important? Как вы уже предположили, это удобный инструмент, но мы должны использовать его с осторожностью. Давайте посмотрим несколько возможных примеров использования, но сначала немного простого CSS.

Специфичность CSS и каскадирование

Говоря о специфичности, мы имеем ввиду более точный селектор, как в следующем примере:

.entry-content {
    color: red;
}

.entry-content p {
    color: black;
}

Последнее правило более точное, так как мы выбрали <p> элементы внутри .entry-content, следовательно <p> теги будут черного цвета.

Менее специфичные селекторы это типовые селекторы (h1, p, span, div), следующие за классовыми селекторами (.entry-content), селекторами атрибутов (type='radio') и псевдоклассами(:hover, :focus). Самые весомые в этом случае это ID селекторы (#main).

Под каскадированием мы подразумеваем естественный каскадный поток CSS. Где по важности находится правило? Чем оно ближе к концу в цепочке правил, тем больше важности оно имеет. Порядок таков: объявления из браузера, затем от пользователя, затем от автора, затем от автора с !important, затем от пользователя с !important. Если у браузера есть дефолтный стиль для тегов заголовков, то вы как автор легко можете перезаписать его с селекторами меньшей специфичности. И мы еще не упоминали наследование, которое случается довольно часто.

Конечно же, такое каскадирование тоже работает в таблице стилей: более позднее правило с той же специфичностью побьёт предыдущее.

Вообще понимание специфичности и каскадирования могло бы быть посложнее. Для большей информации проверьте ссылки.

И так, для чего мы можем его использовать?

Безусловно !important имеет плохую репутацию, так как иногда для ленивых разработчиков — особенно для меня — гораздо удобнее перезаписать всё с помощью этого не совсем элегантного способа, вместо того, чтобы копаться в коде и решать реальную проблему, которая обычно кроется в плохой архитектуре.

Дебажиим код

Самый очевидный способ использовать это слово — это дебаггинг вашего кода, обычно в браузере. Временно используя !important в вашем коде, вы можете устранить некоторые конфликты и можете изолировать проблему. В Chrome, вы можете также добавить инлайновые стили, которые также переписывают необходимые авторские значения.

Это удобно для быстрых правок и целей исследования. Если вам всё таки понадобилось это правило, то возможно вам пора заняться рефакторингом кода.

Скрытие элементов

Есть разные способы что-нибудь спрятать от обычных пользователей, но если вы хотите точно убедиться в результате, то !important может быть полезным. Конечно, если вы работаете над своим проектом, вы знаете точно — так ли это вам нужно.

.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px, 1px, 1px, 1px);
}

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

Защитный CSS

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

.entry-content img {
    display: block !important;
}

Используя этот коды вы убедитесь в том, что пользователь по ошибке не сможет сделать изображение строчным или строчно-блочным , даже если теоретически может.

Хакнуть восхитительный WYSIWYG редактор

В WordPress стандартным WYSIWYG редактором является TinyMCE, который по моему мнению не самый худший. Один из его вспомогательным атрибутов не использует инлайновые стили как CKEditor.

Когда вы редактируете контент в CKEditor, тут будут инлайновые стили, которые имеют больший вес в приоритезации, чем авторские. Что нам делать? Использовать !important и контролировать необходимое поведение.

Вспомогательные классы

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

.btn{
    display: inline-block;
    background: #3590f1;
    padding: 0.7em 1.6em;
    border-radius: 2px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;

    &:hover,
    &:focus {
        background: #5adba0;
    }
}

.entry-content a {
    text-decoration: underline;
    color: #3590f1;
}

Хотя с нашим классом .btn всё ок, его специфичность низка, так что простое второе правило, которое идет дальше — перепишет его свойства, в данном случае это color и text-decoration. Вам нужно написать простой селектор, но проблема всё же останется.

Вы можете решить ее, использовав !important, как в этом примере:

See the Pen CSS !important with Utility Classes by Adam Laki (@adamlaki) on CodePen.

После этого, вам также придется применять эту технику в модификаторах и всяких псевдо объявлениях стилей.

БЭМ метод

БЭМ это тот метод, который основывается низкой специфичности и иногда из-за этого может вызывать некоторые неприятности со стилями. Почти все селекторы имеют один класс. Я даже не знаю сколько раз мне надо было рефакторить код, созданный по этой технике. Конечно, у вас есть и свои решения описанных проблем, но в следующий раз может вы тоже будете использовать !important.

Стандарты написания гибкого, надежного и жизнеспособного HTML c CSS CSS свойство background-image как антипаттерн