No video

BEM: Simplify your CSS with 3 Principles

  Рет қаралды 31,451

Diego Castaño

Diego Castaño

Күн бұрын

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

Пікірлер: 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!
@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.
@rwcodev
@rwcodev 3 ай бұрын
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.
@josemier5175
@josemier5175 3 жыл бұрын
el mejor video que he visto sobre la metodología BEM
@webpunkdev
@webpunkdev 3 жыл бұрын
Gracias, Jose! 😁
@pdgago.ballester
@pdgago.ballester 3 жыл бұрын
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.
@vidaentredosmundos_gz
@vidaentredosmundos_gz Жыл бұрын
Pedazo de explicación. Me ha quedado clarísimo. ¡Gracias!
@cesaraugustoavendanogamboa4537
@cesaraugustoavendanogamboa4537 Жыл бұрын
Hermoso vídeo, la manera en que explicaste y el contenido del vídeo, es una chimba, parce
@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!.
@joseusechec.7710
@joseusechec.7710 2 жыл бұрын
Brother muchas gracias por una explicación tan pedagógica. Lo entendí perfectamente.
@davidlunamontilla
@davidlunamontilla 2 жыл бұрын
Jajaja, está bueno el ejemplo puesto al principio del vídeo.
@alexanderjprado
@alexanderjprado 2 жыл бұрын
¡Que buen video bro! La simplicidad para explicar, está casi que insuperable 🙌🙌
@jhonyamerico2855
@jhonyamerico2855 2 жыл бұрын
Vacan hasta me reí de mi realidad... Execelente vídeo para comprender gracias
@jorgetex21
@jorgetex21 3 жыл бұрын
jajajjajaj, me encanto la introducción con la escenificación del código espagueti. Nuevo suscriptor!
@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 4 жыл бұрын
Eso es lo que se hace en frameworks como React, Angular, etc. ¿No?
@cristiandavidpalominoporra6229
@cristiandavidpalominoporra6229 2 жыл бұрын
muchas gracias, entendi a la primera y me encanto la edicion
@s.p.a.c.e
@s.p.a.c.e 2 жыл бұрын
Gracias amigo, gran contenido y super introducción me encanto! jajajaja.
@eduardorivas6959
@eduardorivas6959 2 ай бұрын
Excelente! Muchas gracias.
@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!
@jaimesanchezgalvis
@jaimesanchezgalvis 2 жыл бұрын
Muy grande je je je al principio me vi identiifcado, espectacular explicacion muchas gracias.
@webpunkdev
@webpunkdev 2 жыл бұрын
😁
@MrJorjantas
@MrJorjantas 3 жыл бұрын
Que buen video, no tenía ni idea de las metodologías de css
@cl3on482
@cl3on482 2 жыл бұрын
Buenísimo. Lo aplicaré
@patriciotagle9682
@patriciotagle9682 Жыл бұрын
Empezamos fuerte
@dianamongui
@dianamongui 6 ай бұрын
Amé la explicación. gracias
@emilianooliveto5028
@emilianooliveto5028 3 жыл бұрын
Excelente explicación, muchas gracias. Like!
@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 ☺️
@jefedelosmagos
@jefedelosmagos 2 жыл бұрын
Buenísimo, muchas gracias!
@jotaescalona
@jotaescalona 2 жыл бұрын
Muchas gracias amigazo!
5 жыл бұрын
Que buen contenido y que curro para explicarlo con manzanas, felicidades tio!
@webpunkdev
@webpunkdev 5 жыл бұрын
Muchas gracias! 😉
@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!!
@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? 😂
@ddiazvil
@ddiazvil 3 жыл бұрын
Gracias, suscrito.
@misaelmizrahi21
@misaelmizrahi21 3 жыл бұрын
Mejor explicado imposible. Además el video esta genial te pasaste muchas graciass!
@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. :')
@Macsi_JRR10
@Macsi_JRR10 3 жыл бұрын
0:52 tan real que asusta!!! , me re ayudo! gracias abrazo enorme
@seryestarvlog
@seryestarvlog 2 жыл бұрын
Gracias por la información. Super útil para los que estamos aprendiendo. 🤟
@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
@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 жыл бұрын
🚫🍝
@alfredmontoya9824
@alfredmontoya9824 2 жыл бұрын
Gracias... Muy buen video!!!!
@NickPlateFree
@NickPlateFree 4 жыл бұрын
Excesivamente claro
@alevilghost
@alevilghost 2 жыл бұрын
Muchas gracias por compartir :3
@danielasilva1864
@danielasilva1864 3 жыл бұрын
Gracias por este vídeo, Me ayudo a entender mejor esta metodología. (Me encanto la edición)
@Anonymous-Defense
@Anonymous-Defense 3 жыл бұрын
genial el video, me encanto y entendi todo, me suscribo saludos
@encode2390
@encode2390 2 жыл бұрын
Que gran video, gracias
@virusmelissa6948
@virusmelissa6948 2 жыл бұрын
¡EXCELENTE APORTE! Suscrito ;)
@3Designer_col
@3Designer_col 3 жыл бұрын
jajajajajaja el mejor video. amo las formas diferentes de enseñar algo
@Tomi-yh1cb
@Tomi-yh1cb 3 жыл бұрын
Muy bueno gracias!
@casg
@casg 3 жыл бұрын
Muy buena explicación, justo estoy atravesando por estás dudas! Muchas Gracias!
@diegocaminosk8
@diegocaminosk8 4 жыл бұрын
Qué buena explicación brother! agradezco tu aporte a la comunidad! Saludos desde Perú
@mariadiazcardenas1045
@mariadiazcardenas1045 5 жыл бұрын
Excelente explicación, muchas gracias! :D
@diegopacheco8162
@diegopacheco8162 3 жыл бұрын
Excelente !! Ahora sí entendí BEM Gracias !!
@samuelsaravia7621
@samuelsaravia7621 2 жыл бұрын
Muy bueno tu tutorial, es entendible y capta la atención. Gracias!!
@franciscoa.sciarretta4347
@franciscoa.sciarretta4347 3 жыл бұрын
jajaja, gran intro!
@d-landjs
@d-landjs 3 жыл бұрын
Excelente explicación !!! Gracias por el aporte!
@danielapaolapf9018
@danielapaolapf9018 3 жыл бұрын
me guto la narración hace más entretenido y chevere felcidades
@webpunkdev
@webpunkdev 3 жыл бұрын
Gracias Daniela 🤗
@enriquenieto9135
@enriquenieto9135 5 жыл бұрын
Es una pasada el tutorial. Muchas gracias. Ojalá en el futuro pudieras hacer uno de SMACSS. Te deseo mucho éxito.
@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 !! :)
@anthonyperez3415
@anthonyperez3415 3 жыл бұрын
Muchísimas gracias , me encanto tu explicación!
@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.
@FernandoHernandez-pz9im
@FernandoHernandez-pz9im 3 жыл бұрын
muy bien explicado y resumido
@webpunkdev
@webpunkdev 3 жыл бұрын
🤗 gracias!
@angelemiliosantana6335
@angelemiliosantana6335 3 жыл бұрын
Muy bueno. Por fin entenderé mi propio código css😅
@gibranlara
@gibranlara 5 жыл бұрын
Muchas gracias, excelente video.
@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!
@alejandrmsa
@alejandrmsa 4 жыл бұрын
Gracias! esta muy bueno, estoy empezando a programar y esto me ha ayudado mucho a priorizar este tema.
@adrianmontilla3095
@adrianmontilla3095 3 жыл бұрын
Excelente brooo
@sebastianrodelo7965
@sebastianrodelo7965 3 жыл бұрын
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.
@matiasjaubet
@matiasjaubet 4 жыл бұрын
Muy bien explicado. Gracias!!
@ijeanpierrebp
@ijeanpierrebp 3 жыл бұрын
excelente video!
@jonathanramirez-np4ri
@jonathanramirez-np4ri 3 жыл бұрын
Videazo
@alexandervera8482
@alexandervera8482 3 жыл бұрын
que buena introoooo
@russelqp
@russelqp 4 жыл бұрын
Gracias, muy buena explicación de la metodología de BEM.
@webpunkdev
@webpunkdev 4 жыл бұрын
☺️
@leonardomanuelcancio6122
@leonardomanuelcancio6122 3 жыл бұрын
Buenísimooo
@Activamedia
@Activamedia 4 жыл бұрын
muy claro gracias
@webpunkdev
@webpunkdev 4 жыл бұрын
De nada! ;)
@florballinas8785
@florballinas8785 5 жыл бұрын
los contenidos de tus videos son muy buenos, y eres muy claro, deberias hacer mas videos :)
@webpunkdev
@webpunkdev 5 жыл бұрын
Pronto ;)
@armas125125
@armas125125 4 жыл бұрын
Gracias...., excelente video saludos desde Quito
@carlosluna6205
@carlosluna6205 3 жыл бұрын
Me identifique con lo del principio xd
@webpunkdev
@webpunkdev 3 жыл бұрын
Classic 😂
@flavioNacho
@flavioNacho 4 жыл бұрын
¡Gracias! Muy bien explicado. ✌️
@webpunkdev
@webpunkdev 4 жыл бұрын
Gracias por comentar!
@jututogame1999
@jututogame1999 4 жыл бұрын
Y si solo veo el inspector del elemento para saber cual es ese elemento?
@juliancolorado9232
@juliancolorado9232 3 жыл бұрын
excelente video, la info fue muy clara
@valderrama999
@valderrama999 5 жыл бұрын
Buen vídeo, me ha quedado súper claro la metodología BEM
@webpunkdev
@webpunkdev 5 жыл бұрын
¡Genial!
@enriqueruiz320
@enriqueruiz320 3 жыл бұрын
Excelente
@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!
@miguelvasquez9849
@miguelvasquez9849 3 жыл бұрын
Jaja me identifico con los primeros 1:30 minutos
@jonathancastillo5953
@jonathancastillo5953 4 жыл бұрын
Muchas gracias!.
@diegofernandoortizgamboa9363
@diegofernandoortizgamboa9363 3 жыл бұрын
excelente
@emilianoastier7226
@emilianoastier7226 2 жыл бұрын
gracias entendiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
@MiguelBonifaz
@MiguelBonifaz 4 жыл бұрын
Excelente, gracias.
@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
@rojasd92
@rojasd92 3 жыл бұрын
te doy like por que me rei mucho al primer minuto del video, ame el uso de la canción sonata luz de luna
@webpunkdev
@webpunkdev 3 жыл бұрын
🤗 gracias!
@bryanandiallerena1914
@bryanandiallerena1914 3 жыл бұрын
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?
@webpunkdev
@webpunkdev 3 жыл бұрын
Lo que no podría tener es feature-post__content__picture
@elsoldadodetaisontv
@elsoldadodetaisontv 2 жыл бұрын
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
@webpunkdev
@webpunkdev 2 жыл бұрын
No, en este caso featured, pese a ser un adjetivo, funciona como una palabra más que conforma el nombre del bloque.
@clasesdeprogramacion.net_erc
@clasesdeprogramacion.net_erc 3 жыл бұрын
gracias crack
@webpunkdev
@webpunkdev 3 жыл бұрын
De nada maestro
@alan_d
@alan_d 2 жыл бұрын
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?
@webpunkdev
@webpunkdev 4 ай бұрын
Los subtítulos automáticos están mal, lo que digo en el audio del vídeo es lo correcto.
@beto.aveiga
@beto.aveiga 5 жыл бұрын
No, hoy no me resulta familiar jajaa. Pero sí algunos años atrás. no voy a mentir.
@ezequielahs1076
@ezequielahs1076 5 жыл бұрын
Jajja que buen video lpm jajaj bem es hermoso.
@webpunkdev
@webpunkdev 5 жыл бұрын
Hermoso tú 😘
@ezequielahs1076
@ezequielahs1076 5 жыл бұрын
@@webpunkdev pero vos mas❤
@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 :)
@juanmancedo7127
@juanmancedo7127 4 жыл бұрын
Buenardo tu video!!!
@gabrieltroncoso4578
@gabrieltroncoso4578 2 жыл бұрын
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 2 жыл бұрын
Si son iguales en toda la página, definiria las clases .title y .title--size-3 por ejemplo
The problems with viewport units
13:23
Kevin Powell
Рет қаралды 359 М.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 168 М.
🩷🩵VS👿
00:38
ISSEI / いっせい
Рет қаралды 26 МЛН
Kids' Guide to Fire Safety: Essential Lessons #shorts
00:34
Fabiosa Animated
Рет қаралды 16 МЛН
The Giant sleep in the town 👹🛏️🏡
00:24
Construction Site
Рет қаралды 20 МЛН
English or Spanish 🤣
00:16
GL Show
Рет қаралды 7 МЛН
¡ESCRIBE CSS como un EXPERTO! - BEM TUTORIAL.
21:54
AlexCG Design
Рет қаралды 4,4 М.
SÓLO 3 LÍNEAS: CSS Grid responsive sin media queries
10:04
CodelyTV - Redescubre la programación
Рет қаралды 180 М.
Hack your brain with Obsidian.md
11:53
No Boilerplate
Рет қаралды 1,9 МЛН
What Are Web Components & How to Create One in 3 Steps (Tutorial)
6:04
Are you using the right CSS units?
6:30
Kevin Powell
Рет қаралды 452 М.
A new approach to container and wrapper classes
25:27
Kevin Powell
Рет қаралды 255 М.
The Story of Next.js
12:13
uidotdev
Рет қаралды 567 М.
10 Tendencias Actuales de Diseño Web con Ejemplos
8:24
Diego Castaño
Рет қаралды 9 М.
This Simple Trick Makes Your Website 83% Better Looking
10:57
Web Dev Simplified
Рет қаралды 388 М.
🩷🩵VS👿
00:38
ISSEI / いっせい
Рет қаралды 26 МЛН