Why I use the BEM naming convention for my CSS

[@KevinPowell]

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

[@AliAkbar-vo3te]

If I use BEM, first, I won't be using it every where around my html, second, I would use it in combination with sass.

[@techtipsuk]

BEM for me

[@LorenHelgeson]

Never heard of it, but I could get used to it. Since how far back has this been a standard?

[@KevinPowell]

Initial commit to their GitHub repo has in 2014. Not sure when it really took off though

[@dvdrtrgn]

to me it looks overwrought. i haven’t tried it because it seems to work against the cascade that makes css powerful. but i admit i just can’t get past the verbose selector naming.

[@jarynzr]

important note that when using BEM make sure that you already got the actual mockup of the design. You have to properly identify each component first

[@JamesMartinBass]

I've struggled with how to best organize my CSS so the parent/child relationships are clear. This looks really promising. Thanks for explaining it so clearly.

[@kamaboko1]

BEM is awesome. BEM and SCSS is a great combination.

[@ne9835]

right!!!!

[@Rogue_Art]

BEM + SCSS makes styling websites super fun

[@mattcroat]

I just started enforcing this the other day. I didn't like it at first but I got used to it and now I'm a fan.

[@ozzyfromspace]

I was coding a React SPA last night and finally had the mobile layout done, but realized that I hadn't thought about how to modify my grids for tablets and desktop. The thought of making poorly organized edits for this drove me nuts, so I went on a search and found BEM. I'm excited to try it. Scrapping my work and starting again, as many times as it takes to do a good job. Nice video Kevin, it was highly informative!

[@busyrand]

I just started working on projects for clients and saw this in the wild. I'm happy to have seen things previous to encountering it. It makes much more sense after having to deal with it for a while without understanding what was going on.

[@LovingCauseKarmaHandlesItForMe]

I LOVE looking at a stylesheet that follows the BEM convention, its SO clean.

[@jmcbade2960]

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. :)

[@H4U-14]

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

[@MrJoefinisher]

Never seen of CSS naming conventions like this. This is awesome. Thanks so much for posting.

[@leonardoromero7398]

I'm enrolled in my first programming bootcamp but I can't stop coming to your channel for clarification on almost every topic so thank you for that! You rock!!

[@jonathandavis8599]

and this is for free, bootcamps are shit.

[@maxfate9006]

I started BEM. It super easy to organise the css. Scss with bem means awesome

[@tbinyt]

I learn so much from your videos. I am about 80% through the Conqering Responsive Layout course (it's free guys!! FREE!!). I really appreciate your knowledge and time. Thank you!!!

[@SystemXX93]

You've got my respect and subscription due to this amazing course. Will watch what's coming next

[@KevinPowell]

Welcome aboard!

[@mattcroat]

I just got into enforcing this the other day. I didn't like it at first but I got used to it and now I'm a fan.

[@apphacker]

I like how you're flexible about strictness. Real world sometimes requires some thought, not mindlessly following rules. I really like BEM though!

[@rafay773]

"I need to check this BEM thing out ... lets see if Kevin has something on the topic" -- He uploaded a video on BEM just hours ago. Lucky me. Thank you !

[@tonimaunde]

LOL the backtracking at 4:01 is glorious. Thanks for the laugh and knowledge, Kevin.

[@daniamsalem]

I've been reading up on BEM/SCSS while on your Conquering Responsive Layouts course and the one thing I was worried about was how deeply nested the rules get when compiled. However, when you toggled to "compiled css" in CodePen it all became clear. I will totally be implementing BEM this week.

[@CarsonSuite]

Lol didn't know that this was actually called somthing but I've been doing this for years! I just love keeping it organized less is more!

[@garrystewart376]

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

[@bibibobs]

I think BEM is the best naming convention, it avoids most scoping problems and is focused on components :).

[@paoloose]

I dont know how I survived all this time without that

[@omarshishani5899]

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.

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

[@chrismachabee3128]

Nice Friday video, I'm learning Sass and BEM and you just stitched them together very nicely. Thank you.

[@gehlwaz]

Thanks a lot for this tutorial, super simple explanation to get me started in less than 5 mins! Keep it up.

[@AbdulMannan-jz7zm]

I was just listening at 1.5X speed and specificity sounded perfect at that speed :)

[@SteveT__001]

He talks at 1.5x speed so that was 3 x speed ;)

[@arnobchowdhury9641]

