Las bibliotecas CSS-in-JS, al igual que los componentes con estilo, se han vuelto más populares en los últimos años. Encapsulan CSS hasta el nivel de componente y le permiten usar JavaScript para definir estilos reutilizables.
Al usar componentes con estilo, puede mantener la arquitectura basada en componentes que React ya refuerza. Pero la biblioteca también tiene algunas desventajas.
Cómo funcionan los componentes con estilo
los componentes con estilo La biblioteca CSS-in-JS le permite escribir CSS dentro de sus archivos de componentes. Su sintaxis es la misma que CSS, por lo que es bastante fácil de aprender. Es un término medio perfecto para los desarrolladores de JavaScript que tienden a mantenerse alejados del CSS puro.
Para ver cómo funciona, considere el siguiente componente Título que representa un elemento h1.
constante Título = con estilo.h1`
tamaño de fuente: 1.5em;
alineación de texto: centro;
color rojo;
`;
Puede usar este componente como cualquier otro componente de React.
constante Inicio = () => {
devolver (
<Título>Un encabezado de componente con estilo</Title>
)
}
También es muy potente porque facilita el trabajo con accesorios y estado.
Por ejemplo, el color y el fondo de este componente dependen de los accesorios.
importar estilizado de "componentes con estilo";constante Botón = estilo.botón`
relleno: 0.8rem 1.6 rem;
color de fondo: ${(accesorios) => (props.primary? "violeta": "blanco")};
borde: 1sólido #00000;
color: ${(accesorios) => (props.primary? "blanco": "violeta")};
`;
exportardefectofunciónHogar() {
devolver <Botón principal>Primario</Button>
}
Con los componentes con estilo, no es necesario pasar manualmente los accesorios al CSS. Está disponible automáticamente, lo que simplifica los estilos de escritura que dependen de los datos del componente.
Ventajas de usar componentes con estilo
Estas son algunas de las ventajas de usar la biblioteca de componentes con estilo.
Resuelve problemas de especificidad de CSS
Los componentes con estilo eliminan los problemas de especificidad ya que encapsulan CSS dentro de un componente. Esto significa que no tiene que preocuparse de que los nombres de las clases coincidan o de que su IU se convierta en un desastre debido a los conflictos de nombres de las clases.
Le permite escribir componentes internos de CSS
Como se ve en el ejemplo del componente del botón, los componentes con estilo le permiten combinar CSS y JS en el mismo archivo. Por lo tanto, no necesita crear un archivo CSS separado o seguir cambiando de un archivo a otro.
Esta es una gran ventaja al crear kits de interfaz de usuario porque almacena toda la funcionalidad de los componentes en un archivo.
Aparte de eso, escribir CSS dentro de los componentes. Hace que sea más fácil compartir accesorios y estados con estilos.
Permite la verificación de tipos
Con los componentes con estilo, puede verificar los accesorios y los valores utilizados en sus estilos. Por ejemplo, puede reescribir el componente de botón de arriba usando TypeScript.
interfazaccesorios{
primario: booleano
}
botón const = estilo.botón<accesorios>`
relleno: 0.8rem 1.6 rem;
color de fondo: ${(accesorios) => (props.primary? "violeta": "blanco")};
borde: 1sólido #00000;
color: ${(accesorios) => (props.primary? "blanco": "violeta")};
`;
Usando TypeScript en el componente significa verificar los errores de tipo a medida que codifica y reducir el tiempo de depuración.
Admite temas listos para usar
Agregar un tema oscuro o cualquier otro tema para su aplicación puede ser difícil y llevar mucho tiempo. Sin embargo, los componentes con estilo simplifican el proceso. Puede agregar temas a su aplicación exportando un
constante Botón = estilo.principal`
color de fondo: ${props => accesorios.tema.luz.fondo};
color: ${accesorios => accesorios.tema.luz.fontColor};
`
<ThemeProvider tema={tema}>
<Botón>
Botón de luz
</Button>
</ThemeProvider>
El componente ThemeProvider pasa los temas a todos los componentes con estilo que envuelve. Estos componentes pueden usar los valores del tema en sus estilos. En este ejemplo, el botón usa los valores del tema para los colores de fondo y fuente.
Contras de usar componentes con estilo
Si bien el uso de la biblioteca de componentes con estilo tiene muchos beneficios, también tiene desventajas.
No es independiente del marco
Escribir CSS en JS significa que separar los dos en el futuro será difícil, lo cual es terrible para la mantenibilidad. Por ejemplo, si alguna vez decide cambiar su Marco de JavaScript, deberá volver a escribir la mayor parte de su base de código.
Esto requiere mucho tiempo y es costoso. Usando Módulos CSS o una biblioteca independiente del marco como la emoción está más preparada para el futuro.
Puede ser difícil de leer
La diferenciación entre componentes con estilo y React puede ser difícil, especialmente fuera de un sistema de diseño atómico. Considere este ejemplo:
<Principal>
<Navegación>
<ListItem>
<Texto del enlace>Adoptar una mascota</LinkText>
</ListItem>
<ListItem>
<Texto del enlace>Donar</LinkText>
</ListItem>
</Nav>
<Encabezamiento>adopta, don'no compre!</Header>
<SecundarioBtn btnText="Donar" />
</Main>
La única forma de saber qué componente contiene lógica empresarial es comprobando si tiene accesorios. Además, aunque los nombres de los componentes en este ejemplo son descriptivos, sigue siendo difícil visualizarlos.
Por ejemplo, el componente Encabezado puede ser un encabezado, pero a menos que verifique los estilos, es posible que nunca sepa si es h1, h2 o h3.
Algunos desarrolladores resuelven este problema usando solo el componente con estilo como contenedor y usando las etiquetas HTML semánticas para los elementos que contiene.
En este ejemplo, el componente de encabezado podría usar una etiqueta h1.
<h1>adopta, don'no compre!</h1>
Puede llevar esto más allá definiendo los componentes con estilo en otro archivo (por ejemplo, styled.js), que luego puede importar a un componente de React.
importar * como con estilo de './estilo'
// usar componentes con estilo
<estilizado Principal>
// codigo
</styled.Main>
Hacer esto le brinda una visión clara de qué componentes tienen estilo y cuáles son componentes de React.
Los componentes con estilo se compilan en tiempo de ejecución
Para las aplicaciones que usan componentes con estilo, el navegador descarga el CSS y lo analiza usando JavaScript antes de inyectarlo en la página. Esto provoca problemas de rendimiento porque el usuario debe descargar una gran cantidad de JavaScript en la carga inicial.
El CSS estático es mucho más rápido. No es necesario procesarlo antes de que el navegador lo use para diseñar páginas. Sin embargo, la biblioteca de componentes con estilo mejora con cada versión. Si puede permitirse un rendimiento reducido, continúe y utilícelo.
Cuándo usar componentes con estilo
Algunos desarrolladores disfrutan escribiendo CSS en archivos JS, mientras que otros prefieren tener archivos CSS separados. La forma en que elija escribir CSS debe depender en última instancia del proyecto en sí y de lo que le guste a usted o a su equipo. Los componentes con estilo son una buena opción para crear una biblioteca de interfaz de usuario, ya que todo puede estar en un archivo y exportarse y reutilizarse fácilmente.
Si prefiere escribir CSS puro, use módulos CSS. Puede tener archivos CSS separados y, de forma predeterminada, abarca los estilos localmente. Independientemente de la elección que haga, tener un conocimiento sólido de CSS es esencial.
