Thank you for this detailed BEM explanation. I would say "Auto-BEM is not a good idea if you don't know how BEM works". Auto BEM is not an autopilot that drives you while you sleep. But speeds up development and does help a lot if you understand the principles of BEM. As always: we need to know our our tools. This video helps knowing BEM better. Thank you.
Exactly. This is what I mean when I say: if you use a software to automatically name your classes, make sure you understand the principles. So you know if the suggested classes are corerct and match your intent. In the same way it would be dangerous to use code from any AI without actually understanding what this code does.
@@OxyPropsThis is very true. The context has to be understood before it is used. Technically, it is not “auto-bem” since manual verification has to be done.
Great explanation. Watched the whole video just to hear your accent :) I think a comment below clarified. I think your video title doesn't match your intent. Auto-BEM is a great productivity feature, as long as you understand what you want it to do, and set up the Element labels properly first. I agree that expecting Auto-BEM to do the thinking for you is a bad idea :) Recently, Advanced Themer enhanced their Auto-BEM feature by enabling you to set an Element as a BEM root. That way you can prevent creation of erroneous classes on nested BEM structures. For me, that made it way more useful.
Thanks Cedric, firstly, you've explained someting in bricks that I didn't realise, that being the %root% isn't just for elements, but can be used to address a CSS class, I didn't know that, and I can see tha automatic BEM naming might cause problems. However, I'm not sure if the example you gave is a use case that might come up that often! Certailny, as a Quality of Life use case, automatically renaming classes to match the structure would probably help most people, but I can see your objection. Maybe something that 'reviews' the naming convention a developer is using or highlights possible bad practise would be better, but this sounds more like an AI type process rather than just a naming hierarchy tha I imagine these auto naming/renaming tools are.
Hello @mikt This is a very important point. .link--underline is a modifier to the link block. I made the decision that any of my links could be underlined, so the modifier is one of the link block. In my design choice, only menu links can be highlighted, therefore .menu__link--highlighted is a modifier to the menu__link element. There is no right or wrong here. The decision will be driven by your design and the way you want to manage your components.
Thank you for this detailed BEM explanation. I would say "Auto-BEM is not a good idea if you don't know how BEM works". Auto BEM is not an autopilot that drives you while you sleep. But speeds up development and does help a lot if you understand the principles of BEM. As always: we need to know our our tools. This video helps knowing BEM better. Thank you.
Exactly. This is what I mean when I say: if you use a software to automatically name your classes, make sure you understand the principles. So you know if the suggested classes are corerct and match your intent. In the same way it would be dangerous to use code from any AI without actually understanding what this code does.
@@OxyPropsThis is very true. The context has to be understood before it is used. Technically, it is not “auto-bem” since manual verification has to be done.
glad you are healthy and creating videos my friend.
Thanks for your kind words.
Great explanation. Watched the whole video just to hear your accent :)
I think a comment below clarified. I think your video title doesn't match your intent.
Auto-BEM is a great productivity feature, as long as you understand what you want it to do, and set up the Element labels properly first. I agree that expecting Auto-BEM to do the thinking for you is a bad idea :)
Recently, Advanced Themer enhanced their Auto-BEM feature by enabling you to set an Element as a BEM root. That way you can prevent creation of erroneous classes on nested BEM structures. For me, that made it way more useful.
Thanks Cedric, firstly, you've explained someting in bricks that I didn't realise, that being the %root% isn't just for elements, but can be used to address a CSS class, I didn't know that, and I can see tha automatic BEM naming might cause problems. However, I'm not sure if the example you gave is a use case that might come up that often!
Certailny, as a Quality of Life use case, automatically renaming classes to match the structure would probably help most people, but I can see your objection. Maybe something that 'reviews' the naming convention a developer is using or highlights possible bad practise would be better, but this sounds more like an AI type process rather than just a naming hierarchy tha I imagine these auto naming/renaming tools are.
Amazing BEM class!!! Thank you, Cedric!!
Thanks. I am happy you liked it.
Thank you, Cédric.
My pleasure.
Very Useful, Thank you.
Thanks!
Thank you, very interesting
Excellent 👍 😀 thanks.
Thanks for your comment.
Thanks for the video, i failed to understand why .link--underline is not menu__link--underline where highligted is.
Hello @mikt
This is a very important point.
.link--underline is a modifier to the link block. I made the decision that any of my links could be underlined, so the modifier is one of the link block.
In my design choice, only menu links can be highlighted, therefore .menu__link--highlighted is a modifier to the menu__link element.
There is no right or wrong here. The decision will be driven by your design and the way you want to manage your components.
@@OxyProps Thanks - now i understood :)