0

Подскажите, есть ли в css возможность выставления свойства !important сразу для всех свойств.

Сейчас мне приходится писать так:

.btn-disabled {
  background: #eaeaea !important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  cursor: default !important;
}

Но может есть какой-нибудь способ сказать, что всё, что указано в .btn-disabled имеет свойство !important?

10
  • Дико интересно на кой всем правилам задавать !important?
    – Air
    3 авг 2018 в 9:39
  • например есть активная кнопка, хочу сделать неактивную задаю как <div class = 'btn btn-disabled'>, при описании свойства btn-disabled указываю только те, которые надо переопределить и так, чтобы перестали действовать всякие .btn:hover - для этого и !important, чтобы не плодить .btn-disabled:hover и т.п.
    – Zhihar
    3 авг 2018 в 9:45
  • Да вы батенька... Я лучше промолчу... Что за чушь... Достаточно грамотно в css стили описать...
    – Air
    3 авг 2018 в 9:49
  • 1
    Неверный путь. Пропишите в btn геометрию. В btn-common - еще более детальные вещи, и в btn-disabled не придется ничего писать. Ну и .btn-disabled:hover - всего лишь частный случай, пропишите такие правила, и надобность в btn-common отпадет. 3 авг 2018 в 9:51
  • 1
    Для btn-disabled пропишите pointer-events: none и не будет никакого ховера не нем. Вообще использование !important очень плохой тон, который говорит что вы в бардаке утонули уже 3 авг 2018 в 9:55

2 ответа 2

7

Нет такого.Пишите !important отдельно для каждого свойства.

3

Можно использовать "вес" селекторов css, использовать цепочки селекторов. important используем когда нет возможности написать правила правильно, или для исключительных случаев.

можно представить, что

  • p - один селектор это 1 бал
  • div p - это 2 бала
  • .class - класс это 10
  • #id - идентификатор это 100

тогда

  • body(1) #id(100) .class(10) p(1) === 112
  • body(1) p(1) === 2

Этого вполне достаточно, чтобы правильно спланировать свою структуру.

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

.wrapper {
  color: red;
}

.list {
  color: green;
}

.btn {
   color: blue;
}

.wrapper .btn {
  color: orange;
}

.wrapper .list .btn {
  color: yellow;
}

.wrapper .list .ul li:first-child > a.btn {
  color: black;
}


#btn {
 color: violet;
}
<div class="wrapper">
  <div class="list">
     <ul class="ul">
        <li><a class="btn">ul .btn</a></li>
        <li><a class="btn">ul .btn</a></li>
        <li><a class="btn" id="btn">#btn</a></li>
     </ul>
     <p>.list p</p>
  </div>
  <p>.wrapper p</p>
</div>

3
  • А еще лучше отказаться от каскада и верстать по БЭМ
    – Get-Web
    3 авг 2018 в 21:58
  • Одно не исключает другого. Нужно знать и понимать основы. БЭМ лишь методология, соглашение по "именованию и использованию классов". Но конечно бэм - это отличный пример хорошей практики.
    – diproart
    4 авг 2018 в 4:21
  • не спорю, я лишь дополнил ваш ответ
    – Get-Web
    4 авг 2018 в 11:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.