На какой технологии писал бы CSS на новом проекте?

Выбор технологии для CSS: комплексный подход

На новом проекте я выбрал бы Tailwind CSS как основной инструмент, и вот почему.

Почему Tailwind CSS

Tailwind предоставляет utility-first подход, который идеально подходит для современной разработки. Вместо написания кастомных классов, ты используешь готовые утилиты, что значительно ускоряет разработку и обеспечивает консистентность дизайна.

// ✅ Tailwind - быстро и консистентно
<button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
  Click me
</button>

// ❌ CSS Modules - больше кода
// button.module.css
.btn {
  padding: 8px 16px;
  background-color: #3b82f6;
  border-radius: 8px;
  /* ... много повторяющегося кода */
}

Преимущества Tailwind

Скорость разработки: Не нужно придумывать названия классов или переключаться между файлами.

Консистентность: Фиксированная палитра цветов, размеров и расстояний предотвращает дизайн-деградацию.

Меньше CSS файлов: Вся логика стилей в разметке, легче рефакторить компоненты.

PurgeCSS: На продакшене финальный CSS содержит только используемые классы, размер файла минимален.

Когда использовать CSS-in-JS

Если проект требует динамических стилей (анимации, темы, runtime-вычисляемые значения), добавлю Emotion или Styled Components:

import styled from "styled-components";

const StyledButton = styled.button`
  padding: 8px 16px;
  background-color: ${props => props.primary ? "#3b82f6" : "#e5e7eb"};
  border-radius: 8px;
  transition: background-color 0.2s;
  
  &:hover {
    background-color: ${props => props.primary ? "#1d4ed8" : "#d1d5db"};
  }
`;

Комбинированный подход

На практике я комбинирую оба подхода:

• Tailwind для базовой стилизации и layout
• CSS Modules для сложных, переиспользуемых компонентов с состояниями
• CSS-in-JS только для динамических стилей, зависящих от runtime-состояния

// components/Card.tsx
import styles from "./Card.module.css";

export function Card({ isDark, children }) {
  return (
    <div className={`${styles.card} ${isDark ? styles.dark : ""}`}>
      {children}
    </div>
  );
}

// Card.module.css
.card {
  @apply rounded-lg border border-gray-200 p-4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card.dark {
  @apply border-gray-700 bg-gray-900;
}

Для очень больших проектов

Если это энтерпрайз с дизайн-системой, рассмотрел бы PostCSS с собственными плагинами или Sass для управления переменными и миксинами.

Но для 90% проектов Tailwind CSS остаётся лучшим выбором: быстро, масштабируемо, просто.