🤯¿CÓMO nombrar CLASES en CSS? Usa BEM 🧐 | Eduardo Fierro Pro 

😊 Vídeos recomendados ru-vid.com/group/PLJpymL0goBgEzi6Z5AQysL8B-PNeovcjj 🚀ROADMAP Desarrollo WEB ru-vid.com/group/PLJpymL0goBgFzvCuhEJJ29-x1H_Uo5Esv 🤯 Explicando Web de forma diferente ru-vid.com/group/PLJpymL0goBgFK8kBgMuAAGfUEuP83Q1Ab 🙇🏻 Construyendo un Slider, Acordeón, Tabs... ru-vid.com/group/PLJpymL0goBgFXN27jElLCmysKQboKW7uW

Hermano muchas gracias, en mi clase me mandaron a leer documentacion pero no entendia y gracias a tu video ya le se a BEM :D

De verdad que no entiendo como no tienes más suscriptores. Este video es oro puro. Eres claro, conciso, vas al grano y lo mejor de todo es que das ejemplos y lo pones en práctica. Mil gracias por este contenido👏🏻👏🏻👏🏻Estoy matriculada en una academia y te he entendido mejor a tí que a mí profesor! Ya tienes una suscriptora más 💋

Muy bueno! Llevo tiempo intentando utilizar varias metodologías, esta de BEM me parece muy cómoda, especialmente si se desarrolla en aplicaciones como WP. En todos los ejemplos que había visto de BEM siempre utilizan el de la creación de una tarjeta, algo como dentro de una etiqueta o la que gustes, article__card, .card__title, .card__content, .card__pic., .card__title--red... y así, como para enfatizar que BEM (Block Element Modifier) está pensado para crear bloques. En tu ejemplo tomas literal la definición y en vez de darle un concepto utilizas los nombres de los elementos como dentro el elemento header .heade__li (me había gustado más .nav__li) y así... eso fue con fines didácticos? Aun con todo y metodologías, definitivamente el nombrar variable o clases es una de las cosas más difíciles que hay jeje.. Seguiré tu canal, muy buen contenido.

¡Te he visto en TikTok y me gusta mucho el método en que enseñas cositas allí, pero no sabía que en RU-vid eras mucho mejor, trabajo CSS desde hace 1 año y creía utilizar bien la metodología BEM de manera correcta, pero con este video confirme que no lo hacía de la mejor manera y ahora perfeccioné con este video el nombrar las clases, Gracias!

una duda que es esos 3 puntos de colores arriba.buena explicacion del video gracias.

Excelente video! MUY BUENO.

Casi todos los links que pasas no funcionan, quiero saber que comando usas para copiar las clases tan rápido, revise TODOS y no lo encuentro POR FAVOR para Windows!

de todos los videos que he visto esta fue la mejor explicacions que vi solo falto como ordenar las carpetas eso queria aprender

Excelente me deslumbro lo de sass, pensaba que como podian ser anidados ya no eran necesario el bem por redundancia, no se me habia ocurrido el & para ello, sabia que funcionaba con sus funciones pero no con ello xd

Yo creo que más claro imposible. Gracias Eduardo, muy buen vídeo 👌🏻👌🏻👌🏻

Buenísimo el vídeo, pero me salió una duda, la clase del bloque por ejemplo en caso de ser un header, si o si debe llamarse header? O puedo ponerle otro nombre, lo pienso más que nada con el uso o creación de card en proyectos

Increíble tutorial, resolviste todas mis dudas!!! gracias por tan increíble contenido de calidad.

Excelente, muy claro e importante para conseguir un css impecable, mil gracias

Muy profesional

Y el otro video de la metodología?

Prepros se vuelve un dolor de "Huev#$#&$" cuando empieza a salir el popup de que lo compres , creo que Live SASS Compiler en VSCode es una excelente alternativa

Genial!... justo ahora que estoy apunto de comenzar una pagina web con angular y sass para mi portfolio, me viene muy bien este video porque quiero usar BEM 😁, mil gracias.

Muchas gracias amigo, aprecio y aprovecho mucho tus vídeos. Los guardo como oro en paño

Gracias por este vídeo Eduardo, la verdad es que yo empecé hace muy poco y ni siquiera se maquetar (aún) sin embargo necesitaba algo para tener más control sobre el nombre que le asigno a mis clases porque me gusta tener todo ordenado. Además de eso, opino que usar metodologías como BEM cuanto antes es un plus para tener buenas prácticas desde el inicio. Estoy aprendiendo mucho con tus consejos, por ejemplo, se me quedó grabado a fuego jamás utilizar píxeles y le doy bastante uso a las Custom properties y pues ahora toca usar la metodología Bem, saludos Eduardo espero que tus vídeos lleguen cada vez a más personas así que por mi parte me encargaré de compartir tu canal :)

Tremendo, Estaba buscando entender B__E--M y quedo re claro con esta explicacion. Muchas gracias.

oye Bro, que vídeo tan completo, muy bien explicado, super recomendado. like

Esto me confunde porque veo en otros videos que ponen "header__nav-a" pero no se si es valido y en el caso de querer poner un modificador algunos le agregan la palabra modifier luego de 2 guiones y listo, entonces no se que es correcto y que no D:

En el minuto 9.45 como haces para modificar todos los nombres de clases al mismo tiempo? Gracias!

¿Cómo puede copiar las clases tan rápido? ¿Qué atajos usa?

