CSS en JavaScript

CSS-in-JS es una técnica de estilismo mediante la cual se utiliza JavaScript para dar estilo a los componentes. Cuando se analiza este JavaScript, se genera CSS<style> (generalmente como un elemento) y se adjunta al DOM . Permite la abstracción de CSS al nivel del componente mismo, utilizando JavaScript para describir los estilos de una manera declarativa y mantenible. Existen múltiples implementaciones de este concepto en forma de bibliotecas como

• Emoción ^{[ 1 ]}
• Componentes con estilo ^{[ 2 ]}
• JSS ^{[ 3 ]}

Estas bibliotecas permiten la creación de componentes con estilo mediante plantillas literales etiquetadas. Por ejemplo, el uso de componentes con estilo en un proyecto de React se vería así:

import styled from '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 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 tan solo unas pocas sentencias condicionales. Los programadores también pueden escribir código más modular, encapsulando el CSS en el mismo bloque que el JavaScript, limitando su alcance únicamente a ese módulo.

CSS-in-JS es utilizado por Reddit , Patreon , Target , Atlassian , Vogue , GitHub y Coinbase . ^{[ 4 ]}