You Probably Need BEM CSS in Your Life (Tutorial)

Enjoooy?? Subby subby!

"specifity. I can never say it right. SPECIFITY! there we go!" DEAD xD great video though!!

Very very good! was trying to understand this before but only now I understand :)

Thank you for explaining BEM so clearly and succinctly. You got a new sub and I'm looking forward to watching some of the other videos you have.

Great ✌

wrong naming. very wrong.

thanks

What's the point of doubling up on the underscores and the hyphens?
Wouldn't card_button-active tell you the same information (what it's for) as card__button--active?

I've used BEM for many years.
Modifiers are great and truly provides a nice way of stating a clear intention that this element has a shared base style and a variant that overrides or adds a few things.

But the block__element concept is less useful. It's fine in tiny flat components that you don't change a lot.

But in larger things the double underscore often has to be moved deeper down and feels useless.

You begin with footer__menu but as that menu gets more and more children you rename it to footer-menu so can have children like footer-menu__user and footer-menu__faq

If this renaming happens multiple times, or the dom tree for the footer is quite deep then you end up just forgetting which nodes have the block__element thing and which just use dashes.

At which point I usually go "screw it, let's use single dashes all the way" and I never end up regretting it.

I still use BEM on small isolated components though.

thank you, really helpful!!

great job with the slides... best slides I have ever seen

GEnial! Thanks!

Thanks

👏👏

great video

I spy with my little eye a Kemper Toaster!

the best BEM tutorial

"spess-uh-FISS-it-tee"

thanks!

i dont really understand, how the selector in css works, when you reference the name just with the the __name, just because its named differently in the html...

Thank you so much for this tutorial...

Great easy to understand video. Thank you!

Specificity! :P

It's useless, using SASS is better.

That was clear... but a little bit confusing if we want to use isolated component or block to another block. We can not override style from unrelated block.

for example, we want to use .btn block inside .card block. Let say that the button inside .card block have different style. So how we deal with it?

There are only one elem of everything...

Fantastic video

Isn't it SpeciFIcity

nice method on writing css, scss + bem probably the best way to go for large project

thanks a lot!

perfect

gonna follow that convention

I have used BEM in one previous company project, not a big fan of it. I like modular css/scss much better.

Thank you for a good explanation! This video helped a lot!

Important question. What is that green guitar in the background? Are these EMG pickups?

Very helpful, great tutorial. Thank you!!!

I don't care if I'm doing large project or small, I always use BEM. (that's different thing I don't get large projects)

It is Spe-ci-fi-ci-ty ;-) And why arent you using semantic elements in HTML? Like a section or an article for the card? It is supposed to be an element that can stand alone and therefore it should be an article or a section for each card? I know that there is not a title/heading in this example, but anyways? And why is the picture/img not a part of the content element?

Thank you so much. I feel like I have been given the secret handshake to the club :)

Great tutorial ! Good speed, clean and straightforward to the point. Thanks.

Coming from a big project, one important lesson learnt: don't abuse Sass/SCSS, keep it to bare minimum. Reason? Trying to resolve a high priority production defect with a huge SPA codebase, it doesn't help to have .block { ...; &__element{... &--modifier{...}} rulsets: it very hard to find the original rule definition in source code, since in the browser you'll see generated version. The lesson learned, in order to be able to quickly find a rule, write entire selector by hand, don't leave it up to SCSS preprocessor. One thing is to write confusing Sass code to impress junior female developers on your team, and another thing to debug prod issue under pressure and a lot of stress. KISS.

By mistake you have added class on closing tag as well

What happened to the red guitar in the background?

I started using this method after a tutorial without even knowing what it is lol

Thank you Gary!

I still dont get the point of BEM