I thought I can pronounce ‘specificity’ until I heard you pronounce it. Now I am having trouble too. Haha

[@KevinPowell]

Haha, I hope that I didn't rub off on you in a bad way here, lol.

[@Victor_Marius]

Specifi - city

[@Knards]

I love SMACSS, but its very easy to use BEM within that code. Especially with SASS "&" as you said

[@facundocorradini]

saw the link in twitter, rushed to watch you said specificicicity. It makes the video SO much better :p

[@KevinPowell]

hahaha, I should make myself a shirt that says 'specificicicity' on it :P

[@karsyz]

Just before I watched this video, I was having trouble saying emissivity. Right there with ya :D

[@tttella]

All your minds will be blown when you try styled components instead. So much easier, actually scoped, and much more beautiful

[@tttella]

CSS < SCSS < BEM < ABEM < CSS in JS

[@KevinPowell]

I like the concept, but for a lot of my viewers, they're new (or new-ish) to HTML and CSS, and struggle or don't even know JS, so that might be a hard sell, lol. I'm also not personally a fan of CSS in JS. It's not a hill that I would die on... and it depends on a few things... and I know it has advantages, and maybe it's because I'm stubborn, but I just can't get on board personally. If someone asked me if they should adopt it, I wouldn't say 'no' though. More complicated than that.

[@tttella]

@@KevinPowell That makes sense. As an aside, if you use styled components it's identical to scss, so it's not really that different. The only difference is you're putting it in a js file instead of a css file so you get the same syntax with the benefits of a full programming language. Not to mention you also usually get the benefit of automatic above the fold css which is kind of a pain / tricky usually.

[@hopsta]

Really cool system and I love it works well with Sass too. Thanks for the video

[@NalgoDeSatanas]

BEM is great, but i don't understand why using two and not just one dash and write shorter class names: .card .card_body .card-dark

[@KevinPowell]

We use one hyphen for spacing, so say something like '.featured-content'. If after this I had '.featured-content-footer' that just looks like a long name for it, whereas 'featured-content--footer' shows me that it's a modifier. It makes it much easier to see, and really hitting the key twice doesn't slow you down.

[@DavidNitzscheBell]

@@KevinPowell I tend to use camelCase for my names, so a single dash/underscore could work.

[@AnkerPeet]

@@KevinPowell that would've been nice to hear that in video. I wouldn't of known the answer to the question you posed in the title unless I came to this comment.

[@JeanPatrickSmith]

@@DavidNitzscheBell blasphemy!

[@gwork5615]

@@JeanPatrickSmith ROFL

[@simeongeorgiev1107]

Thank you for the video! Really brought much light on that topic for me!

[@dogpaws7312]

Hello Kevin! I'm a newcomer and been catching up on your videos and I'm really learning quite a lot! I really enjoy watching the from-scratch videos as I can see how things come together and have been using a lot of code into my web dev class I'm taking. Would you consider doing more videos like those? It's really fun to see how a full site can come about from a few lines of code. Thank you for all you do and look forward to more content from you!

[@KevinPowell]

I'll have another one at one point, but they are really long to put together. So yes, there will be more of them coming... but it might be awhile :\

[@DaggoeNinja]

Another great tutorial. thx Kevin

[@facundocorradini]

You know I love Five Minute Fridays, but really got the feeling BEM deserved a full-length video to better showcase the many, many issues it prevents.

[@KevinPowell]

I had to heavily edit this one, so I think you may be right. Probably worth revisiting later on, specially to address some of the comments some people are leaving about why they don't like it.

[@iFayding]

I would really appreciate such a video. As a new coder I'm interested in BEM but also unfamiliar with the scenarios in which it best shows it's worth.

[@Piercy0812]

honest opinion, if new i wouldn't go down this route too much. I think it would be a struggle in most teams to get this implemented and many existings devs would likely not appreciate it. It could be a cool thing to do if working on your own projects, but make sure you know base CSS as much as you can (SCSS and SASS is easy if you know base CSS). I know if my place employed a new dev, the existing team wouldn't appreciate starting to see BEM in places. It makes it harder for more senior developers to help out with newbies if things dont fit in with whats already around. Thats not to say dont use this, just at the start it might not be the best idea to dig too far into it. (just to add some credit to this that im not a complete random dumbass from the net.. im 10 years a developer and currently leading a team of 6)

[@KevinPowell]

