🚫 Inline-стили: удобство, которое вредит

Когда нужно быстро покрасить кнопку или отступ подвинуть, рука сама тянется к style={{ ... }}.

Но inline-стили — это как фастфуд: быстро, удобно, но вредно для здоровья проекта.

1. 🧩 Ограниченная функциональность

Inline-стили не поддерживают базовые возможности CSS:

• ❌ Псевдоклассы (:hover, :focus, :active)

<button style={{ color: 'red' }}>Не будет работать :hover без CSS!</button>

• ❌ Псевдоэлементы (::before, ::after)
• ❌ Медиа-запросы (@media)
• ❌ Анимации (@keyframes)
• ❌ CSS-переменные (var(--color-primary))

🙅‍♂️ Эти ограничения делают inline-стили бесполезными для адаптивного дизайна и сложных интерфейсов.

2. 🐢 Проблемы с производительностью

Inline-стили встраиваются в DOM напрямую. Это значит:

• Нет переиспользования CSS-классов,
• Браузер не может оптимизировать повторяющиеся стили,
• Сложнее кешировать и ускорить рендеринг.

3. 🧠 Нарушение принципа разделения ответственности

Стили — это визуальное оформление. Логика — это поведение.

Inline-стили мешают их разделить:

// плохо
<div style={{ padding: 10, backgroundColor: 'blue' }}>Контент</div>
 
// хорошо
<div className="box">Контент</div>

4. 🎯 Проблемы с переопределением

CSS работает по каскадному принципу. Inline-стили имеют наивысший приоритет, их сложно переопределить:

.button {
	color: green; /* не переопределит style={{ color: 'red' }} */
}

🙃 Это усложняет работу с компонентами и делает их «неподатливыми». Потом часами смотрим, где летит верстка в проекте. Разбираемся в бесконечно ленте стилей и ищем, где переопределяется стиль итд.

5. 🎨 Сложности с темизацией и переиспользованием

Когда стили внутри компонента:

• Трудно применить тёмную/светлую тему,
• Невозможно использовать CSS-переменные,
• Приходится дублировать стили в каждом компоненте.

6. 🤹‍♀️ Невозможно использовать динамическую логику CSS

Например, стили на :hover или :focus не задаются inline — и приходится городить useState/useEffect и писать костыли:

const [hover, setHover] = useState(false);
 
<button
	style={{ color: hover ? 'red' : 'black' }}
	onMouseEnter={() => setHover(true)}
	onMouseLeave={() => setHover(false)}
>
	Наведи мышку
</button>;

👎 Вместо одной строки CSS — целый мини-хак.

🔄 Когда inline-стили допустимы?

Иногда всё же можно:

• Динамические значения (например, width: ${progress}%)
• Email-шаблоны (где других вариантов просто нет)
• Быстрый прототип/временное решение
• Работа с third-party-виджетами, где нельзя подключить CSS-файл

📝 Вывод

Inline-стили — это не зло. Но:

• ❌ Они ограничены функционально,
• ❌ Ухудшают производительность,
• ❌ Нарушают чистую архитектуру,
• ❌ Усложняют поддержку и темизацию.

📌 Используйте CSS-модули, Emotion, Styled Components — что угодно, но не пихайте всё в style={{…}}. «Inline-стили — как фастфуд: быстро, но не полезно для долгосрочного здоровья проекта» 🍔🚫.