Применение! Важные динамически с помощью CSS

Question

Как мы можем применить! Важное правило динамически через css?

Допустим, у меня есть много (1000+) служебных классов:

.text-align-left   { text-align: left   }
.text-align-right  { text-align: right  }
.text-align-center { text-align: center }

Теперь вместо добавления! Важно с каждымутилита, как мы можем применить это динамически?Как и в приведенном ниже классе «переопределить», в который мы просто добавляем! Important:

.class-to-override.override { rule: def !important }

Спасибо

Answer 1

Я знаю, что это очень старый вопрос, но я попробую:

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

Хотя вы можете увеличить специфичность, удвоив селектор: .text-align-left.text-align-left вместопросто .text-align-left (работает и разрешено в соответствии с документацией W3: https://www.w3.org/TR/selectors-3/#specificity), я не думаю, что это сильно поможет в этом случае.

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

.text-align-left-i {text-align: left !important;}