Комментарии 72
Секция «Important во благо» выглядит как искусственное решение искусственно созданной проблемы
Имо, правильное решение выкинуть его из библиотеки
Несколько лет назад Гарри Робертс предлагал использовать !important для гарантии неизменяемости для служебных классов, этакий аналог const для CSS.
И будет всё равно печаль.
Так, что этот способ существует, но сказать что он хороший или надежный — я бы не сказал.
Если вы этот плагин будете отдавать в массы — то вам придется решать эти не искусственно созданные проблемы. Потому как ваш плагин будет работать с сторонними плагинами и кучей сторонних тем. А там такой зоопарк.
И это не камень в сторону вордпресс — любая система которая имеет плагины и темы и массового пользователя, который бесплатно их получает и ставит в самых разных наборах и вариациях.
Я писал об этой проблеме и способах решения: «Верстка под контент выводимый плагином или дополнением в вордпресс» — картинка оттуда yadi.sk/i/l-If2cwF3K3txW
Ну и как вам? Надуманные проблемы или все же из жизни?
Ну и как правило, не так уж и много в этих библиотеках приходится перебивать импортантов, а значит не так много селекторов.
А вообще, иногда стоит задуматься, точно ли надо перебивать эти импортанты в сторонней библиотеке.
Два-три уровня из 8 описанных в стандарте заюзать можно:)
2. > Это свойство нарушает естественный поток написанных нами правил и менее приоритетным стилям даёт наибольший приоритет
Нет. important просто повышает приоритет правила. И нет никакого «естественного потока», есть вполне логичные приоритеты селекторов, зная которые перестаешь бить себе по пальцам.
Емнип, не до максимума, а даёт +1000 к приоритету.
То есть если к какому-то блоку применяется два взаимоисключающих правила с приоритетами 1 и 5 (то есть применится второе, первое будет затёрто), и если у каждого написать !important, то результат не изменится, а приоритеты будут 1001 и 1005, соответственно. Но если написать этот модификатор только к первому правилу, то таки-да, будет применено оно, ибо 1001 > 5.
Это слышанное однажды краем уха со слов старшего товарища. :)
Дальше внизу там обсуждение, которое мне действительно пролило свет на некоторые моменты, происходящие в царстве css'а. Например, этот комментарий про 1.0.0.0.0 и эта статья про 256 классов и id. Мне ещё многому предстоит научиться. `:)
Не совсем так. Во многих популярных руководствах вес селекторов записывают трех-четырехзначными числами, что возникает такое впечатление, но по стандарту это числа в "бесконечноричной", в крайнем случае "дофигаричной", системе:). Когда-то давно был в некоторых браузерах курьез, что 256 классов перебивали-таки один id. Но это с тех пор исправили. А !important и вовсе не перебить никаким кол-вом id, потому что по стандарту он считается отдельным уровнем происхождения и важности, который важнее специфичности.
Не спорю, общая суть верна, просто хотел предостеречь от буквальной трактовки этой "тысячи" как какой-то реальной волшебной константы
На деле это ж скорее 1.0.0.0.0.
Где каждая цифра это:
!important | inline | id | class | tag
Участие в этой схеме инлайновых стилей тоже спорная история, но если они учитываются в расчете веса, то так будет вполне разумно считать
Анимации немного в эту схему не вписываются, в них !important, судя по всему, просто игнорируется. Но в большинстве случаев – вполне удобное правило
Если полноценно использовать вменяемую методологию (БЭМ или тот же rscss), то important не нужен никогда.
Его приходится использовать временно, переходя с CSS, написанного "как получилось", на вменяемую методологию: в legacy часто встречаются излишняя вложенность и, как следствие, излишняя специфичность, и единственный способ — временно — пока то legacy не переписали — поставить !important и комментарий, поясняющий, почему он временно понадобился, и когда его можно будет убрать.
Что касается "универсальных классов" — лучше их просто не делать, а для DRY использовать миксины. Бутстрап вообще пример того, как делать не надо; точнее говоря, он удобен, если дизайна вообще как такового нет, и хочется быстро сделать что-то, выглядящее прилично (типа внутренней админки) не заморачиваясь. В проекте, где бутстрап используется по назначению, кастомного CSS вообще будет минимум.
Бутстрап не лучший пример, но он тут не в качестве хорошего примера. Он тут в качестве одной из популярных либ, в которой есть импортанты. Если посмотреть количество загрузок бутстрапа в неделю, то можно понять, что очень и очень много разработчиков потенциально сталкиваются с импортантами в бутстрапе)
В некоторых случаях, напр., если этот стиль навешивается динамически по условию/событию, то можно. А если Firefox не важен, то можно практически всегда (пока:). Но это не по стандарту и дикий хак.
Используя css-modules столкнулся с проблемой, что в библиотеках иногда селекторы довольно многословны и, поэтому, имеют высокий приоритет и просто с использованием модулей (ровно как и styled-component) перебить без impotant их иногда не выходит. Жутко раздражает, хотелось бы, конечно, иметь более декларативный способ описания приоритета стиля, чем через селектор.
JS может переназначать значения свойств только с помощью inline-стилей.
let newStyle = document.createElement( 'style' );
newStyle.textContent = '.redBorder{border:solid 5px red;}';
document.body.appendChild( newStyle );
document.body.classList.add( 'redBorder' );PROFIT!
Надеюсь ты так никогда не делаешь в реальных задачах)
А так, можно и инлайн-стили менять по разному, хоть через
element.setAttribute('style', element.getAttribute('style') + newStyle);Хотя я обычно пользуюсь традиционным
element.style.fontSize = '18pt';Но всё же: «очень не хорошо» это субъективная оценка.
А что в этом объективно нехорошо?
Что значит «быстро»? Разве узнать необходимый вес селектора для переопределения так сложно и долго? Мы очень активно используем DevTools при разработке, и для решения этой задачи ответ у нас есть там же.
…
Разве это долго? Мне кажется, по времени это мало отличается от того, чтобы дописать !important, однако намного правильнее и безопаснее.
А потом заказчик вас спросит, почему у него на мобильном ничего не поменялось. И нет, окажется, что проблема не в очистке кэша, а в том, что там есть ещё десяток других дублирующих селекторов для разных разрешений, которые вы в инспекторе объектов на десктопе не увидели.
Или окажется, что на разные типы заголовков прописан десяток разных «тяжелых» селекторов, а вам нужно просто быстро показать заказчику, почему белый на сером — плохая идея в любом месте сайта.
То есть я не спорю, что чем меньше !important, тем правильнее, но таки да, написать !important в основном быстрее. В этом-то и его trade-off.
А «быстрее» писать !important это опять же, если приводить синтетический случай. Ты его написал, показал заказчику и удалил. А если ты его написал и оставил, то это ускорение сработает ровно один раз. До следующего раза, когда тебе импортанты надо будет писать поверх импортантов и ты все равно придешь к работе с весом селекторов)
!important нужно использовать только для скрытия через display: none в медиа-выражениях. Например для адаптивных хелперов. Это нужно если порядок свойств компонентов идёт после наших хелперов и мы гарантированно хотим скрыть элемент. Во всех остальных случаях повышайте специфичность селектора (потому что если вы сделали это один раз скорее всего вы сделаете это ещё раз) и используйте изоляцию стилей. Переопределять стили в атрибуте style совсем плохо. Лучше обновите сам style.
Вообще не использую! important, потому что всегда пишу стили от родителя. Сам Яша рекомендует использовать импортант, только в самых необходимых моментах, когда например стили слайдера у вас на 2560 строчке в файле css, а стили доп блока в слайдере вы уже написали на 30 строчке, тут можно конечно перетащить эти стили на 2561 строчку, но тогда может поехать стиль другого блока и т.д, вот поэтому и надо задавать такой селектор
Работал в одной вебстудии, так там один верстальщик писал стили как попало и потом когда дальше стили не применялись добавлял id к элементы и стили к нему с помощью !important дописывал, я сколько ему не объяснял, что это бред, но так и не добился результата. Сам !important использую когда inline нужно переопределить или когда заказ на тестирование нового интерфейса и этот код отдельно подключается и только на время
Так когда же всё таки можно использовать !important?