Why I use the BEM naming convention for my CSS

Подписаться 904 тыс.

Просмотров 204 тыс.

50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

8 ноя 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 437

@KevinPowell 5 лет назад

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

@AliAkbar-vo3te 5 лет назад

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 5 лет назад

BEM for me

@LorenHelgeson 5 лет назад

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

@KevinPowell 5 лет назад

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

@dvdrtrgn 5 лет назад

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.

@JamesMartinBass 5 лет назад

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.

@jarynzr 5 лет назад

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

@busyrand 4 года назад

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.

@MrJoefinisher 5 лет назад

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

@mattcroat 5 лет назад

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 2 года назад

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!

@leonardoromero7398 2 года назад

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 2 года назад

and this is for free, bootcamps are shit.

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

@SystemXX93 4 года назад

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

@KevinPowell 4 года назад

Welcome aboard!

@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!

@daniamsalem 4 года назад

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.

@kamaboko1 5 лет назад

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

@ne9835 4 года назад

right!!!!

@Rogue_Art 2 года назад

BEM + SCSS makes styling websites super fun

@FullStackWebDevSteph 14 дней назад

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

@gehlwaz 5 лет назад

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

@chrismachabee3128 4 года назад

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

@mattcroat 5 лет назад

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.

@tbinyt 2 года назад

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

@apphacker 5 лет назад

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

@simeongeorgiev1107 3 года назад

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

@JanisGrinvalds Год назад

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

@hopsta 5 лет назад

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

@ahummbrahmasmi 5 лет назад

Much needed stuff, Thanks a lot for BEM

@dogpaws7312 5 лет назад

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 5 лет назад

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 :\

@garrystewart376 4 месяца назад

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

@Ah-you-know Год назад

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

@omarshishani5899 11 месяцев назад

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.

@robertclarke4096 2 года назад

Thanks for this Kevin. Super helpful!

@tonimaunde 3 года назад

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

@CarsonSuite 5 лет назад

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!

@facundocorradini 5 лет назад

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

@KevinPowell 5 лет назад

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

@rafay773 5 лет назад

"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 !

@maxfate9006 4 года назад

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

@BitFrosty 5 лет назад

Quick, clear and simple - that's a like

@johntrent018 2 года назад

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

@josvelema2362 3 года назад

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

@DaggoeNinja Год назад

Another great tutorial. thx Kevin

@andrewenyeart3501 3 года назад

Thanks for the explanation!

@Knards 5 лет назад

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

@phamthang6558 2 года назад

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

@israamoqbel3452 5 лет назад

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

@aditiakolkar6905 5 лет назад

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 5 лет назад

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

@muzika5001 2 года назад

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

@marshwiggleme 2 года назад

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.

@taariqq 4 года назад

Valuable information about -- out in the field.

@objectObject212 4 года назад

Thanks for video, nice and quick explanation 😉

@longtran12345678 5 лет назад

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

@freemancity2518 2 года назад

Thank you a lot for your help !

@dav2288 5 лет назад

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

@KevinPowell 5 лет назад

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

@bibibobs 5 лет назад

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

@soultouchingsongs 5 лет назад

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

@thecoderabbi 2 года назад

Thanks Kevin!

@igeyarugu9575 4 месяца назад

Thank you for sharing

@user-dr6wd6ux9t 4 года назад

thanks Kevin! i learned a lot from your channel!

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

@jgarzarebel2631 Год назад

Thank you! 🌟❤🥰

@procrastinator24 2 года назад

awesome video, thanks so much!

@zwiebec78 4 года назад

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

@georgesmith3022 5 лет назад

nice video kevin, short and to the point

@faridshokri4034 4 года назад

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

@arnobchowdhury9641 5 лет назад

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

@KevinPowell 5 лет назад

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

@Victor_Marius 3 года назад

Specifi - city

@petermichael5447 5 лет назад

you are the best kevin! cheers

@KevinPowell 5 лет назад

Thanks Peter!

@adrainmunteanu125 2 года назад

