LLEGÓ LA NUEVA FORMA DE ESCRIBIR CSS: CSS ANIDADO
Vložit
- čas přidán 8. 09. 2024
- Ya podemos hacer CSS Nestting o CSS anidado en las últimas versiones de Chome y aquí te voy a mostrar como usarlo. #css #cssnesting #cursocss
👍 Apóyame con un like para llegar a más developers 😊
✅ Te invito a suscribirte al canal 👉 bit.ly/CZcams-...
🔔 Activa la campanita para notificarte del siguiente video
✅ Sígueme en las redes sociales:
Discord / discord
Facebook / vidamrr
Twitter / vidamrr
Instagram / vidamrr
Tiktok / vidamrr
Twitch / vidamrr
❤ únete al canal para obtener beneficios exclusivos:
/ @vidamrr
😍 Más videos dentro del canal:
Consejos para developers - Vlogs bit.ly/mrr-vlogs
Proyectos web completos bit.ly/mrr-pro...
Cursos completos GRATIS bit.ly/primera-app
Curso de Node.js bit.ly/mrr-curs...
Curso de PHP + MySQL bit.ly/mrr-curs...
Basicos Dev bit.ly/basicos-dev
Resolviendo pruebas tecnicas bit.ly/problema...
Tutoriales Javascript bit.ly/tutorial...
Curso básico de CSS bit.ly/curso-cs...
Esta genial!
A mi parecer es una forma mas limpia y ordenada de escribir CSS, creo que sera cuestion de tiempo para que remplace a sass en varios puntos, implemente funciones etc.
Los anidado puede ser mejor por que reduce el tiempo y codigo de mejor forma. es buenisimo y que siga evolucionando si es posible que sea con funciones CSS
como seria una funcion css? porque si se trata de declarar un codigo y reproducirlo en otra parte ya estan las animaciones
Buen video , para los que usamos Sass se nos hace mas facil fimiliarizarnos y lo mejor es que no se neceista compilar para que el navegador entienda que es css ❤.
pero hay que saber usarlo y no abusar de ello por que si no la sabes usar bien vas a terminar haciendo un Callback Hell como en JavaScript.😂😂
Si, hay que saber cuando sí usarlo y hasta qué nivel para que no parezca laberinto jajaja
Excelente novedad ! Yo llevo tiempo con SCSS así que lo tengo bastante interiorizado, pero es genial ver que CSS lo va incorporando de manera nativa.
me gusta que CSS nativo vaya evolucionando por eso me gusta tanto styled components por el CSS anidado
Esto es magnifico, para proyecto mucho mas complejos no sera tomando en cuenta, pero para proyectos pequeños es muy util porque el anidado hace el mantenimiento y legibilidad de los estilos mucho mas sencillo
Gracias por traernos esta información reciente, yo a penas estoy estudiando programación y todo este tipo de artículos me sirve mucho ☺
Tantos años usando scss y por fin llega una de las funciones que más uso del compilador.
Ahora si lo que viene una combinación hermosamente fascinante jej
En lo personal esta sintaxis puede llegar a ser muy útil a la hora de mantener el código, es más intuitiva de leer y fácil de encontrar a simple vista lo que uno busca, a demás deja todo ordenado. En lo personal es un gran aporte a pesar de que no agrega funcionalidad, agrega utilidad para los desarrolladores.
Ya existia en saas
Interesante, gracias por la explicación con el ejemplo
Para mi todo depende del qué tan ordenado seas para escribir tus estilos. Si ya estás acostumbrado a usara alguna metodología como BEM o alguna otra, y ya eres productivo así entonces puedes seguir igual, pero si eres de los que va tirando estilos sin seguir algun tipo de órden entonces si conviene usar esta forma porque te obliga a dejar todo el css de un componente en un solo bloque. Saludos!
En algún punto me hizo acordar al tema de las promesas y los callback hell. Pero me imagino que según en escenario puede ser útil. En todo caso es una opción más a tener en cuenta 👏🏻👏🏻👏🏻
Recuerdo que la primera vez que salió el nestina lo empecé usar con PostCSS y me cansaba mucho usar el "&" para todo, ahora veo que cambió y lo han adecuado para que se parezca mas a Sass, quedo super contento, hoy en dia hacer nesting en css no es una opcion es una necesidad tremenda para crear apps modernas y modulares. Cuando sea mas compatible seguro lo usaré en todos mi web sites, pero por ahora sigo con PostCSS y Sass. Saludos 👍
Excelente tutorial. ¡Muchas gracias!
Gracias Marcos, me llegó la notificación y me alegré. Pensé que estaba soportado en más navegadores, pero va en ese camino; así que será cuestión de tiempo. Gracias por el contenido fresco.
Excelente información!!!
Bendiciones desde Venezuela
Me agrada el estilo anidado. Llevo poco menos de 1 año en este nuevo desafío de aprender a programar y en mi caso creo que estaré adoptando este nuevo formato.
acuerdate que no esta soportado por todos los navegadores en este momento
@@franciscochiri5240 Gracias Francisco! Tienes toda la razón.
Prefiero el css como esta. Tampoco hacía falta hacer las rutas tan largas para llamar un selector hay formas de llegar directamente. Pero si css esta avanzando para que no haga falta usar Preprocesadores me parece buena idea aunque nunca lo he usado.
Siento que a partir de esto vamos a ver mucho código repetido
A ver una aclaración. Si que se parece a SASS pero no es lo mismo. SASS no solo es selectores anidados, tambien tiene bucles y condicionales asi como funciones integradas nativamente en SASS. Otra cosa que si has trabajado en librerias de UI sabras q puedes hacer algo parecido a template string pero en los selectores. Igual esta muy bueno pero para mi gusto prefiero SASS por delante.
Los estilos anidados permiten una mejor visualización de la estructura del archivo css.
la verdad le estoy tomando el gustito a sass en la manera de anidar selectores, se me hace mucho mas facil a la hora de estilar, por ende me parece perfecto que CSS esté implementando este sistema😃
La mejor noticia que he escuchado 🎉
No noto mucha diferencia con scss me agrada, espero que sigan agragando mas mejoras❤
y pasa que no hay que andar compilando ni nada
Ya era hora, venía semanas pensando que se debería poder hacer esto!
habemos muchos esperando años... y deben haber desarrolladores esperando decadas jajajaja
al fin!! :D
pues practicamente se tienen que escribir las mismas lineas de codigo, pero ordenadas de forma distinta, hay un dicho que dice: "si algo funciona bien, no lo muevas! no lo toques!" si es mejor o no, depende mucho tambien de la estructura que tenga el html y de la personalidad del programador...
Al fin! Tantos años dependiendo de pre procesadores para lograr esto👏🏼👏🏼
un excelente Tip para css, podemos ir practicando para cuando los demás browser lo integren. :D
An excellent tip for CSS, we can practice for when other browsers integrate it. :D
Hola!! Me encanto!! Me parece mas ordenado para css y tener todo anidado para tener mas claro donde se quiere llegar y tener juntos los estilos según la estructura. Esperemos se pueda usar pronto en todos los Navs. Saludos!!
No aconsejo que lo uséis, hasta pasados unos años, ya que hay gente que usa navegadores bastante antiguos y no es compatible y puede que nunca llegue a ser un estándar y sea una cadáver mas.
esta nueva manera de redactarlo es mas corta , hay que escribir menos, pero a su vez es mas confusa porque en un sitio un poco mas grande se puede volver bastante tedioso ubicar correctamente cada elemento ... quizá sea cuestión de costumbre pero se me hace que era mas legible de la manera anterior
llevo años usando sass, y tienes razón.. al final he llegado a los mas simple posible .. anidar solo un nivel y no usar ni la instrucción & .. cuanto mas simple mejor para la lectura.. y uso la metodología BEM… al final sass lo uso mas para tener todos los componentes troceados.. resumiendo.. cuánto mas simple mejor
me encanto siempre traes cosas interensantes al canal gracias ♥
Que bueno! Ahora sigamos ensuciando el html con tailwind
Me gusta la forma anidada !!!
Está genial la ideaaaaa
Mira!! Eso esta muy bueno!!
Que tal cuates...me parece mejor ese nuevo estilo que explicas. Visualmente se mejora la búsqueda y la relación.
Excelente noticia. Esperemos que los demás navegadores lo implementen pronto.
Me parece genial, me hace recordar a java que es el primer lenguaje que aprendí
Debieron hacerlo como en sass, no se porque se complican la vida
No es tan fácil como crees, tienen que mantener la compatibilidad con navegadores que aún no adoptan eso sin "romperlos", lo mismo suele pasar con JavaScript
@@skuldd es verdad
Entiendes que sass compila a css verdad? Y que css se interpreta?
Sass murió
@@AlojamientoCantabriaPuntoNet nunca me gustó sass
Que buen video. Ojalá sea posible ponerla pronto para todos los navegadores.
Por los momentos seguiré usando Sass, me encanta. Creo que siempre lo usaré ahsta que css sea lo suficentemente maduro en sus nuevas funcionalidades
Estoy recién empezando en programación y me parece mucho más estructurada esta forma
Fue un gusto sass
😻
Me gusta anidado porque permite mejor estructuracion y lectura del codigo
Está muy bien organizado
Genial tu video!!! Pregunta... a medida que se anida tanto las etiquetas o clases etc.. sube el nivel de importancia sobre las etiquetas clases etc.?
Que chévere, la sintaxis es un poco más entendible y a lo mejor en menos de un mes ya pueda ser soportado en más navegadores
Va pasar 2 años para incluir correctamente esto, creo que seguiremos usando SASS
Aunque no me agrada el amperson (no te podría decir por que pero no guta!) es una mejor forma de hacer los estilos ya que indudablemente ayuda a tener una perspectiva de semántica rápida.
Habría que esperar y ver si todos van a utilizarlo, al menos para nuevos proyectos
me gusta, se ve mucho mas limpio, y mejor que no se este utilizando todavia ,asi me da tempo de adaptarme :I
Se ve bien y va siguiendo una lógica de ramificación, que a mí me gusta trabajar así sin embargo, si en alguna partecita te equivocas en el camino, te dañará todo el árbol genealógico, pero creo que es mejor así, vas estudiando la ramificación, el método tradicional se me hace que está más enredado y solo lo entienden los autores, para alguien que quiere leer una estructura css desconocida, este método me parece más funcional
Pues parece que las tendencias de Google van por esa dirección pues me ha recordado un poco la forma de hacer de Flutter.
Me parece genial, es una forma mucho más legible de escribir el código.
Es Como el Less solo que en el Less no es necesario (puedes o no colocarlo y funciona) colocar el & amperson
Genial.
Viva el nested code :)
genial
que tema usas en tu VISUAL
Genial, esperemos llegue pronto a los demás navegadores
Me gusta la configuración de vs code que usa, podría decir cuál es por favor...
yo creo que asi debio ser siempre , aqui esta la mejor manera para hacerlo
tremendo
Que interesanteeeee
Con styled-component yo ya lo aplicaba un monton
Es mucho mejor esta manera.
es mucho mas intuitivo, yo estoy a favor 100%, pero hasta que no este soportado por mas navegadores nada
Lo que me preocupa es cómo reaccionará en otros navegadores, por los momentos creo que sass funciona mejor en ese aspecto. Muy buen video!
Mucho mejor el anidado
Está bonito ordenado falta de acostumbrarse
Entiendo los anidados pero me parece que es maa ordenado en la manera antigua o con el metodo BEM
Y qué sentido tiene que funcione en unos navegadores y en otros no? Con esto, estoy obligando a los usuarios de mis proyectos a usar un navegador específico mientras esperamos a que el resto de navegadores actualicen y ya esté disponible en ellos también. ¿Cuánto tiempo tardarán? No se sabe. Mientras tanto seguiré escribiendo mi css normal, hasta que absolutamente todos los navegadores apliquen el css nestting. Buen vídeo.
Me gusta como queda, la verdad no lo voy a usar xq demasiado ya que siempre uso Tailwind
Me da mello que hagan unos mega monstruos de animaciones y se haga complejo
Lo había visto esa forma en n un video de tiktok hace tiempo, pero cuando lo fui a usar a usar el teléfono editor me lo marcaba como error, así que pensé que era falso
Este es mejor
Me gusta esta forma
Para que si ya se usa sass
Cuando creas un curso de actualización de css, o al menos los mas resaltantes
Veo que me gusta mas el anterior para mi uso, pero es totalmente practico y útil el método anidado. Creo que a futuro cuando esté mas soportado, será practico usar uno o el otro dependiendo del proyecto y la reutilización de instrucciones similar a lo que hacemos con las globales ( * )
Solo chrome? No todavía
Básicamente como sass
va a pasar algo así como js y jquery
Tendré que hacer la prueba a ver si funciona 🤔
no entendí cuando usar "&" y cuando usar ">" ?
Creo que para proyectos grandes el nesting es malo y es mejor trabajar con metodologias como BEM, si, es curioso, interesante y chevere, pero no se que tan buena practica sea
será la sustitución de sass ?...
Todavía estoy revisando el css de esa forma, pero que sucede si decido cambiar la posición de un elemento, también tengo q cambiar la anidación del stylo?..me parece q la anidación es muy estático
Lo mismo funciona si escribes el estilo con toda la ruta, si mueves el html de lugar también lo tienes que actualizar. Esto funciona mejor cuando tienes componentes con ciertos estilos y empiezas a anidar desde ahí, no lo usaría para empezar a anidar desde el body
Ahora solo falta Mixins y dejo Sass XD
Tantos años esperando ese feature...
Prácticamente sería un min-sass
pienso que el anidado esta bien, peeeeeeeeeero las llaves es lo que lo mata, me hubiese gustado que sea un solo juego de llaves y de ahi identar ...casi como python
Y esto ya no se lo hacia con Less o Sass?
Cuántos navegadores lo soportan?
Saludos, ¿esta funcionalidad crees que desplace a los preprocesadores de CSS?
Todavía no, con los pre procesadores aún hay varias cosas que no puede hacer CSS de forma nativa
Seguiré usando Sass
Se volvio sass jajaja me gusta, odio el css puro, no puedo estilizar sin sass
Prácticamente colocaron SASS en CSS! Está muy bien. Entonces ya no usaremos SASS o bueno por preferencia. SASS se diferencia con mixins y otras cositas, pero ya no es tanta la diferencia.
Yo creo que Sass aún le gana por mucho xd
Tiene muchísimas funciones y cosas bastante útiles que le faltan a css
Pero si es bueno que este último vaya evolucionando con el tiempo