Learn CSS BEM (and avoid these common mistakes)

Подписаться 1,9 тыс.

Просмотров 4,3 тыс.

50% 1

In this video, we're diving into BEM, which stands for Block Element Modifier-a popular semantic CSS methodology. We'll break down the basics of BEM, including blocks, elements, and modifiers, and show you how they all work together. Plus, we'll cover some of the common questions people have and highlight mistakes to avoid.
CodePen: codepen.io/dmtrmrv/pen/vYMEGpx
Chapters:
00:00 - Intro
00:14 - What are CSS Methodologies?
00:49 - What is BEM?
01:13 - What is a Block?
01:59 - How to Name Blocks
02:37 - Semantic vs. Functional Blocks
03:00 - What is an Element?
04:14 - CSS Implementation of Blocks and Elements
04:44 - What is a Modifier?
05:49 - Can I Use a Modifier with an Element?
06:33 - Should I Use a Modifier or Create a New Block?
08:20 - Can a Block Be an Element at the Same Time?
08:59 - Can a Block Be Another Block at the Same Time?
09:50 - Can I Use Utility Classes with BEM?
11:03 - Don't Use Margins on Blocks
12:41 - Don't Nest Classes in CSS
13:23 - Don't Use BEM Entities as Utility Classes
13:53 - Don't Create Elements of Elements
14:22 - Don't Create Blocks with Too Many or Too Few Elements
15:11 - Wrapping Up and Thank You for 100 Subscribers!

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

30 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@KOBE42__ 2 месяца назад

For a new channel, this video was so well done and I’ve saved it for future reference. A lot to take in but I feel like anything, once you do a couple of projects it becomes second nature. Thanks

@dmtrmrv 2 месяца назад

Thank you! Yeah, once it "clicks" you don't have to think about it!

@AJ-vy4yu Месяц назад

This deserves a million view. I had used BEM the wrong way.

@dmtrmrv Месяц назад

Thank you @AJ-vy4yu! Curious what did you do differently?

@AJ-vy4yu Месяц назад

@@dmtrmrv I created elements of elements and blocks with too many elements, to name a few. I had really long-ass class names😆

@valery3149 Месяц назад

Oh my god! I'm looking for this video for a while ! Very very interesting and well explained! I thank you a lot!

@dmtrmrv Месяц назад

Thank you! Glad it was helpful!

@bls512 23 дня назад

Extremely helpful, especially your code pen. I'm curious how you approach a larger project using Utopia. Huge thanks!

@dmtrmrv 18 дней назад

@bls512, thanks! I'm glad you found the CodePen useful. Good question! I honestly think Utopia is just a tool (a great one though). What's important when using it on larger projects is ensuring the team is on the same page about how to use it. And generally, for large projects, clear communication with your team is crucial. This includes having straightforward guidelines, clear commit messages, PR descriptions, good documentation, and keeping everyone updated.

@jclewis33 2 месяца назад

Great video. Very helpful!

@dmtrmrv 2 месяца назад

Thank you. Glad it was helpful!

@VdLifts 2 месяца назад

Great video. Keep it up!

@dmtrmrv 2 месяца назад

Thank you, glad it was helpful!

@Denis091294 2 месяца назад

Great advices for working with BEM. Thank you!

@dmtrmrv 2 месяца назад

Thank you for the kind words, happy that the video was helpful!

@web-atelier 2 месяца назад

Excellent, thanks 👌

@dmtrmrv 2 месяца назад

You are welcome!

@CohenNikesh 2 месяца назад

awesome vid!

@dmtrmrv 2 месяца назад

Glad you enjoyed it

@EvilArtifact 2 месяца назад

Thanks for the video. I’ve been using BEM since 2015 and love it, but videos like this help to get my mind back to the fundamentals that keep my code clean.

@dmtrmrv 2 месяца назад

You are welcome! Glad you found it helpful. I agree, fundamentals are super important!