Michael, I'd never advocate for a new person to come into a team and start using something that they aren't using. That would simply cause problems, like you mentioned. This is something a team would have to decide on together, and I don't think they need to use BEM, but simply have a naming convension to follow, then when a new person comes in, whatever they use should be explained to them, and they should be expected to follow how everyone else works.

[@facundocorradini]

@@Piercy0812 BEM is an industry standard, and has been for almost a decade. I'm totally with you on that any team needs *an* architecture (whichever one they choose to follow), and newcomers have to follow it. It just so happens that BEM is the CSS architecture of choice for 90% of places, not counting those who go with a CSS in JS approach.

[@josvelema2362]

Thnx for triggering me to get into BEM and SCSS . In your other video's you use it all the time but i never got to see a use case . Using the & operator makes total sense ! Also the specificity thing is nothing to worry about except that it is contagious ;) I noticed that with 'justify-content' you break it up like 'just i fy con tent' and applying that technique does not work for specificity but i just misspell it in my head to get the pronunciation better; like : 'spes-sifi city ' . Don't worry about it for the rest it's kinda cute ;)

[@robertclarke4096]

Thanks for this Kevin. Super helpful!

[@Octopossible]

I would've just used classes "card dark" and "card light" then my CSS has .card {...} as well as .card.light {...} and .card.dark {...}. I'm not sure what BEM has done for you beyond that, apart from redundant verbosity in the naming conventions. Not only have you addedd -- and __ but you've reused the word card a gajillion times. I don't think that's necessary. SASS really helps with the nesting issues, though, that's for sure.

[@DavidNitzscheBell]

I think the reason to call it .card--light instead of creating a simple .light class, is because a generic name like "light" might be appropriate in many places throughout the project and throughout the CSS. If you have light cards, light buttons, etc. you would need some way of distinguishing the different "light" classes so that the right one was used in the right place. The benefit this BEM gives you is the ability to literally copy/paste the CSS for a card into a new project. This .card definition is completely modular. No wrapper class. The CSS is all together, so, easy to move to the next project.

[@Octopossible]

David Nitzsche-Bell CSS for .card.light is distinct!

[@DavidNitzscheBell]

@@Octopossible but multi-level CSS selectors goes against the BEM methodology, which tries to keep the CSS file as flat as possible. Again, if you have another element on your page that you also want to be .light, so maybe .section.light, but the styles you want to apply are *in any way* different from the styles applied to .card.light, then you're in a pickle. Having .card--light and .section--light lets you style each one uniquely.

[@KevinPowell]

.card.light or even .child .selector are distinct, but can cause specificity issues. You'll notice all CSS naming conventions and style guides strongly advocate for class names for everything, and no tag or ID selectors. And Google, which doesn't mind ID selectors, specifically mentions to avoid nested selectors, mainly for performance reasons ( google.github.io/styleguide/htmlcssguide.html#Type_Selectors ) There are issues with BEM, and I understand why some people don't like it, but it, and other conventions, have come about as solutions to problems that come up as projects scale, and from working on teams. If you are working on smaller projects, or are the only person working on it, and it's not a project that's revisted, you may never run into these problems and t hings like BEM seem insane, and sometimes it can be overkill on a small project, but then if that project starts to scale up, the last thing yo uwant to do is have to refactor a ton of code because you start running into issues, or worse, start having to use !important and run into specificity battles all of a suddden.

[@michaelwoodruff5752]

Also, the __ means that something is nested, while -- means that something has extra specificity. That difference cant really be described using your card.dark selector. I think this convention is super crisp. I'm going to use it from now on for most projects.

[@TheCocoaDaddy]

Neat! What I've done is use a class for the 'common' styles and use either another class OR an ID selector to define the unique styles. So, using the 'card' example in this video, I would have a 'card' class with the base styles and have either #light/#dark for the light/dark cards or have .light/.dark classes. I had never heard of BEM until now. Thanks for the info!

[@soymuymuy]

Hey there. You might like to know it's not valid mark up to have multiple elements on a page with the same id so be careful with that #light #dark idea!

[@TheCocoaDaddy]

@@soymuymuy Hi! Thanks for the message. Yes, I'm aware of that. In the case of multiple elements needing to be "light" or "dark", I would use classes. If there's only ONE element that needed to be "light" and one that needed to be "dark", I would use the ID (or I might still use a class). :)

[@rayskinner4289]

