Что выберешь CSS или CSS in JS?

Мой выбор: традиционный CSS с современными практиками

Как senior frontend-разработчик с более чем 10-летним опытом, я не выбираю между CSS и CSS-in-JS как между абсолютными противоположностями. Это инструменты с разными сильными сторонами, и мой выбор зависит от контекста проекта, команды и требований. Однако, если говорить о предпочтительном подходе в 2024 году для большинства проектов, я склоняюсь к современному CSS с методологиями типа CSS Modules, Utility-first (Tailwind) или просто хорошо организованными каскадными таблицами.

Почему не только CSS-in-JS?

CSS-in-JS (Styled Components, Emotion, etc.) был революционным несколько лет назад, решая ключевые проблемы:

// Пример Styled Components
import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  padding: 1rem 2rem;
  border-radius: 4px;
  
  &:hover {
    opacity: 0.9;
  }
`;

// Использование с пропсами
<Button primary>Кнопка</Button>

Преимущества CSS-in-JS:

• Локальность стилей — стили привязаны к компонентам
• Динамические стили — легкая работа с пропсами и состоянием
• Нет конфликтов классов — автоматическая генерация уникальных имен
• JavaScript-мощь — использование переменных, функций, условий

Но появились и серьезные недостатки:

• Производительность — runtime вычисления, дополнительный JavaScript
• Сложность отладки — сгенерированные классы в DevTools
• SSR проблемы — hydration mismatch, увеличение bundle size
• Экосистема — сложнее работать с CSS-инструментами (PostCSS, препроцессоры)

Возрождение традиционного CSS

Современный CSS эволюционировал и теперь включает возможности, которые раньше требовали CSS-in-JS:

/* Современный CSS с Custom Properties и слоями */
:root {
  --primary-color: oklch(45% 0.2 250);
  --spacing-md: 1rem;
  --radius-sm: 4px;
}

@layer components {
  .button {
    padding: var(--spacing-md) calc(var(--spacing-md) * 2);
    border-radius: var(--radius-sm);
    transition: opacity 0.2s;
    
    &--primary {
      background: var(--primary-color);
    }
    
    &:hover {
      opacity: 0.9;
    }
  }
}

Мой подход в зависимости от контекста

Для больших долгосрочных проектов (корпоративные приложения):

• CSS Modules или SASS/SCSS Modules с BEM-методологией
• Почему: предсказуемость, производительность, легкая onboarding новых разработчиков
• Пример структуры:

components/
  Button/
    index.tsx
    Button.module.scss    # Локальные стили
    Button.test.tsx
styles/
  global.scss            # Глобальные стилы
  variables.scss         # CSS Custom Properties
  mixins.scss            # SCSS миксины

Для дизайн-систем и UI-библиотек:

• Vanilla Extract или Tailwind CSS
• Почему: типобезопасность, zero-runtime, отличная документированность

// Vanilla Extract пример - типобезопасный CSS-in-JS без runtime
import { style } from '@vanilla-extract/css';

export const button = style({
  padding: '1rem 2rem',
  borderRadius: '4px',
  selectors: {
    '&:hover': {
      opacity: 0.9
    }
  }
});

Для быстрых прототипов и стартапов:

• Tailwind CSS или UnoCSS
• Почему: скорость разработки, consistency, малый bundle size

// Tailwind CSS подход
const Button = ({ primary, children }) => (
  <button className={`
    px-8 py-4 rounded
    ${primary ? 'bg-blue-600' : 'bg-gray-600'}
    hover:opacity-90
    transition-opacity
  `}>
    {children}
  </button>
);

Ключевые критерии выбора

При принятии решения я оцениваю:

1. Команда и expertise — что знают разработчики?
2. Масштаб проекта — MVP или enterprise-приложение?
3. Требования к производительности — нужен ли SSR, каковы метрики Core Web Vitals?
4. Дизайн-система — насколько сложны и динамичны стили?
5. Долгосрочная поддержка — насколько легко будет сопровождать код через 2-3 года?

Вывод

Если бы мне пришлось выбирать один подход для нового greenfield проекта в 2024, я бы выбрал CSS Modules с SCSS и CSS Custom Properties. Этот подход дает:

• Отличную производительность (нулевой runtime overhead)
• Превосходную developer experience с TypeScript
• Простую миграцию при необходимости
• Совместимость со всей экосистемой CSS

CSS-in-JS я бы использовал только в специфических случаях: когда нужна очень динамичная стилизация на основе сложного состояния приложения, или в проектах где уже есть устоявшаяся инфраструктура на этом решении.

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