CSS-In-JS. Кратко, кто все еще считает, что это говно. На примере

styled-components.
Плюсы:
- JS - можно все и даже больше
- CSS - знаешь CSS значит норм можешь писать SC.
- Поддержка тем как боженька.
- Стили становятся по настоящему компонентными. Вся логика и пр. программатично и легко описывается без секаса с препроцессорами и джонглированием класснеймов.
- Бабель, Вебпак и прочая хрень. Оптимизируй не переоптимизируй, анализируй не переанализируй.
- Отличная поддержка всех IDE.
- JS = полностью модульная хреновина. Импортируются только нужные стили и вот это вот все. Не нужно тащить 60кб CSS файла, когда ты хочешь поюзать один чертов дропдаун из какой-то либы компонентов.
- Работает с React Native, react-sketchapp и прочими рендерерами. Опять же прекрасное переиспользование от этого.
- Из-за этого что это ЖС, найти где какие стили используются элементарно. Просто Find usages и оно найдет все компоненты, которые импортируют этот стайлед компонент и экстендят его и прочие ништяк и удобности.
- Не используешь кусок? ESLint обложит матом, так же как и IDE подсветит неиспользуемый экспорт/импорт
- Stylelint и прочая хрень, работает чотенько.
- Делает код очень читабельным и семантически красивым. У тебя не гора див див див секшн див и вагон класснеймов к ним, весь твой код семантически красивее и короче и тебе не нужно смотреть на класснеймы и вообще их придумывать.
- Не нужно ручками извращаться с Бемом.
- Т.е. полная изоляция стилей.
- Ноль конфигурации. Просто юзаешь.
- Офигенная работа с медиа кверями. Просто любовь. (смотри styled-system)
- Полная поддержка старого CSS и интероперабильность, если тебе хочеься переписывать кусочками.
И многое другое...

Минусы:
- Перформанс при 4000к элементах. Что нихрена днище и не реалистичный юзкейс.

Как починить?
- Юзай emotion, либо юзай styled-components и не будь сильно умным все будет скоро ок. emotion под капотом использует тот же CSS парсер и многие внутряки слизал, но работает при 4000к элементов на 5% медленнее CSS Modules.

Проблемы:
- Нет интероперабильности с другими CSS-in-JS либами. Захотел замипортить компонент написанный на эмоушене и др. нужен рантайм емоушна - дно.

Хорошие новости:
- ISTF приходит на помощь и вроде как должен решить многие перф проблемы и интероперабилити довести до 100%.

Такие дела.

Оч классно все расписал.