Es la forma de escribir CSS dentro de JavaScript y no reemplaza los estilos normales ya que al final de CSS-in-JS genera un CSS normal, la diferencia es en como estamos escribiendo y usando estos estilos en nuestra aplicación.
También tenemos a los preprocesadores y postprocesadores de CSS que nos dejan escribir CSS de manera más sencilla usando variables, ciclos, mixings, filtros, funciones, 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.
Con CSS-ion-JS logramos que no solo la estructura HTML y la lógica JS de estén en los componentes sino también el CSS.
Otra ventaja es que podemos aprovechar JS para programar nuestros estilos y hacer estilos dinámicos.
Trabajar con CSS-in-JS no significa que no podamos usar estilos globales.
<aside> 📌 “Los estilos globales no son una desventaja en CSS-in-JS”
</aside>
Una introducción a CSS-in-JS: Ejemplos, ventajas y desventajas
Son estilos con CSS común y corriente, Angular ya viene listo para que al aplicar estos estilos funcione sin configuraciones.
Angular dependiendo de si los estilos son globales o no, va a crear clases especiales para que nuestros estilos no afecten a toda la aplicación sino al solo al HTML de nuestros componentes.
El editor marca error en la etiqueta <form> , esto no es un error grave pero si es importante para Vue, Se debe a que Vue espera que le digamos cuál va a ser el identificador de cada elemento que se está iterando y así evitar problemas de reactividad en el futuro.
La forma de solucionarlo es añadiendo un atributo :key a la etiqueta:
<form v-for="movie in movies" :key="movie.name">
En este caso se está usando el atributo namede cada película como identificador
Lo ideal seria que cada película trajera ya un ID y lo usáramos.
Otra forma mucho más práctica para solucionar esto es decirle a Vue que genere un ID con autoincremento, de esta forma:
<form v-for="(movie, i) in movies" :key="i">
De esta forma, en la variable iVue puede ir guardando un contador que puede actuar como id, simplemente se lo pasamos al :key