Почему типизация в TS удобнее, чем в чистом CSS?

Чистый CSS гибкий, но почти не защищает от ошибок.

Определение

Определение: Типизация в TS — это способ заранее ограничить допустимые значения и структуры данных, чтобы ошибки находились при разработке, а не в браузере.

Что даёт TypeScript поверх CSS

1. Автодополнение

   • IDE подсказывает доступные токены, варианты, темы.

2. Проверка ошибок

   • Опечатки в названиях (primaryy) ловятся сразу.

3. Безопасный рефакторинг

   • Переименование токена обновляет все использования.

4. Ограничение значений

   • Можно явно задать допустимые варианты ("small" | "medium" | "large").

Пример: ограничения через TS

type Size = "sm" | "md" | "lg";

export const button = {
  sm: "4px",
  md: "8px",
  lg: "12px",
} satisfies Record<Size, string>;

В чистом CSS такие ошибки проявятся только визуально.

Где это особенно полезно

1. Дизайн-системы и UI-киты

2. Темизация (light/dark, brand themes)

3. Большие команды и долгоживущие проекты

Вывод

Типизация делает стили безопаснее, удобнее и масштабируемее, особенно когда CSS перестаёт быть “просто парой файлов”, а становится частью архитектуры.