Why I use the BEM naming convention for my CSS
ฝัง
- เผยแพร่เมื่อ 8 พ.ย. 2018
- If you've watched any of my recent videos, you'll know that I use the BEM naming convention for my CSS classes. In this video, I explore why I use it, and why I think you should, at the very least, use some sort of naming convention.
BEM stands for Block, Element, Modifier, and it presents us with a way to make more organized and readable CSS.
I like BEM (mostly, I'm not super strict with my use of it) and think it's a great methodology for naming my CSS classes, but there are many others such as OOCSS, SMACSS, Atomic, and many others. BEM isn't the right answer, it's simply one possible answer. I strongly suggest you read up on the others as well and try to adopt one that you think makes the most sense.
BEM: getbem.com/introduction/
OOCSS: oocss.org/
SMACSS: smacss.com/
Atomic CSS: github.com/nemophrost/atomic-css
#fiveminutefriday
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
![LISA - ROCKSTAR (Official Music Video) REACTION [SHE'S BACK!]](http://i.ytimg.com/vi/QBxE30vavMQ/mqdefault.jpg)
What's your opinion on BEM? And if you use another one, which one do you use?
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.
BEM for me
Never heard of it, but I could get used to it. Since how far back has this been a standard?
Initial commit to their GitHub repo has in 2014. Not sure when it really took off though
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.
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
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.
BEM is awesome. BEM and SCSS is a great combination.
right!!!!
BEM + SCSS makes styling websites super fun
Never seen of CSS naming conventions like this. This is awesome. Thanks so much for posting.
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!
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.
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!!
and this is for free, bootcamps are shit.
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.
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. :)
You've got my respect and subscription due to this amazing course. Will watch what's coming next
Welcome aboard!
I have learnt so much in the past two weeks. Thanks Kevin. HTML, CSS, Mother, Child, SASS, BEM... 😀 So much yet to learn!
Nice Friday video, I'm learning Sass and BEM and you just stitched them together very nicely. Thank you.
Thanks a lot for this tutorial, super simple explanation to get me started in less than 5 mins! Keep it up.
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.
Merry Christmas! Thank You for Your very useful and helpful episodes!
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
Thank you for the video! Really brought much light on that topic for me!
I LOVE looking at a stylesheet that follows the BEM convention, its SO clean.
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!!!
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!
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 :\
saw the link in twitter, rushed to watch you said specificicicity. It makes the video SO much better :p
hahaha, I should make myself a shirt that says 'specificicicity' on it :P
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.
I like how you're flexible about strictness. Real world sometimes requires some thought, not mindlessly following rules. I really like BEM though!
Much needed stuff, Thanks a lot for BEM
Really cool system and I love it works well with Sass too. Thanks for the video
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!
Thanks for this Kevin. Super helpful!
I started BEM. It super easy to organise the css. Scss with bem means awesome
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.
LOL the backtracking at 4:01 is glorious. Thanks for the laugh and knowledge, Kevin.
"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 !
"... 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.
Quick, clear and simple - that's a like
I thought I can pronounce ‘specificity’ until I heard you pronounce it. Now I am having trouble too. Haha
Haha, I hope that I didn't rub off on you in a bad way here, lol.
Specifi - city
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.
I'm glad that you enjoyed the video and found the links useful Aditi! Thanks for the sub :D
Very nice info.. You explained it well... Thank you 👍
Thanks for video, nice and quick explanation 😉
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 ;)
nice video kevin, short and to the point
Another great tutorial. thx Kevin
thanks Kevin! i learned a lot from your channel!
Finally I got what BEM is about! LOL! thanks a lot
Thanks for the explanation!
Valuable information about -- out in the field.
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
it's very helpfull. thank you for explaining, it's so clear
awesome video, thanks so much!
I think I will start to use it, I like it a lot. Simple and effective.
It can be a little hard at first, knowing how far to go with it. Get's more natural over time.
Thank you a lot for your help !
Thank you for making complicated things simple. Now my code will have more added value, and it will be cleaner. 👍👍👍👍
I love SMACSS, but its very easy to use BEM within that code. Especially with SASS "&" as you said
Awesome video
like this video a lot, especially preventing unnecessary nest(s)
Thanks bunches, really useful
I think BEM is the best naming convention, it avoids most scoping problems and is focused on components :).
Loved your video :)
very helpful :) Thanks man
Thanks for that sass nesting shortcut. Good stuff.
No problem :)
This is really cool.
I just watched ur video and I can't help myself not to think how much u look like Hayden Szeto
Nice content btw 👍
lol I have been known for saying the word "activity" as "activititty"
good vid, learned something today.
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. ;-)
Nice and short way to go.
you are the best kevin! cheers
Thanks Peter!
Thanks Kevin!
Nice video. Thanks a lot.
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...
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.
@@KevinPowell no worries, thank you very much for reply at least and I like your clip very much and please keep posting it
Great Video thank you!
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.
thanks for the information
Thank you for sharing
Thank you!
I was just listening at 1.5X speed and specificity sounded perfect at that speed :)
He talks at 1.5x speed so that was 3 x speed ;)
Thank you! 🌟❤🥰
Awesome, thanks so much! :-)
I dont know how I survived all this time without that
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.
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.
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.
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)
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.
@@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.
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!
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!
@@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). :)
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.
I almost feel like if I pronouce it properly one day, I'll disappoint everyone :P
This is gold
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.
Love it
thanks, Kevin
For the people that think that `.crad.light` `.card h2.title` approach is simpler and more readable:
There are several issues with the 'BEMless' approach, that BEM can fix.
1. If you mix your block classes on one DOM node you will have a trouble to distinguish modifiers: `display-item card dark` (is it .display-item.dark or .card.dark?)
2. You will have trouble to overwrite styles with parent selector, because child selector and combined selector has the same specificity level. So you will have to use more specific selectors.
3. Usually it's a bad practice to use DOM nodes as a selector, because you might want to change to or use background image instead of .
The idea BEM is promoting is that you should use cascade only if needed, so your styles structure is mainly flat. This allows to combine and nest blocks in DOM easily without making lot's of adjustments to styles.
You should read BEM FAQ getbem.com/faq/ it's quite accessible.
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.
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.
David Nitzsche-Bell CSS for .card.light is distinct!
@@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.
.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.
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.
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.
thank u for this
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
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.
@@KevinPowell I tend to use camelCase for my names, so a single dash/underscore could work.
@@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.
@@DavidNitzscheBell blasphemy!
@@JeanPatrickSmith ROFL
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
All your minds will be blown when you try styled components instead. So much easier, actually scoped, and much more beautiful
CSS < SCSS < BEM < ABEM < CSS in JS
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.
@@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.
I actually like this convention, BEM - easy and clean.
What about making other video about the complexity of nested elements?
It would be really cool, since everyone has a problem when the project starts to get bigger.
One of the reasons I like BEM, I find it deals with that nicely. I'll see if I can't come up with an example to use for a future video.
Thanks you
BEM is cool if you do it. I usually start out will good BEM and finish with
.main___item-card__title-dark
😂
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
Kevin Powell I would love to see that.
@@Denvercoder +1
Naming things is hard! You could just use .main-card__title--dark
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...
thanks!
"I know I did too many cicicities, but that's just how I say it 'cause I can't pronounce it." LOL
Lol
BEM really helps having cleaner and well-organized code. BTW, what font are you using on VSCode?
Thanks:)
Can you change the second text to i'am a dark card? 😊