You Probably Need BEM CSS in Your Life (Tutorial)

Подписаться 1,1 млн

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

50% 1

Visit linode.com/designcourse for a $20 credit on your new linode account.
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to cover the BEM method for writing CSS. BEM is an acronym for Block Element Modifier, and it's an approach to defining and structuring your CSS. When you're dealing with medium to large size projects, it helps you develop a maintainable code base and one that doesn't run into issues with specificity. While this is a beginner's level tutorial, we will be jumping into more intermediate and advanced tutorials later on down the road.
Codepen demo for this tutorial:
codepen.io/designcourse/pen/K...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Хобби

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

19 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Enjoooy?? Subby subby!

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

I did.. Coursy? Coursy?

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

as always so useful, but I have a question not entirely related. How could one get around having to get the back-end done yourself, and instead just have e.g. an email submission form made with an API? Could that be possible? If so how? Because I actually built a sort of fully-blown html and css project with different urls but my goal for this website is for it to get people submit their email to apply and stuff, but that would require some kind of back-end. Would it not? Hope I explained myself clear enough, sorry if not. Thanks again!

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

@@lucianoramirez6525 Yes it does require some backend if you want people to sign up to apply for something. If you just want a contact form that sends you a user message from your website, its very easy to do.

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

It's live sass compiler, not compilation i guess 🤭

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

Had to subscribe. Thanks.

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

I want a Part 2 where you go more in depth with a bigger project!

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

I've actually been really enjoying your videos and I've watched quite a few since I found your channel the other day. A lot of stuff I've watched has been beginner-intermediate level but it doesn't feel like I'm missing anything I _must_ already know because you don't speak down to your viewer, which is really nice! Some channels kind of act like they're the best and everyone else sucks, so it's nice to watch videos where I can actually learn and feel like I'm getting somewhere with this.

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

I am a CSS newbie. The way he showed BEM using the $ helped me understand the cascade in CSS. Thanks!

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

Came here after watching Kevin Powell's video on BEM. There he had said "specificicity", and here Gary says "specifity". Guess Kevin stole Gary's "ci".

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

lolol

@gabrielsequeira-bacher9049 3 года назад

😂

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

me reading your comment: specifi-kitty...dammit

@UnknownUser-ts1sw 2 года назад

wtf😂

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

One piece of advice is: don’t forget utility-classes just cause you use BEM! A ”hidden” class makes more senese than having a ton of modifier classes that do the same thing, like ”card-hidden” and ”article-hidden” Only use BEM for unique styles and not common ones. You can combine BEM and utility classes, no need to go 100% in a single direction. doing ”card card-large hidden” is fine

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

I personal use BEM together with OOCSS any projects and it's for me a game changer. Simply clean structured and easy to read CSS. Keep up the good work! Regards from germany!

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

I'm mad he never noticed that he added a class to the end of the list item tag

@1997matthew 4 года назад

It's the Auto Rename Tag plugin that's doing that

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

@@1997matthew I know I'm just mad he didn't notice lol

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

You got mad at that... I got mad at calling Underscores (_) as Hyphens (-) and Hyphens as Dashes >.

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

I was about to raise my hand and tell him that, thought it was a real-life lecture .

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

@@1997matthew thanks

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

if i wasnt already using React+Styled Components to deal with such issues, this looks like an amazing system to solve such problems in a practical and DX friendly way

@jennisonb37 7 месяцев назад

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.

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

Thanks! I got put onto a project late in development and found all these classes written like this and didn’t know what the heck was going on.

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

Great video as usual.. I love these fast short and on point.. keepem coming

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

This is my new favorite channel :-D Thanks for all the great knowledge

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

Specificity... Pronounced: spes-ih-FISS-city (5 syllables) :) Good video. I don't use BEM currently, but I'm going to play with it.

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

You are really good at explaining these things. You rock.

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

Thanks for a great intro to BEM. I used to do HTML/CSS years ago and need to pick it back up at work. These days my company uses BEM and SASS so this was perfect and very easy to follow.

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

Thanks a lot sir. Really helped me a lot to understand it from scratch. I'm very much new to this SCSS and BEM concept

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

Styled components are the bomb. Svelte and react have completely made BEM obsolete from my life and I love it

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

Great video, enjoyed the insight. Will try this out on our next project, cheers!

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

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

@nikolozmacharashvili1212 Год назад

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

@Vittokm 7 месяцев назад

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

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

