CSS BEM - The What, How, and Why | Block Element Modifier Methodology

[@gerar10s]

What I've been reading so far it say that you can only go down one level with the elements. So, in this case Card__body__content is not acceptable because you went 2 levels down. I'm new to this but every document I've seen about the subject talks about this. Has this changed recently? Thanks

[@ClosureWebDevMore]

Hey! You are absolutely correct. BEM specs state that in this case you should skip the parent element and use just Card__content. However, from my experience, maintaining such class names is more annoying than it is useful. This approach won’t reflect the DOM structure in .scss files and make it more difficult to navigate. It’s my bad and I should have mentioned that in the video. Thanks for correcting me!

[@gerar10s]

@@ClosureWebDevMore Great thanks! Like I said, I'm just starting with all this but I have to agree with you. The way you show it here would be my preference. Thanks for the tutorial

[@chaitanyashahare2734]

The intro was epic XD paused the video to comment

[@patricknelson]

6:00 - I’m with you 100% on BEM for the stated reasons, but curious: Earlier you mentioned ability to Ctrl+F the codebase to find the class. One issue I’ve encountered with using Sass & prefixes is that it gets in the way of this typically. Do you have a process for that or do you just failover to the manual search (i.e. It’s a “Card” so at least you know where to look) or should you just scrap & prefixes all together in order to preserve searchability? 🤔

[@mohanadalhiti4300]

Thank you 👍

[@SuswanaJoel]

Bem

[@SuswanaJoel]

Him

[@codelightsparkles2403]

Thank you for this well explained video. You’re a life saver!!

[@dorpeled4768]

Great video, thanks for that.

[@yuryitikhonoff9631]

Content is awesome. Great job. Thank you so much.

[@peterballa6060]

How a great video thank you! Well explained!

[@RubberDuckCoding]

VERY NICE!

[@DiegoVergaraLoza]

It makes no sense to me to nest classes using BEM. I think one of the benefits of it is that it reduces the need for nesting to a minimum by using specific class names

[@hawkon10]

Agreed. If anyone else is more interested about this: getbem.com/faq/#css-nested-elements.

[@ElixerProgramming]

Just watched a video before this one that warns against this exact thing! That's why it's always good to use multiple sources.

[@emanuelYaish]

I very liked the explanation but I have a question, How to implement BEM methodology with other css libraries such as bootstrap or semantic-ui?

[@ClosureWebDevMore]

Bootstrap and Semantic are the complete opposite of BEM, so there is no real way to use them together. In BEM, class name defines an element and is unique, while in these two frameworks class is just a way to apply a certain style and can be used on many different elements

[@emanuelYaish]

@@ClosureWebDevMore ok thanks very much for the reply, I asked because sometimes you only take some code from bootstrap like the grid and the rest you write on your own .

[@ClosureWebDevMore]

You could try using CSS grids and wrap them in a mix-in if you want to reuse that functionality

[@emanuelYaish]

@@ClosureWebDevMore THANKS!! I will try it.

[@jamshediqbal7936]

If you are already using bootstrap or semantic-ui in your current project, then I won't say anything. But if you don't, then I will prefer not to use these libraries. I'm not against them but in my personal opinion, your own written css is quite enough to make good and challenging design with the help of flexbox, css variables, grid system etc...

[@roseuwaezuoke7616]

Thanks

[@dawid_dahl]

Perfect.

[@elg281]

Hey you're right I didn't learn thank you

[@d-landjs]

GJ!

[@MaksymMinenko]

Card__header__main-image is a wrong way of using BEM. You don't completely understand the methodology.

[@johnny2598]

explain why

[@chocofun6612]

@@johnny2598 see the bem guidelines on it's official site

[@RubberDuckCoding]

My like button turned black, not blue... I think I pressed it too hard

[@korkut31]

wrong. what u told is wrong. this is not BEM. there is nothing in BEM like x__y__z. this is wrong.

[@yogesh-yadav]

6:21 is wrong

[@korkut31]

u are using bem WRONG.