Что хотят услышать интервьюеры:

CSS-in-JS популярен, потому что позволяет писать стили рядом с компонентами и управлять ими через JavaScript. Это упрощает поддержку интерфейса, уменьшает риск конфликтов классов и помогает переиспользовать стили как обычную логику. Часто это особенно удобно в компонентных фреймворках, где UI уже строится вокруг компонентов.

Определение:

CSS-in-JS — это подход, при котором стили создаются и применяются через JavaScript-код, обычно внутри компонентов. Вместо отдельных .css-файлов стили описываются там же, где и разметка или логика компонента. Такой подход часто используют для локальной области видимости стилей, динамических значений и удобной композиции.

Пример использования:

Например, кнопка может менять цвет в зависимости от состояния disabled или темы.

const buttonStyle = (disabled) => ({
  backgroundColor: disabled ? '#ccc' : '#007bff',
  color: '#fff',
  padding: '8px 12px',
  border: 'none',
  borderRadius: '4px',
  cursor: disabled ? 'not-allowed' : 'pointer',
});

function Button({ disabled, text }) {
  return <button style={buttonStyle(disabled)} disabled={disabled}>{text}</button>;
}

Пояснение кода:

Функция buttonStyle возвращает объект со стилями.
Значения стилей зависят от входного параметра disabled.
Если кнопка отключена, фон становится серым и курсор меняется.
Компонент Button применяет эти стили прямо к элементу <button>.
Такой подход показывает ключевую идею CSS-in-JS: стиль может быть динамическим и связанным с состоянием компонента.

Ключевые моменты:

Стили локализованы рядом с компонентом, поэтому проще поддерживать код.
Легко задавать динамические стили в зависимости от props, состояния или темы.
Меньше проблем с конфликтами имен классов и переопределением стилей.
Удобно переиспользовать стилевые куски как обычные JS-объекты или функции.
Минусы тоже есть: часть решений добавляет runtime-накладные расходы и усложняет отладку по сравнению с обычным CSS.

Что делает использование CSS-in-JS популярным среди современных веб-разработчиков?