Почему есть три разные технологии для HTML, CSS и JavaScript?

HTML, CSS и JavaScript разделены, потому что отвечают за разные вещи: структуру, представление и поведение. Это принцип разделения ответственности.

Почему так удобно

• Одна разметка — разное оформление: темы, печать, мобильная версия без изменения HTML.
• Доступность и SEO — смысловая разметка понятна скринридерам и поисковикам независимо от стилей и скриптов.
• Устойчивость — если скрипт не загрузился, страница всё равно показывает содержимое (прогрессивное улучшение).
• Производительность — браузер обрабатывает каждый слой своим механизмом: CSS декларативно и быстро, JS — для логики.
• Разделение работы — верстальщик, дизайнер и разработчик могут работать параллельно.

А как же компоненты

В React и Vue разметка, стили и логика лежат рядом в одном компоненте. Это не отказ от принципа: роли остаются разными, просто группируются по функциям, а не по типам файлов.

Коротко для собеседования

HTML — структура, CSS — вид, JS — поведение; разделение даёт гибкость оформления, доступность, устойчивость и производительность.

Подробнее: MDN — Прогрессивное улучшение