Тёмный

BEM: Simplify your CSS with 3 Principles 

Diego Castaño
Подписаться 24 тыс.
Просмотров 31 тыс.
50% 1

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/DesarrolloWebCreativo
GitHub: github.com/dowrow/
___
🎵Ending song
"Internet" - Camellos

Наука

Опубликовано:

 

28 апр 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 190   
@webpunkdev
@webpunkdev 4 года назад
❇️ Artículo completo ❇️ webpunk.dev/bem-simplifica-tu-css/
@cristobalnyram7434
@cristobalnyram7434 3 года назад
gracias
@soydalto
@soydalto 5 лет назад
¡Fantástico! Gracias por aportar valor.
@webpunkdev
@webpunkdev 5 лет назад
¡Muchas gracias a ti por el comment!
@barondls8134
@barondls8134 4 года назад
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.
@ucielsola
@ucielsola 3 года назад
Tus tutoriales me vienen salvando la cuarentena, crack
@webpunkdev
@webpunkdev 3 года назад
@@luismi05 Haya paz!
@dannydecdz
@dannydecdz 3 года назад
@@luismi05 Paga un curso si no queres ver anuncios ratón!
@rwcodev
@rwcodev 2 месяца назад
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.
@vincentamus
@vincentamus 4 года назад
Gracias, ahora logre entender BEM PD: La edicion ayudo mucho para hacer mas entretenido el video 😁
@AlvarooZ
@AlvarooZ 2 года назад
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.
@rociorosa7909
@rociorosa7909 Год назад
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!.
@pdgago.ballester
@pdgago.ballester 2 года назад
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.
@Negroflojo
@Negroflojo 5 лет назад
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. :')
@vidaentredosmundos_gz
@vidaentredosmundos_gz Год назад
Pedazo de explicación. Me ha quedado clarísimo. ¡Gracias!
@alexanderjprado
@alexanderjprado 2 года назад
¡Que buen video bro! La simplicidad para explicar, está casi que insuperable 🙌🙌
@cesaraugustoavendanogamboa4537
Hermoso vídeo, la manera en que explicaste y el contenido del vídeo, es una chimba, parce
@christiancrespo2453
@christiancrespo2453 5 лет назад
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 !! :)
@joseusechec.7710
@joseusechec.7710 2 года назад
Brother muchas gracias por una explicación tan pedagógica. Lo entendí perfectamente.
@davidlunamontilla
@davidlunamontilla Год назад
Jajaja, está bueno el ejemplo puesto al principio del vídeo.
@jhonyamerico2855
@jhonyamerico2855 2 года назад
Vacan hasta me reí de mi realidad... Execelente vídeo para comprender gracias
@josemier5175
@josemier5175 3 года назад
el mejor video que he visto sobre la metodología BEM
@webpunkdev
@webpunkdev 3 года назад
Gracias, Jose! 😁
@julianlopez7185
@julianlopez7185 3 года назад
Es el primer video tuyo que veo. Y me encantó. Muy bien explicado y se nota el trabajo detrás. Gracias por ello.
@webpunkdev
@webpunkdev 3 года назад
Gracias ☺️
@jorgetex21
@jorgetex21 3 года назад
jajajjajaj, me encanto la introducción con la escenificación del código espagueti. Nuevo suscriptor!
@misaelmizrahi21
@misaelmizrahi21 3 года назад
Mejor explicado imposible. Además el video esta genial te pasaste muchas graciass!
@cl3on482
@cl3on482 2 года назад
Buenísimo. Lo aplicaré
@casg
@casg 3 года назад
Muy buena explicación, justo estoy atravesando por estás dudas! Muchas Gracias!
@mariadiazcardenas1045
@mariadiazcardenas1045 4 года назад
Excelente explicación, muchas gracias! :D
@enriquenieto9135
@enriquenieto9135 4 года назад
Es una pasada el tutorial. Muchas gracias. Ojalá en el futuro pudieras hacer uno de SMACSS. Te deseo mucho éxito.
@BeltsasarIsrael
@BeltsasarIsrael 2 года назад
Buenísimo, muchas gracias!
@ivandez1811
@ivandez1811 4 года назад
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
@eduardorivas6959
@eduardorivas6959 Месяц назад
Excelente! Muchas gracias.
@alejandrmsa
@alejandrmsa 4 года назад
Gracias! esta muy bueno, estoy empezando a programar y esto me ha ayudado mucho a priorizar este tema.
@andresroche8487
@andresroche8487 3 года назад
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!!
@s.p.a.c.e
@s.p.a.c.e 2 года назад
Gracias amigo, gran contenido y super introducción me encanto! jajajaja.
@danielasilva1864
@danielasilva1864 3 года назад
Gracias por este vídeo, Me ayudo a entender mejor esta metodología. (Me encanto la edición)
@gibranlara
@gibranlara 5 лет назад
Muchas gracias, excelente video.
@anthonyperez3415
@anthonyperez3415 3 года назад
Muchísimas gracias , me encanto tu explicación!
@emilianooliveto5028
@emilianooliveto5028 2 года назад
Excelente explicación, muchas gracias. Like!
@dianamongui
@dianamongui 5 месяцев назад
Amé la explicación. gracias
@matiasjaubet
@matiasjaubet 4 года назад
Muy bien explicado. Gracias!!
@MrJorjantas
@MrJorjantas 3 года назад
Que buen video, no tenía ni idea de las metodologías de css
@cristiandavidpalominoporra6229
muchas gracias, entendi a la primera y me encanto la edicion
@d-landjs
@d-landjs 3 года назад
Excelente explicación !!! Gracias por el aporte!
@samuelsaravia7621
@samuelsaravia7621 2 года назад
Muy bueno tu tutorial, es entendible y capta la atención. Gracias!!
@Tomi-yh1cb
@Tomi-yh1cb 3 года назад
Muy bueno gracias!
@diegopacheco8162
@diegopacheco8162 3 года назад
Excelente !! Ahora sí entendí BEM Gracias !!
@jotaescalona
@jotaescalona 2 года назад
Muchas gracias amigazo!
@encode2390
@encode2390 2 года назад
Que gran video, gracias
@alfredmontoya9824
@alfredmontoya9824 2 года назад
Gracias... Muy buen video!!!!
@patriciotagle9682
@patriciotagle9682 Год назад
Empezamos fuerte
@guaytrapa
@guaytrapa 2 года назад
Tremenda explicación ! +1 sub . Buen trabajo crack, muchas gracias por el contenido de calidad 👊
@webpunkdev
@webpunkdev 2 года назад
Gracias a ti, figura!
@seryestarvlog
@seryestarvlog 2 года назад
Gracias por la información. Super útil para los que estamos aprendiendo. 🤟
5 лет назад
Que buen contenido y que curro para explicarlo con manzanas, felicidades tio!
@webpunkdev
@webpunkdev 5 лет назад
Muchas gracias! 😉
@alevilghost
@alevilghost 2 года назад
Muchas gracias por compartir :3
@3Designer_col
@3Designer_col 3 года назад
jajajajajaja el mejor video. amo las formas diferentes de enseñar algo
@virusmelissa6948
@virusmelissa6948 2 года назад
¡EXCELENTE APORTE! Suscrito ;)
@ijeanpierrebp
@ijeanpierrebp 3 года назад
excelente video!
@juliancolorado9232
@juliancolorado9232 3 года назад
excelente video, la info fue muy clara
@Anonymous-Defense
@Anonymous-Defense 3 года назад
genial el video, me encanto y entendi todo, me suscribo saludos
@MiguelBonifaz
@MiguelBonifaz 4 года назад
Excelente, gracias.
@jonathanramirez-np4ri
@jonathanramirez-np4ri 3 года назад
Videazo
@adrianmontilla3095
@adrianmontilla3095 3 года назад
Excelente brooo
@armas125125
@armas125125 4 года назад
Gracias...., excelente video saludos desde Quito
@jaimesanchezgalvis
@jaimesanchezgalvis 2 года назад
Muy grande je je je al principio me vi identiifcado, espectacular explicacion muchas gracias.
@webpunkdev
@webpunkdev 2 года назад
😁
@sebastianrodelo7965
@sebastianrodelo7965 3 года назад
Gracias!
@leonardomanuelcancio6122
@leonardomanuelcancio6122 3 года назад
Buenísimooo
@angelemiliosantana6335
@angelemiliosantana6335 3 года назад
Muy bueno. Por fin entenderé mi propio código css😅
@ddiazvil
@ddiazvil 3 года назад
Gracias, suscrito.
@NickPlateFree
@NickPlateFree 4 года назад
Excesivamente claro
@jonathancastillo5953
@jonathancastillo5953 4 года назад
Muchas gracias!.
@Tsukasa1929
@Tsukasa1929 5 лет назад
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.
@flavioNacho
@flavioNacho 3 года назад
¡Gracias! Muy bien explicado. ✌️
@webpunkdev
@webpunkdev 3 года назад
Gracias por comentar!
@juanmancedo7127
@juanmancedo7127 4 года назад
Buenardo tu video!!!
@DavidHernandezSantos78
@DavidHernandezSantos78 3 года назад
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.
@webpunkdev
@webpunkdev 3 года назад
Wow, gracias!
@russelqp
@russelqp 4 года назад
Gracias, muy buena explicación de la metodología de BEM.
@webpunkdev
@webpunkdev 4 года назад
☺️
@franciscoa.sciarretta4347
@franciscoa.sciarretta4347 3 года назад
jajaja, gran intro!
@FernandoHernandez-pz9im
@FernandoHernandez-pz9im 3 года назад
muy bien explicado y resumido
@webpunkdev
@webpunkdev 3 года назад
🤗 gracias!
@enriqueruiz320
@enriqueruiz320 3 года назад
Excelente
@Macsi_JRR10
@Macsi_JRR10 3 года назад
0:52 tan real que asusta!!! , me re ayudo! gracias abrazo enorme
@Activamedia
@Activamedia 4 года назад
muy claro gracias
@webpunkdev
@webpunkdev 4 года назад
De nada! ;)
@valderrama999
@valderrama999 5 лет назад
Buen vídeo, me ha quedado súper claro la metodología BEM
@webpunkdev
@webpunkdev 5 лет назад
¡Genial!
@carlosarroyoam
@carlosarroyoam 5 лет назад
Ya habia escuchado sobre la metodología BEM, pero con tu video me ha quedado todo muy claro, no mas CSS spaghetti xD
@webpunkdev
@webpunkdev 5 лет назад
🚫🍝
@florballinas8785
@florballinas8785 5 лет назад
los contenidos de tus videos son muy buenos, y eres muy claro, deberias hacer mas videos :)
@webpunkdev
@webpunkdev 5 лет назад
Pronto ;)
@diegofernandoortizgamboa9363
@diegofernandoortizgamboa9363 3 года назад
excelente
@alexandervera8482
@alexandervera8482 3 года назад
que buena introoooo
@karlosorozco8344
@karlosorozco8344 4 года назад
Jajajja buen video!
@lucasmaidana3335
@lucasmaidana3335 3 года назад
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!
@webpunkdev
@webpunkdev 3 года назад
Te vale PayPal? 😂
@codigo-autodidacta
@codigo-autodidacta 4 года назад
Lo entendi al tiro, gracias
@clasesdeprogramacion.net_erc
@clasesdeprogramacion.net_erc 3 года назад
gracias crack
@webpunkdev
@webpunkdev 3 года назад
De nada maestro
@andresmontoya7852
@andresmontoya7852 5 лет назад
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.
@webpunkdev
@webpunkdev 5 лет назад
¡Por supuesto! Muy pronto más sobre esto.
@ecastmart
@ecastmart 3 года назад
Eso es lo que se hace en frameworks como React, Angular, etc. ¿No?
@danielapaolapf9018
@danielapaolapf9018 3 года назад
me guto la narración hace más entretenido y chevere felcidades
@webpunkdev
@webpunkdev 3 года назад
Gracias Daniela 🤗
@ezequielahs1076
@ezequielahs1076 5 лет назад
Jajja que buen video lpm jajaj bem es hermoso.
@webpunkdev
@webpunkdev 5 лет назад
Hermoso tú 😘
@ezequielahs1076
@ezequielahs1076 5 лет назад
@@webpunkdev pero vos mas❤
@diegocaminosk8
@diegocaminosk8 4 года назад
Qué buena explicación brother! agradezco tu aporte a la comunidad! Saludos desde Perú
@carlosluna6205
@carlosluna6205 3 года назад
Me identifique con lo del principio xd
@webpunkdev
@webpunkdev 3 года назад
Classic 😂
@lubinleonardo
@lubinleonardo 3 года назад
¡Gracias! Muy clara la información. Saludos :D
@emilianoastier7226
@emilianoastier7226 2 года назад
gracias entendiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
@isaacmartinezrizo
@isaacmartinezrizo 5 лет назад
Muchas gracias, sería excelente una pequeña práctica donde pongamos en práctica la metodología Bem
@webpunkdev
@webpunkdev 5 лет назад
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! 🤗
@isaacmartinezrizo
@isaacmartinezrizo 5 лет назад
@@webpunkdev Muchas gracias amigo, Dios te siga bendiciendo.
@miguelvasquez9849
@miguelvasquez9849 3 года назад
Jaja me identifico con los primeros 1:30 minutos
@leviathan0664
@leviathan0664 3 года назад
Increible explicación, gracias por el aporte. Pregunta, si implemento Sass contaria como metodologia para odernar codigo?
@valecbcb
@valecbcb 3 года назад
Me gustaría saber lo mismo!
@jututogame1999
@jututogame1999 3 года назад
Y si solo veo el inspector del elemento para saber cual es ese elemento?
@machisebastian3880
@machisebastian3880 2 года назад
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?
@webpunkdev
@webpunkdev 2 года назад
Es es el problema, que puedes hacer lo que quieras :p
@luisfernandorojasarroyo7893
@luisfernandorojasarroyo7893 5 лет назад
Jajaja que buena.
@gabrieltroncoso4578
@gabrieltroncoso4578 Год назад
Hola! Tengo una duda sobre los bloques y elementos! En varios section de mi web uso los h3 como titulos, estos deben tener las mismas propiedades de estilo en toda pagina. Entonces, estos h3 serian Bloques (ej seccion>titulo__h3) o deben ser parte del contenedor bloque (ej "seccion>seccion__titulo") ?
@webpunkdev
@webpunkdev Год назад
Si son iguales en toda la página, definiria las clases .title y .title--size-3 por ejemplo
@ArturoJoseMojicaGuerrero
@ArturoJoseMojicaGuerrero 3 года назад
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.
@webpunkdev
@webpunkdev 3 года назад
Claro que puedes, no hay límites :)
@beto.aveiga
@beto.aveiga 4 года назад
No, hoy no me resulta familiar jajaa. Pero sí algunos años atrás. no voy a mentir.
Далее
SÓLO 3 LÍNEAS: CSS Grid responsive sin media queries
10:04
🛑 до конца!
00:12
Просмотров 81 тыс.
APRENDE a usar la METODOLOGÍA BEM
8:23
Просмотров 29 тыс.
HTML and CSS Tutorial for 2021 - COMPLETE Crash Course!
2:17:48
Learn Web Design For Beginners - Full Course (2024)
3:07:31
¡ESCRIBE CSS como un EXPERTO! - BEM TUTORIAL.
21:54
Просмотров 4,2 тыс.
НЕ БЕРУ APPLE VISION PRO!
0:37
Просмотров 375 тыс.