Why I use the BEM naming convention for my CSS

What's your opinion on BEM? And if you use another one, which one do you use?

This is gold

Thank you for sharing

for anyone looking at this in 2023 or later.
this is outdated.
scoped CSS exists now

Can’t thank you enough for all the things I’ve learned from you. I still feel like a novice when I watch your work, but slowly it’s seeping into my head 😂 A loyal fan of your vids

thanks!

And 5 years later, on a Friday, here I am... learning about BEM! LOL

Well... if this is not LONG TAIL CONTENT, I don't know what it is!!! :)

Hi! It's been four years since you posted this, are you still using BEM?

Can you say dead-pools chicachetaa

how i link .scss files?? <link rel="stylesheet" href="style.scss"/> is not correct?? p.s.: i'm on vscode not codepen.

Love it

I don't use BEM anymore. It looks ugly and there is too much writing with those names. Instead I use simple names and I combine classes. I think BEM is for someone who don't know about .class1.class2 notation :)

Nice, thanks. I love BEM. I learned some more tips from this video, like your use of &__body in Sass. I was glad to hear you talk about how you aren't totally strict with BEM, but you use it as your foundation. I use BEM as my main naming convention for CSS.

Sometimes I try and implement BEM on existing projects. I feel like this can be a good idea because it still can target components, and give a clear name even for components/elements that haven't been totally written in BEM.

However, trying to implement on existing projects does cause specificity issues, which is of course what we are trying to avoid by using BEM in the first place.

Nice video. Thanks a lot.

Nice and short way to go.

thanks, Kevin

After wasting a week with trying and hating Tailwind (which I consider "class vomit"), BEM is a mental vacation.

I have learnt so much in the past two weeks. Thanks Kevin. HTML, CSS, Mother, Child, SASS, BEM... 😀 So much yet to learn!

What kind of specificity problems would be with nesting in larger projects? What's the problem with having:
.card .image{
}
instead of
.card__image{
}

specificificity😀 neither can I

I think BEM is a great idea and to me how you explain it also very easy to understand and reason with

having classes for things rather than nesting things using css to target stuff like you say I can see how that could turn into a world of pain on large layouts

is this not in principle what other approaches like tailwind etc are doing I sort of guess ? So they are using isolated classes to apply things that can be sort of reused / applied and have each obvious class names ?

I really like your explanation of sass and &__ pattern to get the 'parent' name - very clever stuff

Is sass still a thing in 2023? I mean somehow I do not use it much. Same question about BEM, because I did not see until your responsive design challenge

In regard to "parent/child" naming convention, I like staying with the name container. Parent 1 = container01, Parent 2 = container02. Then each generation uses the alphabet. First child of parent 1: container01a, second child container01b ... grandchildren would be another letter: container01aa, container01ab.

Not a fan of "hero"

"... literally having a class on everything to specif... you know, actually properly select it." KP with the offensive rebound.

Thanks for the concise explanations, Kevin. I initially tried creating my own naming system, but I might as well create my own language and speak to myself if I go down that path.

BEM really helps having cleaner and well-organized code. BTW, what font are you using on VSCode?

Merry Christmas! Thank You for Your very useful and helpful episodes!

Hi Kevin! It would be great if you add subtitles to this video. It tells me they are not available. Thank you very much!

hi!

If there was no CCTV, no one would ever have problems pronouncing specificity

hi

This is a really good explanation and I really appreciate the discipline and outcome to present this in the 5 min duration. Any definition standard such as BEM could easily be overly granular if taken too far. I think the key is using BEM enough that if you have to go back and make changes they work well on a global basis and having to hunt down and tweak too many specific details is where the balance is most productive.

I would like to see more of these Kevin. :)

This is really cool.

Thanks you

Interesting concept. I'm currently redoing my wife's business site, going from WP+Divi to pure HTML+CSS. And I've run into issues keeping my CSS organised and avoiding styling conflicts between different pages. BEM might be the solution. BTW, you forgot to change the title for the dark card. ;-)

Another great tutorial. thx Kevin

Thank you! 🌟❤🥰

thank u for this

its not working for me

OOP in css

I actually like this convention, BEM - easy and clean.

You are missing pronouncing the F. SpeciFicity 😚🤓

it's very helpfull. thank you for explaining, it's so clear

4 years on, and I've been wondering - do we still really have a specificity problem? You can use :where() to select the child tags of a component. And more recently, you can explicitly organize components and modifiers into hierarchies using cascade layers - which also makes me wonder about the future of things like utility-first. Do we still need any of those things? I mean, you can literally just load e.g. bootstrap into a layer and override anything you want in a "theme" layer - the cascade doesn't seem to cause any problems anymore. Can we go back to just using CSS the way it was intended now? Instead of inventing all these complex patterns and systems? Would love to hear your thoughts on this topic in a video. 🙂

Hi

Thanks Kevin!

No worries man! You should hear me try to say “rural” lol

spesisissty

awesome video, thanks so much!

I still don't understand why "card_image" instead of "card__image" isn't enough, and "card_title" instead of "card__title", "card_body" instead of "card__body" and so on.

Thanks for this Kevin. Super helpful!

I dont know how I survived all this time without that