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

Но я хочу знать, это плохо для производительности?

РЕДАКТИРОВАТЬ
Из (быстрых) ответов я могу сделать вывод, что это не окажет (существенного) влияния на производительность. Но это приятно знать, даже если это всего лишь дополнительный аргумент для обескураживания других;).

EDIT 2
BoltClock указал, что если есть 2 !importantобъявления, спецификации говорят, что он выберет наиболее конкретную.

Это не должно иметь никакого влияния на производительность на самом деле. Увидев анализатор CSS Firefox в,/source/layout/style/nsCSSDataBlock.cpp#572 и я думаю, что это актуальная процедура, обрабатывающая перезапись правил CSS.

это просто кажется простой проверкой «важности».

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...

Также комментарии на source/layout/style/nsCSSDataBlock.h#219

    /**
     * Transfer the state for |aPropID| (which may be a shorthand)
     * from |aFromBlock| to this block.  The property being transferred
     * is !important if |aIsImportant| is true, and should replace an
     * existing !important property regardless of its own importance
     * if |aOverrideImportant| is true.
     * 
     * ...
     */

1. Firefox использует анализатор сверху вниз, написанный вручную. В обоих случаях каждый файл CSS анализируется в объекте StyleSheet, каждый объект содержит правила CSS.

2. Затем Firefox создает деревья контекста стиля, которые содержат конечные значения (после применения всех правил в правильном порядке)

От: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

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

Тем не менее, ремонтопригодность требует успеха (как уже упоминалось в других ответах), что может быть вашим единственным аргументом против них.

Я не думаю, что !importantэто изначально плохо с точки зрения того, насколько быстро браузер соответствует правилам (он не является частью селектора, а только частью объявления)

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

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

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

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

Однако, как и большинство вещей, им злоупотребляют, но нет необходимости беспокоиться о «производительности». Могу поспорить, что один маленький GIF размером 1x1 имеет больший прирост производительности на веб-странице, чем!

Если вы хотите оптимизировать свои страницы, есть еще много важных маршрутов;);)

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

Использование! Важное в вашем CSS обычно означает, что разработчик самовлюблен, эгоистичен или ленив. Уважайте разработчиков, чтобы прийти ...

Мышление разработчика при использовании !important:

1. Мой качающий CSS не работает ... grrrr.
2. Что мне теперь делать??
3. А потом !importantда .... теперь работает нормально.

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

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

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

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

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

Позвольте мне ответить на ваш вопрос ответным вопросом в ответ; угол, который вы, вероятно, не рассматривали: какой браузер вы имеете в виду

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

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

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

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

Раньше !importantмне приходилось использовать несколько раз, и я лично не заметил заметного снижения производительности при его использовании.

В качестве примечания см. Ответ на этот вопрос стека по причине, которую вы, возможно, захотите использовать !important.

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

хм ... важно или !! важно?

Давайте пройдем этот шаг за шагом:

1. Парсер должен проверять наличие важного для каждого свойства независимо от того, используете вы его или нет - поэтому разница в производительности здесь равна 0
2. При перезаписи свойства парсер должен проверить, важно ли перезаписываемое свойство! Важно или нет - поэтому разница в производительности здесь снова равна 0
3. Если перезаписываемое свойство является !! важно, оно должно перезаписать свойство - снижение производительности равно -1, если не используется! Важный
4. Если перезаписываемое свойство имеет значение! Важный, оно пропускает перезапись свойства - повышение производительности на +1 для использования!
5. Если новое свойство является! Важным, анализ должен перезаписать его независимо от того, перезаписывается ли свойство! Важно или !! важно - разница в производительности снова 0

Так что, я думаю, вы хотите, чтобы!

и как @ryan упоминает ниже, единственный способ переопределить встроенный CSS и избегать использования JavaScript ... так что еще один способ избежать ненужного снижения производительности

хм ... оказывается, что важно важно

а также,

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

Так что, думаю, использование! Важный может сделать разработчиков счастливыми, и я думаю, что это очень важно : D

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

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

Идентификаторы с префиксом #в CSS очень специфичны, так что 255 классов не будут переопределять идентификатор (fiddle by: @Faust ). У ID тоже есть проблема с более глубокой маршрутизацией, они должны быть уникальными, это означает, что вы не можете повторно использовать их для дублирующих стилей, поэтому вы в конечном итоге пишете линейный CSS с повторяющимися стилями. Последствия этого будут варьироваться от проекта к проекту, в зависимости от масштаба, но ремонтопригодность сильно пострадает, а в крайних случаях - и производительность.

Как вы можете добавить специфичность без !important, цепочки, квалификации или идентификаторов (а именно #)

HTML

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

CSS

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

Хорошо, так как это работает?

Первый и второй примеры работают одинаково, первый буквально является классом, а второй - селектором атрибутов. Селекторы классов и атрибутов имеют одинаковую специфику. .eg1/2-barне наследует свой цвет, .eg1/2-fooпотому что у него есть собственное правило.

Третий пример выглядит как квалификатор или цепочка селекторов, но это не так. Цепочка - это когда вы добавляете префиксы к родителям, предкам и т. Д .; это добавляет специфичности. Квалификация похожа, но вы определяете элемент, к которому применяется селектор. квалификация: ul.classи цепочка:ul .class

Я не уверен, что вы бы назвали эту технику, но поведение является преднамеренным и задокументировано W3C

Повторные вхождения одного и того же простого селектора допускаются и повышают специфичность.

Что происходит, когда специфика между двумя правилами идентична?

Как указал @BoltClock , если существует несколько! Важных объявлений, то спецификация диктует, что наиболее конкретное должно иметь приоритет.

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

HTML

<div>
    <p class="foo bar">foobar</p>
</div>

CSS

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle