Как присваивать стили объектом

Что проверяют

Знаете ли вы, как устроено свойство style у DOM-элемента и чем объект стилей отличается от CSS-строки. Вопрос часто задают в связке с React, где style принимает только объект. Следом спрашивают, когда инлайн-стиль уместен, а когда лучше переключать класс.

Как отвечать

В DOM element.style это объект CSSStyleDeclaration, с ним работают так:

• по одному свойству: el.style.backgroundColor = 'red'. Имена в camelCase, значения строками и с единицами: el.style.width = '200px', значение без единиц не применится;
• пачкой: Object.assign(el.style, { width: '200px', opacity: '0.5' }). Удобно, когда стили приходят готовым объектом из темы или конфигурации;
• CSS-переменные: el.style.setProperty('--accent', color). Через Object.assign кастомное свойство не задать, нужен setProperty, третьим аргументом он принимает 'important';
• сброс: пустая строка или removeProperty, после этого снова действуют стили из CSS;
• чтение: el.style показывает только инлайн-стили, итоговое значение даёт getComputedStyle(el).

В React объект передаётся в style={{ backgroundColor: color, width: 200 }}: числа для большинства свойств получают px автоматически, а безразмерные вроде opacity, zIndex, lineHeight остаются как есть. CSS-переменные тоже работают, ключ пишется строкой '--accent'. Во Vue то же делает :style с объектом или массивом объектов.

Инлайн-стиль сильнее любых селекторов из таблиц стилей, перебить его может только !important. Поэтому статичное оформление лучше держать в классах и переключать через classList.toggle, а объект стилей оставлять для значений, которые считаются на лету: координаты, ширина прогресса, цвет из данных.

Где спотыкаются

Передают в React строку: style="color: red". React выбросит ошибку, он ждёт объект с ключами в camelCase.

Забывают единицы в DOM. el.style.top = 10 молча не применится, и кандидат ищет ошибку в логике, а не в значении.

Меняют стили через JS на каждое событие, например на скролле. Это лишние пересчёты стилей и раскладки, лучше переключить класс или анимировать transform.