В чем плюсы и минусы разных способов подключения стилей

Inline-стили
Плюсы:

• Высокий приоритет (перебивают другие стили)
• Удобны для быстрых правок в devtools

Минусы:

• Невозможно переиспользовать
• Засоряют HTML
• Нет поддержки медиа-запросов

<div style="color: red;">Текст</div>

Тег <style>
Плюсы:

• Локальные стили для компонента
• Поддержка медиа-запросов

Минусы:

• Глобальное пространство имен (возможны конфликты)

<style>
  .text { color: blue; }
</style>

Внешние CSS-файлы
Плюсы:

• Переиспользование стилей
• Кэширование браузером
• Лучшая поддержка в команде

Минусы:

• Дополнительные HTTP-запросы
• Глобальная область видимости

<link rel="stylesheet" href="styles.css">

CSS-in-JS (Styled Components и др.)
Плюсы:

• Изоляция стилей
• Динамические стили на основе пропсов
• Поддержка темизации

Минусы:

• Оверхед в рантайме
• Сложнее дебажить

const StyledDiv = styled.div`
  color: ${props => props.color};
`;