CSS-in-JS es una técnica de diseño mediante la cual se utiliza JavaScript para diseñar componentes. Cuando se analiza este JavaScript, se genera CSS<style> (normalmente como un elemento) y se adjunta al DOM . Permite la abstracción de CSS al nivel del componente en sí, utilizando JavaScript para describir estilos de forma declarativa y mantenible. Existen múltiples implementaciones de este concepto en forma de bibliotecas como
Estas bibliotecas permiten la creación de componentes con estilo mediante literales de plantilla etiquetados. Por ejemplo, el uso de componentes con estilo en un proyecto de React se vería de la siguiente manera:
importar con estilo desde 'styled-components' ; // Crea un componente que renderiza un elemento <p> con texto azul const BlueText = styled . p ` color: blue; ` ; < BlueText > Mi texto azul < /BlueText> Algunos de los resultados que se pueden lograr con CSS-in-JS no se pueden obtener con las técnicas CSS tradicionales . Es posible hacer que los estilos sean dinámicos con solo unas pocas declaraciones condicionales. Los programadores también pueden escribir código más modular, en el que el CSS se encapsule en el mismo bloque que el JavaScript del programador, limitándolo únicamente a ese módulo.
CSS-in-JS es utilizado por Reddit , Patreon , Target , Atlassian , Vogue , GitHub y Coinbase . [4]