Thanks for that sass nesting shortcut. Good stuff.

[@KevinPowell]

No problem :)

[@marshwiggleme]

I didn't even know of BEM or OOCSS until I kept getting in my own way in the responsive layouts course, and looked at other peoples code that i noticed would combine/reuse names. I really still don't know anything about naming conventions or nesting so it would be great to see more.

[@muzika5001]

Thank you for making complicated things simple. Now my code will have more added value, and it will be cleaner. 👍👍👍👍

[@zwiebec78]

lol I have been known for saying the word "activity" as "activititty" good vid, learned something today.

[@BitFrosty]

Quick, clear and simple - that's a like

[@johntrent018]

I know the vid has been done 2y ago but personally I discovered OOCSS and I can say that combined to SASS and SMACSS it's definitely changing how you work with Front-End. I'd say that MVC model is to a website what SMACSS is to CSS. I'm struggling to set it all and change my old messy coding habits but I can directly see effects of OOCSS on code comprehension

[@dav2288]

I think I will start to use it, I like it a lot. Simple and effective.

[@KevinPowell]

It can be a little hard at first, knowing how far to go with it. Get's more natural over time.

[@jasonsworld333]

Nice and short way to go.

[@thecoderabbi]

Thanks Kevin!

[@stanleymcomber4844]

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

[@1fromtibet]

Really appreciated if you help us to make another epic about the comparison between different naming conventions as you mentioned in the clip, awesome epics...

[@KevinPowell]

I don't have a lot of experience with the others, so I'm not sure if I could do the others justice or not.

[@1fromtibet]

@@KevinPowell no worries, thank you very much for reply at least and I like your clip very much and please keep posting it

[@ahummbrahmasmi]

Much needed stuff, Thanks a lot for BEM

[@phamthang6558]

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

[@RasmusSchultz]

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. 🙂

[@RasmusSchultz]

(no doubt conventions can still help with the "human" problems - I'm just wondering if conventions and systems are still necessary to solve any technical problem?)

[@procrastinator24]

awesome video, thanks so much!

[@andrewenyeart3501]

Thanks for the explanation!

[@taariqq]

Valuable information about -- out in the field.

[@freemancity2518]

Thank you a lot for your help !

[@deeplybrown]

"I know I did too many cicicities, but that's just how I say it 'cause I can't pronounce it." LOL

[@ne9835]

Lol

[@objectObject212]

Thanks for video, nice and quick explanation 😉

[@longtran12345678]

like this video a lot, especially preventing unnecessary nest(s)

[@ricssilvaDB1]

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!!! :)

[@elhadifettah7993]

Can you change the second text to i'am a dark card? 😊

[@pixelum2023]

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. ;-)

[@maxmaxmaxmaxmaxmaxmaxmaxmax1]

"This is a Friday meaning we're going to be doing this in under five minutes" [Looks at video length: 7:02] Keep up the good content :)

[@skyzane2735]

Do you have a video on Getting Started with css on a new project? Like giving the resets, defining :root variables everything without using sass?

[@bencrossley4085]

Say 'Specif-y' (long i sound as in the verb). Change the -y into an -i (short i sound). 'Specif-i'. The add 'city'. And hey presto you've got... SPECIF - I - CITY Easier if you just split it into two bits: SPECI - FIC ITY What about 'specific-ness' instead!! PS Great tutorial, as always. Really useful and clear.

[@KevinPowell]

At this point I think it's just part of my charm, lol. I can say it slowly, over and over, and then say it at a normal speed and my brain malfunctions again.

[@not_importan]

Thanks bunches, really useful

[@georgesmith3022]

nice video kevin, short and to the point

[@guersomfalcon7544]

Considering that to use the '&' symbol you don't need to use double hyphens or underscores, why not use only a hyphen and an underscore?

[@jgarzarebel2631]

Thank you! 🌟❤🥰

[@aditiakolkar6905]

Thanks K.P. for such a good video. Also the links provided below video are very useful. I always see your videos. I learn a lot from them + some new things gets to know. I'm happy to subscribed your video.

[@KevinPowell]

I'm glad that you enjoyed the video and found the links useful Aditi! Thanks for the sub :D

[@israamoqbel3452]

Finally I got what BEM is about! LOL! thanks a lot

[@Denvercoder]

BEM is cool if you do it. I usually start out will good BEM and finish with .main___item-card__title-dark 😂

[@KevinPowell]

