BEM: Simplify your CSS with 3 Principles
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- BEM, OOCSS & SMACSS are CSS methodologies that companies like Twitter apply to organize their code and make it more maintainable.
In this tutorial I'll introduce you to the basic principles that will allow you to get a cleaner CSS code.
___
Follow me!
Facebook: fb.co/Desarroll...
GitHub: github.com/dow...
___
🎵Ending song
"Internet" - Camellos
❇️ Artículo completo ❇️
webpunk.dev/bem-simplifica-tu-css/
gracias
¡Fantástico! Gracias por aportar valor.
¡Muchas gracias a ti por el comment!
Qué haces acá crack? Jajaja justo vengo a buscar ayuda porque no pude comprenderte en tu curso de 9 horas el método Bien que recomiendas.
Tus tutoriales me vienen salvando la cuarentena, crack
@@luismi05 Haya paz!
@@luismi05 Paga un curso si no queres ver anuncios ratón!
Gracias, ahora logre entender BEM
PD: La edicion ayudo mucho para hacer mas entretenido el video 😁
Me gustó el formato del vídeo, poner fragmentos del código de HTML al lado del css lo hace más fácil de asimilar.
muy completo y bien explicado a decir verdad deja todo bastante claro a la hora de utilizar el BEM y tener mejor organizacion en el CSS que se suele liar.
Wow. A 3 años de este vídeo y sigue siendo genial. Tenía dudas en cómo definir subelementos dentro de los elementos y este es de los pocos vídeos que explican qué pasa con esto. Muchas gracias.
el mejor video que he visto sobre la metodología BEM
Gracias, Jose! 😁
Pedazo de explicación. Me ha quedado clarísimo. ¡Gracias!
Vacan hasta me reí de mi realidad... Execelente vídeo para comprender gracias
Jajaja, está bueno el ejemplo puesto al principio del vídeo.
Hermoso vídeo, la manera en que explicaste y el contenido del vídeo, es una chimba, parce
Brother muchas gracias por una explicación tan pedagógica. Lo entendí perfectamente.
De verdad, no entiendo como no tiene más suscriptores este canal. Este video es oro puro. Me ha encantado la edición y cómo está todo explicado, al grano y sin dar demasiadas vueltas.
Me alegro de haberte encontrado. Ya tienes una nueva suscriptora.
Espero ver pronto más contenido nuevo. Por favor, no dejes de subir videos.
Gracias por este trabajo tan bien hecho!.
jajajjajaj, me encanto la introducción con la escenificación del código espagueti. Nuevo suscriptor!
muchas gracias, entendi a la primera y me encanto la edicion
Gracias amigo, gran contenido y super introducción me encanto! jajajaja.
¡Que buen video bro! La simplicidad para explicar, está casi que insuperable 🙌🙌
Que buen video, no tenía ni idea de las metodologías de css
He elegido este video para convencer a mi empresa por que debemos usar BEM, y no podía haber elegido mejor. Felicidades por tu trabajo. Un saludo.
Wow, gracias!
Otra metodología de trabajo es por medio de css in js, cada componente tiene sus propios estilos, y estos son renderizados cuando el componente es utilizado.
¡Por supuesto! Muy pronto más sobre esto.
Eso es lo que se hace en frameworks como React, Angular, etc. ¿No?
Muy grande je je je al principio me vi identiifcado, espectacular explicacion muchas gracias.
😁
gracias hombre. Me sacaste de todas mis dudas sobre la metodología bem. abia visto otros vídeo explcando la metodología pero eras bien largo o muy cortos y no explicaba tan bien como tu... es si creo la metodológica bem esta bien perron para ordenar el código css pero luego se forma un caos en el html... pero bueno de todas manera el html ya es un poco caotico. este es un gran vídeo!!
Empezamos fuerte
Excelente!
Muchas gracias.
Ya habia escuchado sobre la metodología BEM, pero con tu video me ha quedado todo muy claro, no mas CSS spaghetti xD
🚫🍝
Es el primer video tuyo que veo. Y me encantó. Muy bien explicado y se nota el trabajo detrás. Gracias por ello.
Gracias ☺️
Buenísimo. Lo aplicaré
Que carajo le cuesta a mi profesor explicar asi???. Solo 11 minutos para entender finalmente lo que en el instituto tardan 3 semanas! Ten tu like, un nuevo suscriptor y pásame tu cuenta bancaria!
Te vale PayPal? 😂
wou te quedo brutal, hoy me lei la doc de bem pero no me quedo claro entonces busque un tutorial y encontre este video, y me quedo to claro
0:52 tan real que asusta!!! , me re ayudo! gracias abrazo enorme
Excelente explicación, muchas gracias. Like!
Amé la explicación. gracias
Que buen contenido y que curro para explicarlo con manzanas, felicidades tio!
Muchas gracias! 😉
Mis dieses por la explicación tan exquisita de este método, lo había escuchado pero nunca lo había puesto en práctica, con tus tips, ten por seguro que lo haré. Muchas gracias tío. :')
Muchas gracias amigazo!
jajajajajaja el mejor video.
amo las formas diferentes de enseñar algo
Mejor explicado imposible. Además el video esta genial te pasaste muchas graciass!
Buenísimo, muchas gracias!
genial el video, me encanto y entendi todo, me suscribo saludos
Gracias por la información. Super útil para los que estamos aprendiendo. 🤟
Me gusta la manera dinámica y simple que usas para explicar gracias por subirlo, recomendación: bajar el volumen de la música de fondo o no usar ninguna es difícil escuchar y concentrarse en lo que dices ya que la música de fondo es más fuerte que el tono de tu voz.
¡EXCELENTE APORTE! Suscrito ;)
Gracias, suscrito.
Muy bueno. Por fin entenderé mi propio código css😅
Qué buena explicación brother! agradezco tu aporte a la comunidad! Saludos desde Perú
Gracias por este vídeo,
Me ayudo a entender mejor esta metodología.
(Me encanto la edición)
Muchas gracias, sería excelente una pequeña práctica donde pongamos en práctica la metodología Bem
Toda la razón, no lo he metido porque se alargaría demasiado el vídeo, pero aquí puedes encontrar más ejemplos: getbem.com/
¡Un saludo! 🤗
@@webpunkdev Muchas gracias amigo, Dios te siga bendiciendo.
me guto la narración hace más entretenido y chevere felcidades
Gracias Daniela 🤗
Es una pasada el tutorial. Muchas gracias. Ojalá en el futuro pudieras hacer uno de SMACSS. Te deseo mucho éxito.
Muchas gracias por compartir :3
Gracias... Muy buen video!!!!
Excelente !!
Ahora sí entendí BEM
Gracias !!
Muy buena explicación, justo estoy atravesando por estás dudas! Muchas Gracias!
Muchísimas gracias por este vídeo, eres un crack ! Me va de perla porque quiero empezar a tener buenas practicas para cuando empiece el proyecto final del ciclo y poder luego llevarlo al futuro curro !! :)
Muy bueno tu tutorial, es entendible y capta la atención. Gracias!!
Excesivamente claro
jajaja, gran intro!
Excelente explicación, muchas gracias! :D
los contenidos de tus videos son muy buenos, y eres muy claro, deberias hacer mas videos :)
Pronto ;)
Que gran video, gracias
Gracias! esta muy bueno, estoy empezando a programar y esto me ha ayudado mucho a priorizar este tema.
Tremenda explicación ! +1 sub . Buen trabajo crack, muchas gracias por el contenido de calidad 👊
Gracias a ti, figura!
Excelente explicación !!! Gracias por el aporte!
Muchas gracias, excelente video.
Muy bueno gracias!
muy bien explicado y resumido
🤗 gracias!
Me identifique con lo del principio xd
Classic 😂
Muchísimas gracias , me encanto tu explicación!
que buena introoooo
Gracias, muy buena explicación de la metodología de BEM.
☺️
Buen vídeo, me ha quedado súper claro la metodología BEM
¡Genial!
excelente video!
Videazo
Gracias...., excelente video
saludos desde Quito
Increible explicación, gracias por el aporte.
Pregunta, si implemento Sass contaria como metodologia para odernar codigo?
Me gustaría saber lo mismo!
Excelente brooo
Gracias!
Buenísimooo
muy claro gracias
De nada! ;)
excelente video, la info fue muy clara
Muy bien explicado. Gracias!!
Y si solo veo el inspector del elemento para saber cual es ese elemento?
¡Gracias! Muy bien explicado. ✌️
Gracias por comentar!
Jaja me identifico con los primeros 1:30 minutos
gracias entendiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
Excelente
De manera intuitiva ya he ido organizando mi código de ese modo, antes de conocer BEM. Así que simpatizo con esta organización, especialmente en lo de separar los modificadores. Ahora bien, no entiendo que aporta crear clases de elementos cuando en realidad puedo acceder a los elementos mediante la anidación de selectores como ->
.selectordebloque p {}
Si el día de mañana cambiaras ese p por un span (por poner un ejemplo), el estilo se rompería. Al usar clases estás haciendo que los estilos no dependan de los elementos HTML (lo desacoplas).
@@webpunkdev si se puede dar esa variabilidad usaré un nth child o lo que toque. Entiendo lo que quieres decir, pero creo que hay los suficientes selectores css como para no tener que depender de crear clases para elementos. ¿O quizás no lo acabo de entender? Puede ser.
Buena video fuiste al unico que entendí te felicito por tu video tengo una duda de novota, puedo usar alguna class que yo quiera ósea ponerle el nombre que quiera?
Es es el problema, que puedes hacer lo que quieras :p
gran video, mi pregunta es en el minuto 8:51 la clase aparece así "feactured-post__author" es quiere decir "modificador-elemento__bloque". espero su repuesta
No, en este caso featured, pese a ser un adjetivo, funciona como una palabra más que conforma el nombre del bloque.
te doy like por que me rei mucho al primer minuto del video, ame el uso
de la canción sonata luz de luna
🤗 gracias!
No, hoy no me resulta familiar jajaa. Pero sí algunos años atrás. no voy a mentir.
Excelente video, tenia dudas sobre esto, no he usado metodologia pero como lo propones se ve interesante y facil para mis CSS; pero tengo una inquietud puedo usar varios modificadores a un elemento? se puede y que limite tiene.
Claro que puedes, no hay límites :)
excelente
gracias crack
De nada maestro
Muchas gracias!.
Jajja que buen video lpm jajaj bem es hermoso.
Hermoso tú 😘
@@webpunkdev pero vos mas❤
Me dio risa jajaja si me a pasado que hago un desastre en css
8:54 no me quedó muy claro este ejemplo. No se supone que los elementos no pueden tener subelementos? entonces por qué el elemento feature-post__content tiene subelementos feature-post__picture y feature-post__text?
Lo que no podría tener es feature-post__content__picture
Excelente, gracias.
6:52 no condice lo que decís con lo que figura en la traducción. Entonces, ¿cuál sería la manera justa de hacerlo?
¿nombre elemento o nombre del bloque al que pertenece?
Los subtítulos automáticos están mal, lo que digo en el audio del vídeo es lo correcto.