@as.abdulazeem 2 месяца назад

Thanks, awesome.

@dmtrmrv 2 месяца назад

You are welcome! Thank you for asking about BEM in the first place!

@rogerpence 2 месяца назад

A very good explanation. I am a big fan of CSS nesting and this is the first BEM video I've seen that rationally compares the two. I really like your component-based approach (both to CSS and your video topics) and am gonna work a little hard a BEM in my next project.

@dmtrmrv 2 месяца назад

I'm glad you liked the explanation! I believe there's nothing inherently wrong with nesting; in fact, some methodologies even encourage it. Based on my experience though, both reading and writing styles become easier when nesting is limited and done purposefully and specificity is maintained at the lowest possible level. Feel free to reach out if you have further questions!

@seankennedy7970 2 месяца назад

Great video. Keep it up, I've been a frontend dev for 15 years and have flirted with BEM in work projects but never fully committed - this video has inspried me on my next project

@dmtrmrv 2 месяца назад

Happy to hear that! Yeah, BEM can be a bit tricky and definitely has its downsides (might be a good topic for another video). But I'm still picking it for every new project.

@JuanCastro-C 2 месяца назад

Hi Dmitry, I like the way you explain, great content, thank you. New subscriber here!

@dmtrmrv 2 месяца назад

Hey Juan, thank for the kind words! Welcome aboard!

@hudinigosh7862 2 месяца назад

Thanks for making css video, i really want to learn css. you explain so well please make a css playlist.

@dmtrmrv 2 месяца назад

Thank you for the kind words! Are there any specific topics or concepts within CSS you'd like to see covered?

@EyeIn_The_Sky 13 дней назад

You mention "don't use margins on blocks" fine but did not show us the alternatives. Would it be to use Flexbox or grid spacing properties like Gap etc? Or is there some padding trick?

@dmtrmrv 3 дня назад

@EyeIn_The_Sky Thanks for the question! You are actually not the first one to ask. I see how this part of the video can be a bit confusing. In short, it depends, but you are right. Gap is one of the tools, another is setting the margins using rules like .container > * + * { margin-block-start: Xrem; } which adds margin to all children except the first one. I have a video about exactly that coming in the next few days, so stay tuned!

@anneyo5627 Месяц назад

Never use margins on blocks...but whats then the best practice to create space?

@dmtrmrv Месяц назад

@anneyo5627 That's a great question. Ideally the spacing is created with properties like "gap" or by using the "lobotomized owl" technique. Check out the CodePen: codepen.io/dmtrmrv/pen/vYMEGpx?editors=1100 You can find examples of both: .grid { gap: var(--step-1); } .content-flow > * + * { margin-block-start: var(--step-1); } If that's not enough, we can always use margins on elements, because they aren't reused on their own. ".button" in the same CodePen is a good example. Look at the ".button__icon" element: .button__icon { margin-inline-start: var(--step--5); } All this allows us to reuse components in different contexts without any spacing overrides. Let me know if this answers the question!

@anneyo5627 Месяц назад

Thank you so much! This was helpfull. First time i've heard of the 'lobotomized owl', interesting!

@dmtrmrv Месяц назад

@@anneyo5627 You are welcome! You can read more about it here: alistapart.com/article/axiomatic-css-and-lobotomized-owls/ The article is 10 years old, but it's still relevant. "gap" was not around at the time, but it's still not a full replacement.

@moeinmnia 2 месяца назад

💯

@pareshkamaliya2493 2 месяца назад

Wow today I learned something new. Could you create a beginner-friendly CSS playlist, if possible?

@dmtrmrv 2 месяца назад

Hey Paresh, thank you! Are there any specific aspects of CSS you find challenging to grasp? I'm developing a content plan for the upcoming months, and your feedback would be really helpful.

@pareshkamaliya2493 2 месяца назад

