Very useful. I always have question about "create element of element" I thought "wow it will create so many stuffs like"card_header__header-one__header__icon". Today I know it's wrong

Great video!

Большое спасибо, Дмитрий!

This is the best BEM tutorial, covers all the necessary points which most tutorial miss.

Sir I have taken few html and css online courses but I am still terrible at writing code. Could you please show me how to come up with good classes name and utilities class name for element. Or could you please make some real world project for us as beginners please 😢😢😢😢 help a brother

Great Video! I think there is also a CSS Grid Solution for this as well. For the Gutter you could also use the :has selector.

Very interesting video and very clearly explained. Thanks! I am definitely going to use it.

Helpful information thank you

great video I wish you started this with an empty canvas

Thanks for the great tutorial. Will most definitely try it out

Nice video! Thank you!

Great content, Dmitry, loved it! I'll try this one next time.

Thanks for the video, very useful 🇨🇴

Can you link to the video talking about why concatenating with nesting is bad?

I've bought a CSS course on Udemy that has 215k students just to understand BEM. After getting terribly disappointed your video popped my feed by chance and I gotta say, you helped me out a lot. You explained the concept in an easy, understandable way by using simple language and giving tons of examples and also covered problems people might run into by explaining how not to do things - problems you might have had yourself in the past and how you overcame them. That's great teaching by someone who knows (by experience) what he's talking about. Consider creating a course of exceptional quality (things I mentioned above + a project) that covers many advanced CSS topics and putting it on any major course platform (free traffic + in Udemy at least there's a market gap for that niche). People who are trying to advance in their carreer are happy to pay with money instead of time (which they'd have to if they'd learn through their own mistakes or by searching through the whole web for "free" stuff). Additionally, people value things they've paid for more than free stuff. I'd just start with a course that's not too expensive (10-15 bucks) to make it accessible for anyone and bet on mass-market. If it's exceptional (invest a lot of time creating it) and provides tons of value, the market will do the rest of the magic. The help you provide could reach way more people and you'd tons of money (rightfully so) with the value you provide. If you'd be down for it, send me a link to the course after publishing and I'll be your first customer and share it if I like it. 😊

Very good explaination

Thank you finally a good answer !

I was so surprised to hear you say this in your "Learn CSS BEM" video (where I agreed with basically everything 😀). I personally find this style really neat. I just search for the block and never experienced this as a problem at all.

Thanks, man. These tips come from years of experience-something you can't just read about. You definitely deserved a subscribe!

Nice explanations! 👍

Cool video, thanks. I like that you use block__element--modificator-name instead of block__element_modificator_name. I like double dash, it looks better IMHO.

This is some Good Stuff bro! Thanks for the info and keep sharing stuff!

Too much knowledge in just 15 minutes. I watched it for 3 days, once in a day. Every time I watched it, I felt I missed something last time. Great👍

Short, clear and exactly what I wanted. Thank you.

Привіт з України ! Дякую Вам ! Brilliant, thank you, this works perfectly. I've been looking for a tutorial on grids

There is the problem, I don't want to say you are wrong but you are not completely right. First of all, clamping is not gonna work because of varied viewport. Yes, you can't set media query for each type of screen size but that's fine. You can just target few key sizes and keep the font size static for those key sizes. Clamping sounds like it solves the problem but it makes text looks really ugly when fonts don't resize properly w.r.t to other texts such as heading , sub heading, label, body etc. The harmony breaks. I have tried to implement this and it looked really really really ugly. One last thing, You mentioned font size will jump when screen size changes when media queries are used. This assumption is completely wrong. why ? Because most of the users wont be resizing their window, they would be accessing the website/app from a fixed screen size device.

This guy is awesome. The way he explains is clear and concise.

Good job!

Hi, is this also working if you have 2 columns with heading and paragraph which stack on mobile?

i like this video, keep them coming i subed

I use padding or margin with clamps. Pretty simple and great for responsiveness.

Excellent and very well explained tutorial. Thank you for sharing a very useful and efficient approach to creating vertical spacing -- that is consistent and engaging. Please make the source code available on code Codepen.

very insightful. Thank you for the quick tip!

That's an nice evolution of the * + * { margin-top: 1.5em } approach. Also interesting that you use * + .has-medium-flow-space, .has-medium-flow-space + * { margin-block-start: ... } instead of * + .has-medium-flow-space { margin-block: ... }. Do you sort these util classes from large to small so a .has-small-flow-space element following a .has-large-flow-space element overrides the former rule and the two have the smaller margin between them?

Great, very useful and concrete, thank you!!!

> better approach is to create a couple utility classes... Or just use TailwindCSS. Anyway, thanks for the video, I definitely gonna use it.

I like it. It's well thought out and simple to implement. Thank you Dmitry.

Outstanding, simple and finesse

Back to the game 🔥

so helpful thx king 👑

To set overflow-x auto don’t you need to define a width on the ul? Esp since it’s a flex parent ? Or is that further up in the markup ?

Curious if you use use a reset that zerors out margin and padding on everything alongsode setting box-sizing: border-box?

The site-header site__header (and sane w main and Footer) is breaking my brain. Gonna have to peek how each of these classes are styled. Also why not put the gutter on .site? Is it so you can have full width content if you need it?

With all this talk about "create modifier(s) or new block" has me curious what your views are on @container and the complete shade on nesting 😂 makes me wonder what you think about @layer . You couuulllddd put all your defaults in a "default" or "components" layer then any modifications in a "modifier" layer. And then specificity goes out the window.

For the algo! No srlsy thank you bro, didn't know about the &shy thing

Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

I like your videos because you cover up css from developers/tech point of view. And you explain the use cases. I generally feel advanced in this field but a check up is always a good idea. Dig deeper :-) Thanks

Great video, I find your channel a great new resource for staying up-to-date with CSS, along with the likes of Kevin Powell. Keep up the great work Dmitry 👊