CSS, который давайте переопределим себя

Question

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

.p-20{
  padding: 20px;
}

.panel{
  .heading{
    //this would be the default value and would let himself be override
    padding: 10px;
  }
}

<div class="panel">
   <div class="heading p-20">
      My padding is 10px instead of 20px...
   </div>
</div>

Answer 1

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

<div class="panel">
   <div class="heading p-20 new-class">
      My padding is 10px instead of 20px...
   </div>
</div>

css

.panel{
  .heading{
    padding: 10px;
  }
  .new-class{
    padding: 20px;
  }
}

Answer 2

Это звучит как работа с переменными CSS, где вам не нужно заботиться о специфике:

.p-20 {
  --p: 20px;
  padding:20px; /*we keep this for the element without variable*/
}

.panel .heading {
  padding: var(--p, 10px); /* 10px will be the default value if --p is not set*/
  background:red;
}

<div class="panel">
  <div class="heading">
    My padding is 10px
  </div>
</div>
<div class="panel">
  <div class="heading p-20">
    My padding is 20px
  </div>
</div>

<div class="panel">
  <div class="p-20">
    My padding is 20px
  </div>
</div>

Answer 3

В комментариях @LGSon ответил на мой вопрос: «Есть два основных способа: specificity и !important, и, если они равны, будет применяться последнее правило в CSS». Это означает, что в любом случае можно объявить стиль по умолчанию. Как он сказал, это должно быть сделано с specificity или !important, однако !important всегда должен быть последним ресурсом.