So awesome! I had the amazing opportunity to make a Webflow article with the help of awesome people! :webflow_heart:
Learn about my process of class naming in Webflow with the most recent blog post of “Class naming 101: BEM”
Hopefully this is helpful 
Cool - been looking out for this!
Hi Ryan (@mistercreate),
great article. I tried to apply your technique within my new project, but I run into some problems with more complex components. As an example below, you can see my code tree for my navigation which has a megamenu dropdown.
Another example would be my brand logo which is also a clickable link.
c-navbar -> c-navbar-brand -> c-navbar-brand__link -> c-navbar-brand__img
Should “c-navbar-brand__img” not be called “c-navbar-brand__link__img” and if so then my CSS names would be abnormaly long or not?
How do you handle some interleaved components like this?
For me it looks like that BEM works with 2 layers (Component → Element), but doesn’t work with 3 layers (Component → Element → Deeper Element).
Yes, you may find yourself creating abnormally long class names with Webflow at times.
Hopefully they add a bit more depth to the class system at some point and model it more on the way CSS is actually written… (with sub classes that work properly and an easier way to organise / delete classes…!)
You can shorten these though. Say c-nav, rather than c-navbar, and use one underscore instead of two. But yeah, technically if you’re using this method then it’s going to be c-nav-brand_link_img, the logic needs to be the same throughout so if someone else is reading or working with your code, they can get straight to it…
You could also abbreviate dropdown to c-nav-dd. Or even the menu to c-nav-m.
It doesn’t really matter how long or short they are, even though the idea of efficient coding is the most done with the least written, as long as it makes sense.
Personally I don’t use BEM. I’d just do it c-nav-menu-wrap, c-nav-menu-link, c-nav-drop, c-nav-drop-link, etc. Unless it was really complex. Why is the C there anyway?
Good to know that I’m not the only one that is facing this problem ^^
Yeah really wish there were a solution already that lets you maintain such things easier in teams.
Ok, that’s for sure a possibility. But now I’m knowing that I don’t misunderstand the conception of BEM ^^
The C stands for a component. According to the article, I had understood that before a component always a C belongs.
I spend some time analyzing the website of webflow and it looks like they are using their own variation of BEM ^^