@@dmtrmrv There are good tutorials available on RU-vid, but it's important to understand how much CSS is sufficient and how it's applied in the industry. Essentially, create something that is beginner-friendly yet meets industry-level standards, which puts us a step ahead of others.

@dmtrmrv 2 месяца назад

@@pareshkamaliya2493 Thank you for these ideas. I'll def address this in future videos.

@GameOver-db7wg 4 дня назад

Im confused when we need to create a block and we dont need to because sometime i really dont know if i will reuse this element again or not Second question im still confused about combine between utility class and bem blocks

@dmtrmrv 3 дня назад

@GameOver-db7wg Thank you for the question! I'd be happy to look at your code to provide more specific guidance, but here are my thoughts on creating a block vs. an element. If an element has a distinct role in your interface, it's a candidate for a block. Even if you're unsure about reuse, it's better, in my opinion, to have more blocks than fewer. This approach helps avoid the issue of complex blocks that we discussed towards the end of the video (14:22). Regarding utility classes, .visually-hidden is a great example. In my projects, I also use utility classes like h1, h2, h3 to style other text elements to visually resemble these headings. The key is consistency. Consider how consistent you can be with these classes. Are they truly atomic? Can you keep reusing them effectively? Again, I'm happy to look at your code to give a more detailed answer.

@vincentjacquet2927 2 месяца назад

Nice video. While I think BEM is still useful as methodology, I wonder if its implementation, i.e. the naming convention to keep the specificity at (0,1,0), is still relevant considering that we now have :where() to set the specificity to (0,0,0). What do you think?

@dmtrmrv 2 месяца назад

That's a great question. I tend to use :where() for setting up the default, most common look of elements. And I actually find it quite handy that blocks and elements get this slight increase in specificity-it helps them stand out against the defaults. Sort of sit on top. I'm curious to know how you'd use :where() with/instead of BEM.

@vincentjacquet2927 2 месяца назад

@@dmtrmrvFirst a little disclaimer: I am not a designer, I mainly work on web applications and the styling takes less than 5% of my time. I want the markup to be as simple as possible, so BEM implementation is annoying because I have to set classes everywhere. But I understood that this makes it easy to style a "breadcrumb-item". I am stil experimenting but now I tend to create parametrizable styles. Say I want to build a breadcrumb and the markup I want to have is the one from ARIA APG breadcrumb example. I would set up custom properties on the .breadcrumb "block" class, use :where to rely on the DOM to find the "elements" without increasing the specificity, and apply the styles on them using the custom properties. .breadcrumb > :where(ol) > :where(li + li)::before { padding-inline: var(--breadcrumb-item-padding-x); ... }

@dmtrmrv 2 месяца назад

I see; that's more of a CUBE flavor (cube.fyi/). Another methodology I really like. The downside to writing styles like this is if anything in the DOM moves, the styles will break. However, in the case of components like Breadcrumbs, which have a super standard structure and rarely change, it's perfectly fine to write it even simpler: .breadcrumb li + li::before {}. This is because the likelihood of the breadcrumb component having two lists with two different types of elements is very low. It's also a matter of consistency. If the rest of the project is written in BEM, it's still advisable to add classes; otherwise, it's a perfectly acceptable approach. Glad you brought it up! I like conversations like this!

@gaming_with_raza7867 24 дня назад

I learned html css and js. Now i am learning backend but the point is i cannot make Good looking layout specially i stuck in responsiveness Anyone any Suggestion?

@vertigoz 21 день назад

Nada como CSS do BEM

@patunolaibukun2506 2 месяца назад

where have you been

@MrAbbo11 2 месяца назад

praise the lord for tailwind so i could away from this completely. I know tailwind is probably not suitable for all type of projects, depending on its size. That being said, I'd only ever use BEM if I absolutely had to.

@dmtrmrv 2 месяца назад

Like you said, there's a time and place for everything. Both BEM and the utility-first approach have their drawbacks and advantages. I'm curious if you've come across this article: nuejs.org/blog/tailwind-vs-semantic-css/?