No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Prep谩rate para tu pr贸ximo empleo comprando hoy a precio especial

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

8 D铆as
0 Hrs
19 Min
48 Seg

Qu茅 es CSS-in-JS

17/28
Recursos

Aportes 15

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

CSS-in-JS

CSS-in-JS es una t茅cnica de dise帽o en la que se usa JavaScript para dise帽ar componentes. Cuando se analiza este JavaScript, se genera CSS y se adjunta al DOM. Permite abstraer CSS al nivel de componente en s铆, usando JavaScript para describir estilos de una manera declarativa y mantenible.
Wikipedia

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 鈥渢endr谩鈥 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.

鈥淟os 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.

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.