CSS-in-JS — это метод стилизации, с помощью которого JavaScript используется для стилизации компонентов. Когда этот JavaScript анализируется, генерируется CSS<style> (обычно как элемент) и прикрепляется к DOM . Он позволяет абстрагировать CSS на уровень самого компонента, используя JavaScript для описания стилей декларативным и удобным для сопровождения образом. Существует несколько реализаций этой концепции в виде библиотек, таких как
Эти библиотеки позволяют создавать стилизованные компоненты с использованием помеченных литералов шаблона. Например, использование стилизованных компонентов в проекте React будет выглядеть следующим образом:
Некоторые результаты, которых можно достичь с помощью CSS-in-JS, невозможно получить с помощью традиционных методов CSS . Можно сделать стили динамическими с помощью всего лишь нескольких условных операторов. Программисты также могут писать более модульный код, при этом CSS инкапсулируется в тот же блок, что и JavaScript программиста, ограничивая его только этим модулем.