Tutorial on time. Thank you Gery Teacher. :)

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

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

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

🙏❤️ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lmIwYLFYZ9U.html❤️🙏

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

Awesome job! Thanks, Gary🙌🏿

@BenRangel Год назад

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.

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

Best BEM explanation so far

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

Couldn't be more explicit. Thank you!

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

Best explanation with an example. Thanks.

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

Thanks! A really good example of using BEM.

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

It was great! Improved my method of coding CSS!

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

Awesome, simple explanation in less than 20 minutes!

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

Bem Bem... What a Bem Bem! 💎 Thanks for this great tutorial! 🤗🤗🤗

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

So much style in your videos, it's actually delicious!

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

Been like doing this, but without those double underscores and double dash for modifiers. However, thank you for showing this.

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

Excellent video to understand BEM methodology. Thanks!

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

Very helpful, great tutorial. Thank you!!!

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

Thanks for making a video on this topic.....

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

Great easy to understand video. Thank you!

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

great stuff simon, can you please make a video that explain how to configure php for vsCode, so it can auto complete and other things like the atom built-in feature

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

thank you for the video! will you cover CSS-in-JS sometime soon?

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

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

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

Thank you for this tutorial. In the beginning, why do we need two underscores for Class name instead of one underscore, which is simpler and more efficient?

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

Thanks for all your great content always.

@uncle.boonmee 3 года назад

This is *perfect* ! I'm gonna be using it even if the project is small. My CSS naming is a mess and this makes it super organized and coherent. THANK YOU

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

Great Tutorial DesignCourse!!!

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

Very good explanation. Thank you!

@adventure-007 4 года назад

Done that loooong ago. Best decision!

@vito-mohagheghian Год назад

the best BEM tutorial

@amirfayazi562 3 месяца назад

Thanks for such a helpful video

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

Wow, one of the best practices! I love to use it with SASS or LESS! It makes writing your code much easier. Hovewer, BEM classes can be really long sometimes (class="card__heading card__heading--available main__card")

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

So true about it being long.. Sometimes I myself would forget what was the modifier I used.. 🤣 Then I'd have to browse through the entire HTML file looking for what I need to work on..

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

@@ead5590 or sometimes you can have similar classes 🤣 Especially, when your project as big as f...

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

@@rogaldorn7016 Definitely. That's very possible. And that is probably one of the reasons why we use stuff like BEM so that we don't have such issues. Then again, it's a matter of preference. If someone would like to use methodologies such as BEM or not, it's clearly up to the Developer.

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

Why would you have one element be both "main__card" and "card__heading"? That doesn't make sense. Either it's a card or a heading for a card. Not both at the same time.

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

@@BenRangel yah, my bad. It should sound like "card main__card main__card--active"

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

Thank you so much for this tutorial...

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

This video is very helpful especially for me.

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

this is so helpful , i understand them here better than my teacher

@0neonited463 4 года назад

Been using BEM method for over 2 month now... But thanks for reminding how it is..

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

Solid clear explanation

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

Good content, liked and subscribed. All the best!!

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

Man you got such a unique vocabulary haha 1:02 "specifity" 3:14 "complexitness" I think you mean specificity and complexity lol I love your videos btw Im just playing around.

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

The second was was him saying "a little bit more complex than this".

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

Thank you Gary!

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

I'm so happy Angular has styles isolation mechanism and I don't need to use BEM anymore :D

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

Vue has that too. It is so convenient

@diablo.the.cheater 4 года назад

@Angelo Stevens overkill is a feature not a bug

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

@@diablo.the.cheater 😂😂

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

Do you guys mean “scoped”?

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

Awesome! Thanks for your time

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

Great vid thank you, what compiler are you using and how are you watching your files?

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

Omg you get a thumbs up on this video my friend especially after you said "You better not leave". 😂 That moment definitely made me laugh so hard but also made me want to stick around to the end. Thanks for having an awesome sense of humor while teaching. 💜

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

I got into TailwindCSS before getting interested in BEM, so I never really ended up needing it. A useful video nonetheless for a quick overview!

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

@Library Content Yeah, me as well! The nesting of SASS makes it all look very clean and easy to modify.

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

Tailwind is framework tho, this is just methology

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

@@Arttyor That's right, but it removes the necessity for using a naming methodology, at least when you follow the similar process that Adam Wathan (Tailwind's author) does.

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

