CSS-классы и inline-стили в JavaScript

Внешний вид страницы обычно задают в CSS. JavaScript не должен дублировать в себе все правила оформления: он либо меняет состояние элемента через CSS-класс, либо передаёт отдельное вычисленное значение через style.

• CSS-классы для состояния
• Inline-стили для вычисляемых значений
• Класс и style вместе
• Что выбрать
• Итого

CSS-классы для состояния

Класс сам по себе не меняет внешний вид элемента. Стиль задаёт CSS-правило, а JavaScript добавляет элементу класс, который обозначает его состояние.

<button class="save-button">Сохранить</button>

.save-button.is-loading {
  opacity: 0.6;
  cursor: wait;
}

const saveButton = document.querySelector('.save-button');

saveButton.classList.add('is-loading');

Кнопка станет полупрозрачной и получит курсор ожидания. Класс is-loading описывает состояние, а все связанные с ним стили остаются в CSS. Когда сохранение закончится, класс можно убрать.

saveButton.classList.remove('is-loading');

Такой подход удобен для состояний is-open, is-active, is-error и похожих. Один класс может включать сразу несколько CSS-правил, а также CSS-переход.

Inline-стили для вычисляемых значений

Свойство style задаёт inline-стили, то есть стили прямо у элемента. Этот способ подходит для отдельного значения, которое вычисляет JavaScript.

<div class="progress">
  <div class="progress__bar"></div>
</div>

.progress__bar {
  height: 8px;
  background-color: #3182ce;
}

const progress = 65;
const progressBar = document.querySelector('.progress__bar');

progressBar.style.width = `${progress}%`;

CSS задаёт постоянное оформление полосы, а JavaScript передаёт её текущую ширину. В этом примере браузер добавит элементу inline-стиль width: 65%. Если CSS-свойству нужна единица измерения, передавайте значение строкой: ‘120px’, ‘2rem’ или ‘65%’.

Класс и style вместе

Класс и style можно сочетать, когда они отвечают за разные задачи. Например, style.width задаёт текущий прогресс, а класс is-complete меняет цвет полосы, когда загрузка завершена.

.progress__bar.is-complete {
  background-color: #38a169;
}

progressBar.style.width = '100%';
progressBar.classList.add('is-complete');

Не задавайте одно CSS-свойство одновременно через класс и inline-стиль. Inline-значение обычно сильнее обычного CSS-правила, поэтому класс может не изменить внешний вид. В таком случае удалите inline-значение или оставьте один способ управления свойством.

Что выбрать

• Используйте CSS-класс для состояния интерфейса или нескольких связанных правил: меню открыто, кнопка загружается, поле содержит ошибку.
• Используйте style для одного значения, которое вычисляет JavaScript: ширины индикатора, размера или смещения элемента.
• Оставляйте в обычном CSS постоянное оформление, которое не зависит от работы JavaScript.

Итого

CSS-классы помогают описывать состояния элемента и сохранять связанные стили в CSS. Inline-стили через style подходят для отдельных динамических значений. Эти способы можно использовать вместе, если они меняют разные CSS-свойства.