BEM Class Naming Convention in Webflow

Join my Webflow Wizards Community
/ timothyricks
In this video, we'll cover how to best name our classes and stay organized in Webflow. Checkout the Webflow blog post on BEM at webflow.com/blog/class-naming.... Checkout the BEM website at getbem.com/naming/
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@manuelbussmann239]

Really good content. I like it when people work clean and systematic.

[@ctrlaltchris]

Good lord man, you're the saviour of Webflowers everywhere. I'm going to be organised as heck after this.

[@bailey6759]

Thanks Tim! As usual, so helpful! Keep em coming 😊

[@patshepherd618]

So handy, this is exactly what I was needing to learn. Legend!

[@lalucacreative]

V clearly explained and super helpful. I'm so grateful to have come across your videos - thanks!!

[@karsongrady]

Just amazing content. I have been binging it...please keep it up if it continues to be what you love to do!

[@thewebart]

Great tutorial. Thank you very much!

[@Stuartsmith04]

This is honestly the most helpful video mate thank you. Naming is what’s made finishing my sites so drawn out and painful!

[@Enzocol89]

Wow 🤩 this was super helpful, I’ve been wondering how to structure the class naming for a while. Thank you 🙏 for your great contribution 👍🏻

[@simongustafsson348]

You truly make me a better webflow designer :)

[@dumuniz]

Suuuuper helpful! Thanks Timothy

[@allenkuntelebi]

Thanks Tim! awesome video 🙏🏽🙏🏽🙏🏽

[@gabriella2186]

The quality of your videos 👌🏼👌🏼

[@king_m]

Very helpful Timothy.

[@bryanmanio_]

Oh nice! Thanks for taking my suggestion!

[@timothyricks]

Thank you for the great idea!

[@andr3asunshine]

I needed this. Thank you!

[@RichardReynolds]

Really helpful! Thanks Mrs.

[@volodymyrsymchuk6762]

This is super helpful! Thank you

[@adarshgoldar]

Nice tutorial 😊
Keep uploading more videos.

[@mindfulmagician7550]

Thanks so much for creating this video! I wish I had watched it before this major project that I'm doing. But better late than never!

[@timothyricks]

Glad this is helpful! Hope it can help on your next project!

[@bazildesiles]

That is so helpful, thanks a lot ! 🙏

[@michaelmirchandani9805]

yea thanks for this vid T.Ricks! the biggest problem I have with webflow tutorials is class naming is not often structured or explained, by the end of the lesson its a mess of classes u will nevr remember, this is exactly what I was looking for to help make classes make sense, thanks!! :D

[@Sofia-lace]

very helpful, thank you!

[@gibsgibus]

really helpful, thank you !!

[@yash7630]

Really greattttttt Video... Super helpful....Specially the caps part I didn't know that.
can you breakdown this project in-depth if possible I saw this on webflow showcase it was super cool
love your work

[@Salmansalah90]

So soo good. Thank you!

[@timothyricks]

So glad this helps!

[@tidragos]

great content, thank you!! subscribed!

[@timothyricks]

That’s great to hear! Thank you

[@walisonmartinsw]

Thank you!

[@merittthomas]

Super helpful-thank you! Why two underscores instead of one?

[@user-yi6hf6hf4r]

I have the same question: Why 2 underscores?

[@alvarobeleza]

Thanks!

[@hal-zeitlin]

DUDE YES

[@clickryanG]

Thanks, quick question.... why double underline in some places and a single underline elsewhere...Same with dash - being used twice? Isn’t this just more work, keystrokes that can go wrong?

[@timothyricks]

Great question! That’s the standard with BEM to create visual difference. If you had a class called main-nav__logo-img, it’s easier to see which part is the block and which part is the element if there is more separation. But I definitely recommend using whatever makes most sense to you.

[@normthomas5028]

Is "C" meaning component? ex. c-hero, c-nav. Thanks always!

[@timothyricks]

Yes, the c stands for component.

[@rimoros.1020]

BEM is really good in my opinion, but I do have one question though, what about things that are only used in one page?

[@timothyricks]

Good question! Each component gets a unique name so it's okay if it's only used on one page. We name elements based on the group or section that they're inside of so that the section can be reused easily on other pages or just left on one page.

[@baron5978]

I do this but without the underscores. Why should I use the underscores?

[@Enzocol89]

Does the renaming unlinks or effect the animations already made?

[@timothyricks]

It’s not suppose to! Could back it up before just in case

[@lewistony]

What mic is he using?👀

[@cweb1988]

why two underscores?

[@kevynlevine]

Why two underscores?

[@timothyricks]

That’s the way it’s written on the BEM website. I think it just creates extra separation visually between the block and element. It definitely feels like an extra step though. Wouldn’t mind just using one personally

[@MrFrothunda]

@@timothyricks just read in stackoverflow and this is the reason why "This is done because some people might name their block like this main_nav which will create confusion with single underscore" so if you're naming your block mainnav (together) than using just one underscore is fine.

[@timothyricks]

@@MrFrothunda Ah, that makes so much sense! Great to know!

[@user-xl8nx4hm8i]

using global class for modifier is a mistaken interpretation of original methodology, also it will create more problems. If you're not careful enough and doing some things in global class - that will affect every instance with that modifier and you can notice it too late. I would stick to local combo class for modifiers since they should not contain ambiguous properties.

[@yash7630]

I know webflow is a no code tool but people use custom code integrate webgl/Gsap and make awesome webfite through webflow..I found no major video on youtube regarding this cause people mainly focus on no-code. It would be a great video to make if you can