Lol, I know how you feel. I've figured out some ways to avoid that, which I might make a more in depth video about at one point

[@Denvercoder]

Kevin Powell I would love to see that.

[@JeanPatrickSmith]

@@Denvercoder +1

Naming things is hard! You could just use .main-card__title--dark

[@mdibbets]

This reminds me of php before namespaces. class magento_store_display_cart_item extends magento_general_display_item There's a reason namespaces were introduced. Seems those who thought up bem never considered lessens learned from other languages...

[@SamCrowetheCreativeCrowe]

This is really cool.

[@petermichael5447]

you are the best kevin! cheers

[@KevinPowell]

Thanks Peter!

[@elliemay1748]

This takes care of some of the nesting issues but you’re still nested. Now if card-dark needs a different body text color you have to overwrite .card__body, for example, with nesting within card-dark. Nevertheless I think it’s a good compromise to avoid having to re-write css for things like headers and paragraphs. But... if you use a css framework, it will have default styling for everything, and you’ll still have to overwrite. This is why I avoid using anything other than divs unless absolutely necessary for SEO. If it doesn’t have a use case for SEO, use a div or span.

[@KevinPowell]

Was I using things other than divs or spans, except where needed, in my example? Good point about the .card__body. I'm going to look at some options for dealing with that in future videos, so we can avoid things like having .card__body--light and .card__body--dark and crap like that, which is annoying.

[@user-dr6wd6ux9t]

thanks Kevin! i learned a lot from your channel!

[@nivoset]

I think it is more useful on static sites. When being compiled I think it doesnt matter as much. And it is even less if using shadow dom overall. I dont mind you using it personally or for videos. And if the site you write is large and complex but not compiled in other ways. It is useful.

[@argothiel]

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

[@gualaguala]

Bem is good for non compoonent based development. New frameworks are very isolated and have possibility to use per component based css. I would recommend something like SuitCSS methodology. BEM is old...

[@konraddziuba6802]

Why dark card says, I'm light card?

[@KevinPowell]

Haha, because I forgot to update the ext inside 😂

[@robertzeurunkl8401]

I guess I'm just too new to this.... But.... All you have is a "card" class that defines CSS common to both cards, and then additional classes for light and dark cards, that addresses the differences. What does this have to do with double dashes, and double underscores, other than naming conventions that say "Hey, I'm a subclass of the 'card' class?"

[@KevinPowell]

Nothing at all, that's exactly what the dashes an underscores denote. It makes it so that, later on if you're references your CSS, you know if something is a subclass, or a modifier class, or the block itself instantly, without even needing to read the name.

[@JonBrookes]

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

[@Shkkmj6868]

Nice video. Thanks a lot.

[@soultouchingsongs]

Very nice info.. You explained it well... Thank you 👍

[@JesusFerVid94]

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

[@stevebennetts5161]

Great Video thank you!

[@codecast8713]

We use a single dash for spacing so double dashes for modifier makes sense. But why then do we need double underscores?

[@tech-nomade]

This is gold

[@faridshokri4034]

I just watched ur video and I can't help myself not to think how much u look like Hayden Szeto Nice content btw 👍

[@matthewfelgate]

Nice video. Although if 'light' is the default for card then you would only need an additional .card--dark {...} class I think. It think with BEM then .card should work without a modifier.

[@Fliteska]

I try to use BEM, but I've started trying utility first lately. A lot of people at work don't like it but that's fine they like to do classes like bigRedText

[@KevinPowell]

While you might disagree, if you're working with a team and they've adopted a way to work, I'd say you need to suck it up and do the same. You could try and argue your point in a very respectful and well thought out way that it might be a good idea to switch though! But if you're working with people on a project, having different naming systems defeats the purpose of having a naming system.

[@Fliteska]

@@KevinPowell had a chat with the team, they are going to try out BEM, I explained to them the different issues with setting up class names and avoiding throwing in a random class

[@andrewgarfinkel1978]

is there a codepen for the html/css of this video?

[@approachingpassive]

So I can’t double thumbs up but this is worthy of two. Just had a discussion at work regarding how to organize css. We have a terribly nested set of base templates that is a nightmare to call out. The spe-ci-fi-ci-ty drives me crazy.

[@KevinPowell]

I almost feel like if I pronouce it properly one day, I'll disappoint everyone :P

[@SaleKnezevic]

Great stuff (did i just cleaned small dust of it?)