Стилизация компонентов в React: CSS, SCSS и CSS-модули. Почему не Tailwind и не CSS-in-JS

✏️ Разберёмся, как правильно стилизовать компоненты в React. Покажу, как сейчас подключены все стили проекта через main.jsx и объясню, почему это не лучшая идея. Перенесём стили из src/styles/components внутрь компонентов и подключим их напрямую. Переведём обычные CSS/SCSS-файлы в модульные (.module.scss), переименуем классы из БЭМ-нотации в camelCase и обновим разметку. Расскажу, как работают CSS-модули, зачем они нужны и почему при таком подходе не возникает конфликтов классов. Обсудим альтернативы: Tailwind и CSS-in-JS — в чём их особенности, зачем они вообще нужны и почему я сознательно не использую их в этом курсе. В конце вы получите чистую, модульную систему стилей, где каждый компонент отвечает за свои классы. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:51 | Обзор текущей системы стилей ▶ 01:53 | Подключаем стили напрямую в компонент ▶ 04:00 | Препроцессор стилей Sass (SCSS) ▶ 05:21 | Перевод стилей на CSS-модули ▶ 18:22 | Почему не Tailwind и не CSS‑in‑JS ▶ 20:17 | Заключение 📚 Ссылки из видео: 🧑💻 Основной телеграм-канал: 💬 Коммьюнити-чат в телеграме (помощь новичкам): 🗂️ Бесплатные курсы на канале: 📌 Автор: #reactjs