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

Question

Я работаю над веб-сайтом в течение нескольких месяцев, и много раз, когда я пытаюсь что-то редактировать, мне приходится использовать !important, , например :

div.myDiv { 
    width: 400px !important;
}

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

Answer 1

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

Что не так с !important:

Специфичность - это одна из основных сил при работе, когда браузер принимает решениекак 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;
}

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

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

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

1. Селектор не совсем точно передает важность всех правилвнутри него
2. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.1040 *

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

   Когда можно использовать:

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

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

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

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

   • Классы утилит

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

   Заключение

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

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

Answer 2

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

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

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

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

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

Answer 3

Я думаю, что важно еще раз коснуться этого, здесь, в конце 2014 года, когда в рабочий проект добавляется больше правил, очень важно не налагать ограничения на своих пользователей.Я написал этот небольшой пример, чтобы объяснить возможный сценарий, в котором происходит такая вещь.Это взято с РЕАЛЬНОГО веб-сайта, который я посещал в Интернете, и, к сожалению, я вижу его чаще, чем нет.

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

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

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

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

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

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

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

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

Создание и следование самоназванным правилам

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

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

С наличием таких инструментов, как расширения, и наличием сайтов, таких как 'userstyles.org'и это стильный аналог, вы рискуете оттолкнуть своих пользователей, используя тег! важный!Имейте в виду, что стильный не будет перекрывать их.

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

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

Реклама

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

Answer 4

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

---

Без !important:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

выходов RED

---

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

.set-color{
  color: blue;
 }

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

выходы КРАСНЫЙ (был бы красным в любом случае)

---

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

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

.set-color{
  color: red;
 }

выходы СИНИЙ (говорит, игнорируйте красный, используйте синий)

---

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

Answer 9

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

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

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

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

<p>Some Paragraph</p>

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

без ума, что