1. Alterar el flow del CSS innecesariamente (0:36) 2. Z-Index excesivos (4:20) 3. Utilizar tamaños fijos (6:21) 4. Abusar de las Media Queries (7:58) 5. Flex vs Grid (9:25)
Pedazo fichaje! Me ha encantado la explicación de Nuria. Eso sí, el problema viene cuando tienes que soportar IE11 y no puedes usar position sticky o css grid... A mí me encantaría ver cómo resuelves estos problemas de compatibilidad entre ciertos navegadores. Lo dejo como idea :) Muchas gracias!
En mis tiempos de novato, cuando tenia que arreglar problemas de css, muchas veces eran z index, siempre encontraba exagerado que le pusieran z index 9999 999999 o más, si con poner 1 o 2 ya era suficiente y se entendía más el orden, aparte no eran ni necesarios muchas veces. Me alegra saber que estaba en lo correcto.
Vea me sorprende que él no conociera el position sticky jajaja XD pero esto me deja saber que no sabemos todo en la vida he, excelente coders ambos, me gustó el video!
Genial las explicaciones, estaría muy chulo que hablase en algún otro vídeo sobre SASS o preprocesadores del estilo, ya que es css pero cogiendo muchas cosas de la programación como bucles, funciones(mixins), forma más sencilla de declarar las variables, etc. Y más adelante alguna cosita sobre JS o TS, frameworks o librerías como Angular, React, Vue, Svelte, Polymer (o una de tantas que salen cada 2 meses xD). Más participación de Núria es bien, eso significa frontend así que 10/10 jajajajaja.
Hay navegadores que aún no lo pillan bien, no se si ahora que por fin explorer va a salir de nuestras vidas sea 100% utilizable, pero safari es muy perro y a veces se pasa el css por el forro de los cojo... 😂
pues el z-index hay que usarlo con cuidado, mas que todo con los que vienen de algunos plugins nos forzan a subir el número, pero puede ser de 0 a 5 y ya
para los z-index uso variables semanticas: --z-header: 9; --z--modal: 19 y si necesito otroque por ejemplo este definido como "encima del modal" le pongo un calc " z-index: calc(var(--z-modal) + 1)) y asi garantizo que siempre se donde estan mis z-index
Yo uso en z-index a partir del 1, pienso que es mas práctico para apilar en capas, eso si, usar burradas como 999999999, solo cuando toco proyectos hechos por otras personas. Y lo del sticky, lo intenté usar, pero varias veces no me funcionaba con algunos navegadores, supongo que se habrá estandarizado ya. La verdad es que pensaba que era mas chapuza, pero me estoy dando cuenta que hago bastante buena praxis con css, me falta meterme mas en el tema Grid, pero creo que ya hay un curso del que me puedo fijar.
Lo del z-index siempre me recuerda a eso de: "qué.. que qué de qué... Que qué de qué de qué..." Yo también uso ceros y unos, y siempre intento evitar el z-index :) saludos
Hay poca información de buenas precticas, metodologías y layout en css, me gustaría que se profundizará sobre esto ya que en la web hay información pero por tartecitas y no permiten hacerse una idea en general, también sobre trabajar css sobre bootstrap o cualquier otro framework.
El z-index solo se usa cuando tenés posiciones absolutas, si no no hace efecto sobre el div. Y para el responsive no es recomendable usar valores absolutos
Uno de los problemas de GRID es que no es completa mente compatible con los navegadores(en especial los nativos que tienen android) y FLEX al tener mas tiempo es compatible. Si el target de la página web que se esta creando es muy especifico y sabes que usa lo ultimo en tecnología, no veo por que no deban usar GRID. Por ejemplo la página que muestran es para personas que desean aprender algún curso de desarrollo web, normal mente usan un navegador como chroome o firefox y tienen las ultimas versiones de estos. Aquí no hay problema con usar GRID. Pero si la página en cuestión fuera una de recetas de cocina, la cual tiene un público más amplio y lo ideal sería usar FLEX.
Bueno en mi caso estoy aprendiendo a limitar los "zIndex" en un rango de 1 al 10 como máximo, antes solía usar de 9999 a 999999, pero luego de tener tantos elementos con esas cantidades se te puede ir de las manos y crear un desorden total.
yo en z-index uso así: 1 para lo menos importante, 10 para posicionamiento si es relativo al padre, 100 para fixed y 200 si es modal. Y no los cambio, porque por teoría se sabe que si están a la misma "altura" el flujo o flow es el que da la última palabra xd
Yo para el z-index, como para casi todo en CSS, uso prueba y error. Si es 3, pues 3 y si es 9999999 pues es que algún cabrón como Rafa usó 999999 anteriormente. Con ganas de meterle mano al curso!!! Pero es que no paráis, no me da la vida 😂😂😂
Yo, el z-index lo uso en saltos de 10 en 10. Vestigios de una programación estructurada en BASIC de los tiempos de mari-castaña jajjajaaja (justo después de la extinción de los dinosaurios) :)
(Rafa) 😡 EL Z-INDEX 9999999 ES LO MEJOR QUE HAY. ¿A qué sí? 👼
Confirmo :v
hasta este momento el comentario tiene 9 likes, ¿coincidencia?. no lo creo.
Si quieres que la persona que tenga que meter mano por ahi te odie, sí, sin duda.
seguido de un !important, de otra manera no vale para nada
Jajajajajaja yo tambien lo usaba
Queremos mas Nuria Linter
🔦🔦🔦🔦🔦🔦🔦🔦🔦🔦
sii por favor
Con Nuria en el Team esto está agarrando otro level... Buena elección.
Totalmente 😊😊✌️✌️
JAjaja la cara de rafa cuando probaron sin el z-index, 5:20!!
1. Alterar el flow del CSS innecesariamente (0:36)
2. Z-Index excesivos (4:20)
3. Utilizar tamaños fijos (6:21)
4. Abusar de las Media Queries (7:58)
5. Flex vs Grid (9:25)
Pedazo fichaje! Me ha encantado la explicación de Nuria. Eso sí, el problema viene cuando tienes que soportar IE11 y no puedes usar position sticky o css grid... A mí me encantaría ver cómo resuelves estos problemas de compatibilidad entre ciertos navegadores. Lo dejo como idea :) Muchas gracias!
¡Tremendo reto!
IE que le den por cul0, si microsoft no haca eso compatible va a desaparecer.
Como desarrollador siempre es un dolor de cabeza ese browser jajaja.
Muerte al IE11
Es flipante lo que sabe Nuria de CSS (y supongo que de diseño web, claro), qué envidia. Deja en pañales a cualquiera!!! Enhorabuena por el video!!!
Seria bueno que se hablara de las buenas practicas con el inspector de elementos y las ventajas de usarlo. Saludos de Colombia.
muy bonito el sticky y el grid, pero cuando IE es un requisito agua y ajo ;)
En mis tiempos de novato, cuando tenia que arreglar problemas de css, muchas veces eran z index, siempre encontraba exagerado que le pusieran z index 9999 999999 o más, si con poner 1 o 2 ya era suficiente y se entendía más el orden, aparte no eran ni necesarios muchas veces. Me alegra saber que estaba en lo correcto.
Me gustó mucho el video. Aprendí bastante de las recomendaciones de Nuria.
Acabo de descubrir este canal, por fin un podcast de programación
Primer video que veo del canal, interesante el formato.
Les escribo sólo para decirles que me ha gustado mucho y me ha parecido contenido de calidad para mí.
¡Saludos desde Chile!
Que dura Nuria. No me canso de escuchar buenas practicas en el código de CSS, es dificil de encontrar.
Vea me sorprende que él no conociera el position sticky jajaja XD pero esto me deja saber que no sabemos todo en la vida he, excelente coders ambos, me gustó el video!
Jajajaja, Rafa al aparato: Me he centrado tanto en back que llevo mucho tiempo sin hacer nada de front y todo ha cambiado por completo 😂
Genial las explicaciones, estaría muy chulo que hablase en algún otro vídeo sobre SASS o preprocesadores del estilo, ya que es css pero cogiendo muchas cosas de la programación como bucles, funciones(mixins), forma más sencilla de declarar las variables, etc.
Y más adelante alguna cosita sobre JS o TS, frameworks o librerías como Angular, React, Vue, Svelte, Polymer (o una de tantas que salen cada 2 meses xD).
Más participación de Núria es bien, eso significa frontend así que 10/10 jajajajaja.
Excelente vide, el tema del rem, porqué debo usarlo en padding o margin?
va dentro o fuera del ? Porque sticky no funciona si está dentro de .
Omg el position sticky. Además ha ido al padding/margin típico que sabía que iba a estar ahí (cuantas veces lo habré puesto con el fixed xD)
Cual es el tema/extensión que usas en el Firefox. No queda nada mal esos colores "light"
La parte de diseño en general la tenemos muy desestimada y en realidad es super importante. Por mas Nuria Linter !!!
Me encanta todo lo que aprendo de Nuria!
En vez de la suscripción puedo comprar solo el curso ?
Buen video, Yo tambien siempre uso puros 9s para z-index e igual seguramente lo pongo a elemntos que no lo necesitan
para cuando esta disponible nuria linter en vs code ?
Genial video... Creo para mi que CSS hoy en día está poderosísimo, pero no es fácil de dominar... Tiene sus cositas. Sigan hablando más de CSS
Genial el video no conocia position sticky
Hay navegadores que aún no lo pillan bien, no se si ahora que por fin explorer va a salir de nuestras vidas sea 100% utilizable, pero safari es muy perro y a veces se pasa el css por el forro de los cojo... 😂
Nuria eres mi superheroína!
Lo que me he podido reír con la cara de Rafa cuando ha dicho lo del modal 🤣🤣🤣
Jajajajajajajajaja 😂😂😂😂😂
Saludos desde honduras cracks son los mejores
pues el z-index hay que usarlo con cuidado, mas que todo con los que vienen de algunos plugins nos forzan a subir el número, pero puede ser de 0 a 5 y ya
para los z-index uso variables semanticas: --z-header: 9; --z--modal: 19 y si necesito otroque por ejemplo este definido como "encima del modal" le pongo un calc " z-index: calc(var(--z-modal) + 1))
y asi garantizo que siempre se donde estan mis z-index
un libro de buenas pràcticas que incluya Saas para estructurar proyectos y hacer las cosas bien?
Ya era hora empizo mañana mi suscripcion a codely
Buenísimo! yo también soy del team de z-index bajitos como Nuria la Linter 😄
Me encanta Nuria. Quiero mas videos de ella
esta chica sabe bastaaaaante
gracias señores, vaya descubrimiento el canal
Yo uso en z-index a partir del 1, pienso que es mas práctico para apilar en capas, eso si, usar burradas como 999999999, solo cuando toco proyectos hechos por otras personas. Y lo del sticky, lo intenté usar, pero varias veces no me funcionaba con algunos navegadores, supongo que se habrá estandarizado ya. La verdad es que pensaba que era mas chapuza, pero me estoy dando cuenta que hago bastante buena praxis con css, me falta meterme mas en el tema Grid, pero creo que ya hay un curso del que me puedo fijar.
Más Nuria linteeer. z-index:2; como máximo! 🤟🏻
Con z-index tengo entendido que se debe ir de tres en tres, números impares, por si se necesita un re-ajuste posterior.
Lo del z-index siempre me recuerda a eso de: "qué.. que qué de qué... Que qué de qué de qué..." Yo también uso ceros y unos, y siempre intento evitar el z-index :) saludos
Hay poca información de buenas precticas, metodologías y layout en css, me gustaría que se profundizará sobre esto ya que en la web hay información pero por tartecitas y no permiten hacerse una idea en general, también sobre trabajar css sobre bootstrap o cualquier otro framework.
Una vez me maté a poner 999999 sin ver su efecto hasta que me dí cuenta de que era imposible sacar la ventana que intentaba porque estabe en un !
Nuria, qué opinas de Tailwind?
un valor para z-index diferente a 9? eso existe?
Jajajajaja sticky... Rayos, . Jajaja Rafa no está solo en esto jajaja
Se ve bien la pagina, no puedo creer que hayas hecho tu sólo....XD XD, incluido facebook...podías encontrarlo con el z-index:99.
Nice, todo los videos son una joya :)
Nuria es un pan, me gustaría que me explique asi los errores, tengo un profe que me explica asi
Position sticky, menos mal que lo descubrí al poco de empezar con css
Me encantaría si pudieran subir más vídeos de Nuria.
Estoy viendo el vídeo justo ahora. He usado z index y por cosas lo más que llegué fue a 5. En el caso de grid y CSS se combinan
bueno video con el que me he topado, varias cosas del css que me hago como que no existen xD
El z-index solo se usa cuando tenés posiciones absolutas, si no no hace efecto sobre el div. Y para el responsive no es recomendable usar valores absolutos
Yo también soy de 9 en el z-index, aunque me estoy quitando, porque también me di cuenta que no era necesario.
casi nunca uso z-index, solo cuando uso alguna librería que lo use y me de un comportamiento extraño.
Usar height es un error del que me di cuenta hace tiempo. Arruina, no solo en el caso de que queramos añadir más texto, el responsive también sufre.
Uno de los problemas de GRID es que no es completa mente compatible con los navegadores(en especial los nativos que tienen android) y FLEX al tener mas tiempo es compatible. Si el target de la página web que se esta creando es muy especifico y sabes que usa lo ultimo en tecnología, no veo por que no deban usar GRID.
Por ejemplo la página que muestran es para personas que desean aprender algún curso de desarrollo web, normal mente usan un navegador como chroome o firefox y tienen las ultimas versiones de estos. Aquí no hay problema con usar GRID.
Pero si la página en cuestión fuera una de recetas de cocina, la cual tiene un público más amplio y lo ideal sería usar FLEX.
Lo del sticky me lo aprendí cuando me di cuenta de que solo usaba position absolute y fixed
Me han dado ganas de hacer el curso hmm
Yo uso números normales, uso el valor de la capa en el diseño para los zindex
Bueno en mi caso estoy aprendiendo a limitar los "zIndex" en un rango de 1 al 10 como máximo, antes solía usar de 9999 a 999999, pero luego de tener tantos elementos con esas cantidades se te puede ir de las manos y crear un desorden total.
Con lo cómodo que es usar z-index 1! Y si acaso z-index 2 cuando quieres ordenar dos objetos, los dos por encima de la base.
eres una diosa del css "Si no quieres ser como Rafa hazte este curso" xD
Sería genial ver la solución del error, no sólo saber que está mal, ya que quedamos igual 😅
Saludos
Pero sí lo dice en el video, revísalo bien :0
Estáis seguros que son necesarios los z-index? No sé a mi siempre me encantó trabajar el CSS, ahora me pasé a sass y es la leche
Hoy aprenderemos a trabajar con capas en Photoshop. No hay ningún botón para añadir capas en 999 en 999?
muy interesante...gracias
Graciassss.. y si, k siga Nuria k explik muy bien
Z-index:1;
yo en z-index uso así: 1 para lo menos importante, 10 para posicionamiento si es relativo al padre, 100 para fixed y 200 si es modal. Y no los cambio, porque por teoría se sabe que si están a la misma "altura" el flujo o flow es el que da la última palabra xd
9 y el resto de números también ☺️
con los z-index cuando me toca usarlos también uso el 1, nunca me gustó eso de 9999999 sentí que era muy feo y por lo visto no estoy muy encaminado 🤣
yo incrementaba en +1. Pero viendo la estructura de boostrap use sus valores e incrementaba 5 o 50. Por si necesitaba algo encima
Yo para el z-index, como para casi todo en CSS, uso prueba y error. Si es 3, pues 3 y si es 9999999 pues es que algún cabrón como Rafa usó 999999 anteriormente.
Con ganas de meterle mano al curso!!! Pero es que no paráis, no me da la vida 😂😂😂
✌️✌️✌️ A tope vamos 😊
9999999
¡Genia, Núria! :)
genia Nuria .. envíenme una que odio front
Yo no uso z index. Una vez meti un map de leaflet y ahi si que tuve q meter un z index en mi meno por que el mapa venoa con z index 150.
Un saludo
Excelentes tips muchas gracias por generar buen contenido 👍🏼
siempre empiezo con 5 en el z-index... No sabía que era tan poco común 😂
Para los z-index hasta negativos he usado, pero eso siempre variaba de -1, 1, 2 jajajaajajaj
Flexbox modificas en una dimensión y grid bidimensional, cada uno tiene su uso .
Ostia lo de los 999999 me ha matado. Yo soy otro gañán que los usa sin pensar. 😂
yo uso 999 pero es que aveces cuando estas resolviendo algo a lo rápido tiras un numero seguro y generalmente es el 999
Yo, el z-index lo uso en saltos de 10 en 10. Vestigios de una programación estructurada en BASIC de los tiempos de mari-castaña jajjajaaja (justo después de la extinción de los dinosaurios) :)
el z-index he usado 1, 2 y alguna vez 3 pero si conozco algunos que adoran el 9999
05:45 jajaj Nuria: si necesitas z-index, empieza bajito. Rafa: pon 99 😂
Yo también uso el 1 en el z-index
Yo tambien uso 9999 ya que uso otras librerias CSS y hay veces que ya tienen otros valores
Ahora soy mas fan de Núria
nuria destruyendo sus Z-index de Rafa
Zindex -1 0 1 si tengo que usar mas de eso entonces hay algo raro en el código ...
Developer: "Eso está bien no? Eso está bien Nuria..."
Designer: 🙄
Como en la vida real XD
Totalmente 😂😂😂
¿Designer?
Zeneke yo me he quedado igual 😂
Yo también suelo usar valores grandotes en z index 😂 como 9999 xD. Pd: buen video
Bienbienbien!!!!!
Descubri que era el z-index con Nuria asi que empece con buenas practiacas
Yo creo que no he utilizado un z-index mayor de 7. jjaja
tambien uso el valor 1 en z-index, me quede loco cuando vi todos esos nueves xd 6:01
Yo sí he utilizado z-index como 1, 2, 3, etc. Incluso los he tenido mapeados
Anda que menudos chapuzas los del 9999.
Yo siempre 1111, que es mucho más elegante. ;)