Here's the only reason I liked this video : He directly, simply, clearly explains what is BEM. That it's a methodology and what's its purpose. It seems all the other guys just start talking and talking as if it's gonna be a philosophical talk. And you don't even have a clue of what BEM is.

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

thank you! I loved this video

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

Helps to understand BEM !

@naturalbornchiller158 3 месяца назад

Thanks dude!

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

I heard a lot about BEM and then I discovered TailwindCSS which is mega cool. Worth checking out :)

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

Design Course thank you so much for your amazing tutorials. Your Videos are really unique. I have a question, when a block gets very big(when I start a big project it gets really confusing for me how to break it to smaller blocks and elements. does anybody have any suggestions? Thank you all in advance :)

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

thanks for BEM explanation=))

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

BEMs weakness, if there’s one to be extracted from these comments, is its name. Blocks, elements; most of these people know what those are and that can make it confusing when there are more than 2 nest levels. What I take away from this is that it’s definitely useful if used thoughtfully, when considering the first slides: What blocks on are project are similar in HTML structure but unique in content nature or styling? Card, content, list, these terms are general but if I imagine a blog post preview, album preview, news article preview or rental listing, I can see how BEM would be beneficial. Thank you.

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

thanks for this

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

Stunning.

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

gonna follow that convention

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

I’ve been using it just because I saw that JetBrains has it on the webpage. Now I see why I’m doing it

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

I like the fact that you follow JetBrains :)

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

Why is that? What's the benefit?

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

Andi Rady Kurniawan if you’re using scss, which will definitely help you a lot, this Bem makes it easier. You can type .menu and in scss the „&“ character selects it again but you can add something. So for example if you have a list in your menu which has the class „menu__list“ you can just type in the menu css: &__list (.menu__list). And that with several items. It just helps you a lot and organizes everything

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

Great video, thanks a lot!

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

Awesome Garry

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

Yesssss! Finally somebody who I trust covering a topic that seemed to me like a mystery.. I mean seriously.. When I was learning CSS, all that mattered in naming classes was something that was easy for me as a developer.. And then came along BEM, SMACSS, OOCSS and who knows what.. Like wtf.. 😵 Thanks for talking about BEM Gary.. Now how about SMACSS, OOCSS.. 😁

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

how do you know that name? SMACSS, OOCSS or maybe something thats never exists but actually exists?

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

@@sugiono2801 Sup man! Well I'd taken a Udemy course by Jonas Schmedtmann named 'Advanced CSS and SASS' course. Within that he mentions of these methodologies for naming the various classes. But he uses the BEM method during the course. It would be worth noting these methods because recently when I was browsing through job postings on LinkedIn, there are postings where they ask you to have a fair amount of knowledge about a specific method such as BEM.

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

thank youuuu man

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

Fantastic video

@claudiutamas79 Год назад

GEnial! Thanks!

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

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

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

Very good. Thanks

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

hi.. what software did you use for the slides at the start? looks quite nice.

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

Awesome video as always! Quick question, could the ul be card__content__list? and the li card__content__list__item (modifier as card__content__list_item--active)? Would this make it work better with sass/less. Or could something like this be more oocss or smacss?

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

If you don't have too many classes I prefer to do "card__list" and "card__list-item". It's shorter and in my opinion it still works quite well.

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

@@adm7282 yes this is better, because card__item is not so meaningful. Every thing in the card is a card item and is does not explain that it belongs to a list.

@sunflair-wa 2 года назад

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

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

🙏❤️ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lmIwYLFYZ9U.html❤️🙏

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

Great! Thanks a lot! 🤝👍

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

Cool stuff!

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

Why are the elements considered as elements of the card rather than elements of the "card__list"? Are they not elements immediately tied to the list?

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

When using the bem metodology properly, you shoul always refer to the one main block element and go only one level deep.. I personally would rather use here a class like card__list-element. Hope it makes sense

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

@@thmscz7707 Ah that makes sense. Thanks for explaining!

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

thanks a lot!

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

BEM in SASS + React components. The organization flows beautifully.

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

Most of the things i learned from here ☺️

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

what software do u use to make that's awesome presentation ?

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

12:03 Was it necessary to add class="card__item" inside the closing tags as well? Or was it a typo?

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

Just a typo ^^

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

Definitely an error

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

Great 💡, thanks

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

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?

@adheeshadeshan608 9 месяцев назад

Great ✌

@coolworx Год назад

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?