o sea para nombrar los elementos solo son con dos nombres (padre__hijo)? si en el < section > tengo 3 < p > como se manejarian si no quiero que se les aplique las mismas propiedades, es decir si pongo '.section___p' se lo aplicara a los 3 'p' pero como seria para que los 3 sean diferentes? podria poner 'section__p__uno' 'section__p__dos' 'section__p__tres' o usar el ':nth-child()' para los tres o sea 'section__p:nth-child(1), para el (2) y el (3) , o seria eso de --modificador? o se 'section__p--uno' 'sectcion__p--dos' 'section__p--tres'?

wwaaaaaaaaaaaaaaooooooo Me encanta la manera que explicas esos temas

Hasta hace unos segundo se me hacia muy pesada la metodología BEM y decía que no la iba a utilizar, pero que alivio es no tener que estar pensando en nombres para clases descriptivas porque no hay nada mas descriptivo que el propio nombre del bloque y de los elementos. Buen video.

Videazo de calidad! Justo lo que me estaba faltando, probablemente el mejor canal en español para aprender a maquetar.

Bárbaro, tienes un nuevo suscriptor.

Excelente explicación me quedo claro más a un complementando con la otra metodologia SCSS

Excelente explicación muchas gracias, me suscribo

Donde puedo encontrar un curso completo tuyo? donde se aprenda desde 0 como hacer de forma correcta la imagen de una app, me he dado cuenta que como full stack le damos mucha importancia a patrones de diseño en el back y front, de la misma forma la arquitectura , frameworks y dominarlos.... pero muy poca importancia a algo de lo mas importante, como se ve todo esto!

el problema que veo es que al tener una clase digamos main__div y usar en otro bloque, main__div nav, por ejemplo, estaria heredando clas clases que tiene el main__div, por lo que me veria obligado a sobreescribir las que no necesite en mi nav digamos.

LLevo horas buscando alguien que me lo explique de una forma clara, por fin lo encontre! Muchisimas gracias, explicas muy bien :D

Hey Eduardo, soy nuevo en tu canal, y te digo soy principiante, lo que me llamo la atención es como maquetas en html, podrias enseñarnos como haces eso de escribir un una sola linea y con solo un enter haces un monto de etiquetas... saludos.

¡Que bueno eres explicando, Eduardo!. Y además resumiendo con caridad y sencillez materias de enjundia y complejidad. ¡GRACIAS! (Comento solo en este vídeo pero es extensible al resto)

Eres un crack no tengo mas palabras

Amigo como selecciones todo sin estar dándole ( alt + clic ) y seleccionar una por una, para en vez de eso poder seleccionar todo a la vez, para poder escribir a la misma vez el signo de hashtag o numeral, ( minuto 3:08 hasta el minuto 3:12 ) gracias . . .

Muy buen vídeo! aunque me gusta más utilizar la metodología nombrando bloques en cascada con el primer ejemplo ya que me gusta usar los modificadores mayormente cuando defino estilos que no son por defecto o cuando sea necesario!

Buen video. Se entiende perfecto, tenia mis dudas con BEM de como usarlo pero gracias a tu video me quedo claro

Excelente!! gracias!!

muy buena explicación

Eres un crack gracias por tanto

Buenas Edu! En el minuto 12:02 me surgió una pequeña duda y es la siguiente: Tenemos en los li (línea 68 a 72) dos clases: header__a y header__a--nav Mi pregunta es: ¿Es necesario mantener la clase header__a o basta solo con la segunda, header__a--nav? Buen video y muchas gracias por esta valiosa información. BEM es mi metodología favorita, por ahora 😎😎.

Muito bom! Obrigado pelo ótimo vídeo e explicação

Edu, gran video, voy a empezar a implementarlo. Me queda una duda con el reset. Yo tengo un repo de componentes de react, y consumo esos componentes desde otro repo que es la app en sí (nextjs). Si yo uso el reset en mis componentes, cuando los importe en nextjs van a aplicar ese reset a la página? . Entiendo que si, en mi caso no sería un problema, porque yo tendría mi reset en concordancia con el de los componentes, pero si alguien mas quiere usar mi biblioteca de componentes, no le voy a romper la página con mi reset?

Muchas gracias por otra clase Eduardo! 🤗🤗

Hola Eduardo, magnífico vídeo, por fín he entendido la metodología BEM. Al replicar el header con el anidamiento, .header{ &__h1{bacground-color:red;} } Me da error en el Visual Studio Code, me pone: "se esperaba un selector o una regla en la regla". Se necesita algun plugin para el anidamiento? Incluso si lo hago así: .header{& h1{bacground-color:red;} } no me funciona!

Muy bueno

Muchas gracias Edu por este video tan excelente. Demasiado valioso este conocimiento. Edu, tengo una pregunta. Si por ejemplo estamos trabajando con React en una spa, y tengo un header diferente en cada page, como hago para nombrarlos y que no se me combinen los nombres de las clases? En este caso sería bueno nombrar cada bloque con un modificador? Y la otra duda que me genera es si puedo poner nombres de mas de una palabra deparados por guion, ej: class="div-cards" O si se deba utilizar camell case o algun otro tipo de notación

Hey hermano voy a comenzar a trabajar como maquetador, aunque ya conocia la metodologia BEM, me sirvio para repasar conceptos, muchas gracias :)

Dios mío por fin alguien que explica claro, era tan fácil, solo necesitaba alguien que lo explique mejor

espectacular parce, muchas gracias ahora que ando haciendo un taller lo aplicare.

hace 1 año uso css y esta metodologia no la tenia clara, ahora si A ponerla en practica y practicar , gracias Eduardo Fierro abrazo y suscrito

este video me cayo como anillo al dedo, claro y preciso!!!

Muy buen video! Un pequeño detalle: al colocar las clases en SCSS, se debe colocar el punto "." luego del &, por ejemplo: .header{ &.__nav{ } }