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

Question

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

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

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

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

218

html css css-specificity

Источник

user287047 14 сен '10 в 07:23

8 ответов

Решение

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

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

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

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

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

18

Источник

user330644 14 сен '10 в 07:26

Я думаю, что важно снова коснуться этого, здесь, в конце 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" и его стильному аналогу, вы рискуете оттолкнуть своих пользователей, вообще используя тег! Важный! Имейте в виду, что стильный не будет перекрывать их.

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

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

Объявления

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

10

Источник

user549506 28 ноя '14 в 13:20

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

Без!important:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

выходы красный

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

.set-color{
  color: blue;
 }

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

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

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

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

.set-color{
  color: red;
 }

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

10

Источник

user4642530 29 фев '16 в 05:08

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

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

8

Источник

user426062 14 сен '10 в 07:49

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

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

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

5

Источник

user281504 14 сен '10 в 07:29

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

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

3

Источник

user5872959 02 фев '16 в 13:28

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

0

Источник

user5849229 15 июн '19 в 00:33

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

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

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

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

<p>Some Paragraph</p>

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

не безумнее что

-1

Источник

user10582460 05 дек '18 в 17:58

Другие вопросы по тегам html css css-specificity

user124238 14 сен '10 в 07:31 2010-09-14 07:31 · Accepted Answer · 2010-09-14 07:31

Да я бы сказал твой пример использования !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,

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

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

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

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

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

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

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

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

Утилиты

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

Заключение

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

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

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

8 ответов

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

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

Заключение

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

Создавайте и соблюдайте правила

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

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

Объявления

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