Qué es CSS-in-JS

17.-¿Qué es CSS-in-JS?

Es literalmente escribir CSS desde JS y no, no reemplaza a los estilos normales ya que al final CSS-in-JS genera un CSS normal, la diferencia esta en como lo escribimos cuando estamos desarrollando la aplicación y como aumenta la ventaja de trabajar con componentes.

También tenemos a los preprocesadores y postprocesadores de CSS que nos dejan escribir CSS de manera más sencilla usando variables, ciclos, mixins, filtros, funcione, etc. Los postprocesadores nos permiten usar las funcionalidades que CSS “tendrá” en el futuro y nos dejan usarlas desde ya, también compilan a CSS normal.

Componentes y CSS-in-JS

Logramos que no solo la estructura HTML y lógica en JS de cada componente este dentro de componentes, también logramos que el CSS este dentro del componente.

Otra ventaja es que podemos usar JS para programar nuestros estilos y hacerlos dinámicos.

“Los estilos globales no son una desventaja en CSS-in-JS”

CSS-In-Js es la forma de escribir CSS desde JS. Estos no reemplazan los estilos normales, después de todo CSS-In-JS se convierten en estilos normales.

La forma de trabajar en CSS es escribiendo Hojas de estilo y linkeando este a nuestra pagina HTML. Pero también tenemos a los preprocesadores que nos dejan programar de una forma mas agradable el CSS y esto lo compilan a código CSS normal.

Con CSS-in-Js nos ayuda que la estructura sea mas sencilla con mejor organización para así poder ordenar todo entre componentes, al igual que con JS podemos hacer estilos dinámicos.

Podemos utilizar funciones para condicionar algunos estilos dentro de esto, al igual que hacer condiciones dependiendo del contexto de la aplicación.

Los estilos globales no son una desventaja de CSS-in-Js

En lo personal me gusta la manera en como NextJS ha implementado styled-jsx, una manera bastante similar a styled components.

Aqui les dejo un pequeño articulo que profundiza a detalle Css in Js:
https://webdesign.tutsplus.com/es/articles/an-introduction-to-css-in-js-examples-pros-and-cons--cms-33574

easy peace!!!

Desde Wikipedia.

En español podemos encontrar que template literals, también llamado acento inverso, tilde griega. Podemos decir que es el simbólo prima, Usado para marcar segundos.

Cómo sea que la conozcan, cuidensé de ella y confundirla por apóstrofo (comilla simple)

Acento agudo (en negro) sobre «I» mayúscula; apóstrofo (en verde); comilla simple recta (en rojo); prima (en azul); acento agudo (en negro) sobre «i» minúscula; en los tipos de letra Arial, Calibri, Tahoma, Times New Roman y Linux Libertine.

Mis apuntes en Notion💚

Al principio tenía mis dudas, pero viendolo así me parece genial porque nos ordena mucho el codigo

CSS-in-JS me parece interesante la forma que se puede escribir código CSS desde JavaScript para trabajar con componentes

CSS-in-JS

Es escribir CSS con JavaScript
.
Nos ayuda que la estructura sea mas sencilla con mejor organización para así poder ordenar todo entre componentes, al igual que con JS podemos hacer estilos dinámicos.

AMEEEEEEEENNN

Yo siempre tenia conocimiento de que existe SASS pero seguramente es muy avanzado integrarlo en JavaScript, deberiamos probarlo muy pronto.