BEM Class Naming Convention in Webflow

[@ctrlaltchris]

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

[@iOmediaCoZa]

Thanks Timothy, this video is incredibly helpful, and solves multiple problems I was having.

[@manuelbussmann239]

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

[@Stuartsmith04]

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

[@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

[@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 👍🏻

[@merittthomas]

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

[@XimenaBáezDávalos]

I have the same question: Why 2 underscores?

[@lalucacreative]

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

[@simongustafsson348]

You truly make me a better webflow designer :)

[@bryanmanio_]

Oh nice! Thanks for taking my suggestion!

[@timothyricks]

Thank you for the great idea!

[@karsongrady]

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

[@gabriella2186]

The quality of your 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!

[@bailey6759]

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

[@patshepherd618]

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

[@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

[@dumuniz]

Suuuuper helpful! Thanks Timothy

[@king_m]

Very helpful Timothy.

[@thewebart]

Great tutorial. Thank you very much!

[@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.

[@allenkuntelebi]

Thanks Tim! awesome video 🙏🏽🙏🏽🙏🏽

[@volodymyrsymchuk6762]

This is super helpful! Thank you

[@baron5978]

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

[@adarshgoldar]

Nice tutorial 😊 Keep uploading more videos.

[@bazildesiles]

That is so helpful, thanks a lot ! 🙏

[@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

[@lewistony]

What mic is he using?👀

[@andr3asunshine]

I needed this. Thank you!

[@gibsgibus]

really helpful, thank you !!

[@RichardReynolds]

Really helpful! Thanks Mrs.

[@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

[@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.

[@Sofia-lace]

very helpful, thank you!

[@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!

[@walisonmartinsw]

Thank you!

[@normthomasmarketing]

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

[@timothyricks]

Yes, the c stands for component.

[@alvarobeleza]

Thanks!

[@hal-zeitlin]

DUDE YES

[@РусяРоджер]

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

[@cweb1988]

why two underscores?