Рефакторинг CSS динамичские стили

Question

Как можно оптимизировать данный код? Без применения препроцессоров..

Такой вопрос есть CSS код, вопрос в том как можно его оптимизировать или как то сделать динамические классы, без применения препроцессоров. Спасибо:)

Answer 1

Используйте переменные, например:

/* для наглядности */

div[class*="noneTransform"] {
  width: 20px;
  height: 20px;
  background-color: wheat;
  margin: 5px 0 0 100px;
  text-align: center;
}


/* оптимизация */

div[class*="noneTransform"] {
  transform: translate3d(var(--x, 0), 0, 0)!important;
}

.noneTransform10 {--x: -10px;}
.noneTransform20 {--x: -20px;}
.noneTransform55 {--x: -55px;}
.noneTransform70 {--x: -70px;}
.noneTransform1 {--x: -1px;}

<div class="noneTransform10">1</div>
<div class="noneTransform20">2</div>
<div class="noneTransform55">3</div>
<div class="noneTransform70">4</div>
<div class="noneTransform1">5</div>

БЛОГ НА HUSL

Рефакторинг CSS динамичские стили

Ответы (1 шт):