Thanks bunches, really useful

@1fromtibet 5 лет назад

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 5 лет назад

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 5 лет назад

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

@rayskinner4289 5 лет назад

Thanks for that sass nesting shortcut. Good stuff.

@KevinPowell 5 лет назад

No problem :)

@jasonsworld333 Год назад

Nice and short way to go.

@SamCrowetheCreativeCrowe Год назад

This is really cool.

@AbdulMannan-jz7zm 4 года назад

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

@SteveT__001 3 года назад

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

@TheCocoaDaddy 2 года назад

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 2 года назад

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 2 года назад

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

@tech-nomade 2 месяца назад

This is gold

@zkang93 5 лет назад

Thank you!

@stevebennetts5161 3 года назад

Great Video thank you!

@JayRGabz 5 лет назад

thanks for the information

@matthewfelgate 5 лет назад

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.

@Shkkmj6868 Год назад

Nice video. Thanks a lot.

@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?

@approachingpassive 5 лет назад

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 5 лет назад

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

@robertrydlewski9538 5 лет назад

very helpful :) Thanks man

@nolisto1 5 лет назад

Awesome video

@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

@nivoset 3 года назад

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.

@facundocorradini 5 лет назад

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 5 лет назад

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.

@ImTooSwFT 5 лет назад

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 5 лет назад

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 5 лет назад

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 5 лет назад

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

@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{ }

@kelvinedosa8723 4 года назад

Loved your video :)

@mrgiagar3116 5 лет назад

Awesome, thanks so much! :-)

@alimfuzzy 5 лет назад

Nice video. Would this method not influence the reusability that css is to have? If your using css to define structure then you lose its flexibility. I get the value of doing it this way but it seems a bit rigid and if the stylesheet grows it could become a mess of either using the tags in the wrong place or having to repeat yourself (DRY), or having a hodgepodge of using this style some places and not using in others, lets face it documentation and training rarely keeps up with work and people jump in and do their own thing.

@KevinPowell 5 лет назад

WHen I first started using it, this was a bit of an issue for me, but it was really developed to work at scale. Takes time to get used to, and you can't get too stuck on it. a button inside a form isn't a .form__button, but just a .button, or .button--modifier, etc. I might have a .title that is used inside of a lot of things, for example. It doesn't have to be a .articel__title, a .section__title, etc.

@kolyaevdokimov Год назад

thanks, Kevin

@JesusFerVid94 Год назад

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

@whyfoo Год назад

thank u for this

@insanityrodax8621 5 лет назад

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.

@KevinPowell 5 лет назад

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.

@tttella 5 лет назад

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

@tttella 5 лет назад

CSS < SCSS < BEM < ABEM < CSS in JS

@KevinPowell 5 лет назад

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 5 лет назад

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

@elhadifettah7993 5 лет назад

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

@stanleymcomber4844 2 года назад

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

@gualaguala 5 лет назад

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

@samwoodward8031 4 года назад

Hi Kevin, brilliant video. Do you keep typography separate? ie seperate site wide classes ie for heading, paragraph, link etc styles?

@KevinPowell 4 года назад

Yeah, I usually have generic styles first for body, headings, paragraphs, links, etc, and then I'll start using classes.

@samwoodward8031 4 года назад

@@KevinPowell Cheers for the reply, really appreciated. One last quick question.. Do you apply styles directly to the tags?, or do you mirror them with named classes such as .h1 to .h6 for headings? Tought in BEM it discouraged you to apply styles directly to tags

@KevinPowell 4 года назад

@@samwoodward8031 it is, but I do it anyway. Mine is more of a "inspired by BEM" 😂

@codecast8713 3 года назад

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

@Denvercoder 5 лет назад

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

@KevinPowell 5 лет назад

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 5 лет назад

Kevin Powell I would love to see that.

@JeanPatrickSmith 5 лет назад

@@Denvercoder +1

@CristianPallares 5 лет назад

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

@mdibbets 5 лет назад

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