Каковы последствия использования "! Important" в CSS?

Ответ 1

Да, я бы сказал, что ваш пример использования !important - это плохая практика, и это, скорее всего, приведет к нежелательным последствиям в дальнейшем. Это не значит, что никогда не использовать его.

Что случилось с !important:

Specificity является одной из основных сил при работе, когда браузер решает, как CSS влияет на страницу. Чем более конкретным является селектор, тем важнее его добавление. Обычно это совпадает с тем, как часто возникает выбранный элемент. Например:

button { 
    color: black; 
}
button.highlight { 
    color: blue; 
    font-size: 1.5em;
}
button#buyNow { 
    color: green; 
    font-size: 2em;
}

На этой странице все кнопки черные. Кроме кнопок с классом "выделить", которые являются синими. За исключением одной уникальной кнопки с идентификатором "buyNow", который является зеленым. Важность всего правила (как цвета, так и размера шрифта в этом случае) управляется спецификой селектора.

!important, однако, добавляется на уровне свойства, а не на уровне селектора. Если, например, мы использовали это правило:

button.highlight {
    color: blue !important;
    font-size: 1.5em;
}

тогда свойство цвета будет иметь большее значение, чем размер шрифта. Фактически, цвет более важен, чем цвет в селекторе button#buyNow, в отличие от размера шрифта (который по-прежнему определяется регулярной идентификацией по отношению к классу).

Элемент <button class="highlight" id="buyNow"> будет иметь размер шрифта 2em, но цвет blue.

Это означает две вещи:

• Селектор не точно передает важность всех правил внутри него
• Единственный способ переопределить синий цвет - использовать другое объявление !important, например, в селекторе button#buyNow.

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

Когда все в порядке:

• Переопределение стилей в таблице стилей пользователя.

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

• Переопределение стороннего кода и встроенных стилей.

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

• Классы полезности

Многие библиотеки и фреймворки поставляются с такими полезными классами, как .hidden, .error или .clearfix. Они служат единой цели и часто применяют очень мало, но очень важные правила. (display: none для класса .hidden, например). Они должны переопределить любые другие стили в данный момент на элементе и, безусловно, гарантируют !important, если вы спросите меня.

Заключение

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

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

Ответ 2

!important заставляет утверждение всегда применяться, выполняя следующие действия:

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

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

Причины не использовать/избегать !important?

• запрещает пользователям использовать пользовательские таблицы стилей (которые теперь не могут переопределять правила, отмеченные как важные), что нарушает доступность для некоторых людей
• делает код более трудным для чтения, потому что ум обычно довольно легко определяет определенность, но, помня, что есть !important, сложнее читать

Ответ 3

Я думаю, что важно, чтобы мы коснулись этого снова, здесь, в конце 2014 года, когда в рабочий проект добавлено больше правил, так важно не накладывать ограничений на ваших пользователей. Я привел этот небольшой пример, чтобы объяснить возможный сценарий, в котором происходит такая вещь. Это взято с сайта REAL, который я посетил в Интернете, и я вижу это, к сожалению, чаще всего.

Поля текста текстового редактора

У вас есть веб-сайт, и ваш сайт зависит от заполнения форм и редактирования текста. Чтобы попытаться свести к минимуму напряжение глаз, вы пытаетесь пойти со стилем, который, как вы думаете, все будет в порядке, и поскольку ваши пользователи в основном посещают ночью, вы решили сделать свой цвет фона белым, а затем сделать цвет текста черным, Форма по умолчанию пуста, поэтому вы вводите текст (на этот раз), чтобы убедиться, что он работает:

...
background-color: black; /* I forgot important here, but it works fine on its own */
color: white !important;
...

Несколько месяцев спустя, пользователи жалуются, что белый-на-черном слишком напрягает глаз, но другая половина любит его, что вы делаете? вы добавляете настраиваемую тему, которая использует! важно переопределить внутренние стили, чтобы обе стороны были счастливы, и для чего она предназначена:

...
background-color: white !important;   
color: black !important;
...

Теперь, что здесь происходит? Что вы ожидали. Если вы правильно помните важные теги в первом наборе, вы бы заметили, что он не работает и, вероятно, помнил, что вам нужно удалить важные теги. НО вы забыли одного.

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

Конечно, вы этого не понимаете, потому что текстовое поле пуст. И ВЫ ПРИНИМАЕТЕ, что это сработает! (Успение - это проявитель худшего врага, он там с гордостью и высокомерием).

Сделать и следовать Самостоятельным правилам

Итак, основное правило должно быть полезным только при разработке OVERRIDES для первоначального полного набора правил css. Помните, что он предназначен для исключений и нарушает естественный порядок и значение css в первую очередь. В случаях MOST вам не нужно использовать его вообще.

Знать, как пользователи настраивают свои цвета

Благодаря наличию таких инструментов, как расширения и наличие таких сайтов, как "userstyles.org" и стильный аналог, вы рискуете оттолкнуть своих пользователей, используя тег! important! Имейте в виду, что стильный стиль не отменяет их.

Никогда не ограничивайте посетителей

Если вы используете! важно для стиля, убедитесь, что вы позволили пользователю отключить этот стиль (и я не имею в виду через внутренний переключатель "Вкл./Выкл." веб-браузера). И ради небес ради не делайте это ПО УМОЛЧАНИЮ.

Объявления

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

Ответ 4

Немного поздно к этому вопросу, но он говорит "независимо от того, какие другие стили применяются, игнорируйте их и используйте этот". Вы можете немного смутить его с ! infront (из !important), потому что это не оператор в javascript, а в css, он называется маркером разделителя, который просто говорит о приоритете. Вот пример.

Без !important:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

выводит КРАСНЫЙ

!important по нижнему атрибуту (того же)

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

выводит RED (в любом случае был бы красным)

!important в верхнем атрибуте (того же)

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }

выводит ГОЛУБОЙ (говорит игнорировать красный, использовать синий)

Ответ 5

Я бы не советовал вам использовать его, если это не является необходимостью, которая иногда может иметь место с вами, поскольку вы работаете над существующим проектом. Но постарайтесь держаться подальше от него и использовать как можно меньше, насколько это возможно.

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

Проверьте это: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Ответ 6

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

Это похоже на использование ключевого слова goto в скриптах. Хотя это совершенно законно, его все же лучше избегать.

Ответ 7

Ну, я думаю, что использование !important - это когда-то "нужно делать работу", если вы хотите перегружать wp-plugins по умолчанию.

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

Ответ 8

Важным является фактор, который может тщесладеть ваш код для чего-то, что переопределено

! в нем не означает, что Logical нет, поэтому здесь он вызывает смущение тем, что среди этого кода. Важным часто является колоссальная неудача в вычислении.

Например, если вы хотите display: block; его display: block; но вы уже определили display: none; :

p {
   display: none;
   display: block !important /*Now overriden*/;
}

<p>Some Paragraph</p>

Ответ 9

Проблема с !important заключается в том, что с помощью CSS вы ДОЛЖНЫ во всех случаях избегать глубокого выбора (более приоритетного), поскольку в будущем вам или кому-то еще (часто для больших проектов) потребуется переопределить эти стили БЕЗ изменения исходного стиля и тогда у этого будет ограниченная свобода делать это. Ему нужно будет использовать !important, тоже с более глубоким селектором.