BEM Class Naming Convention in Webflow

[@iOmediaCoZa]

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

[@ctrlaltchris]

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

[@Stuartsmith04]

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

[@manuelbussmann239]

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

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

[@bryanmanio_]

Oh nice! Thanks for taking my suggestion!

[@timothyricks]

Thank you for the great idea!

[@lalucacreative]

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

[@merittthomas]

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

[@XimenaBáezDávalos]

I have the same question: Why 2 underscores?

[@gabriella2186]

The quality of your videos 👌🏼👌🏼

[@simongustafsson348]

You truly make me a better webflow designer :)

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

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

[@karsongrady]

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

[@dumuniz]

Suuuuper helpful! Thanks Timothy

[@thewebart]

Great tutorial. Thank you very much!

[@bailey6759]

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

[@patshepherd618]

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

[@volodymyrsymchuk6762]

This is super helpful! Thank you

[@king_m]

Very helpful Timothy.

[@allenkuntelebi]

Thanks Tim! awesome video 🙏🏽🙏🏽🙏🏽

[@adarshgoldar]

Nice tutorial 😊 Keep uploading more videos.

[@Salmansalah90]

So soo good. Thank you!

[@timothyricks]

So glad this helps!

[@gibsgibus]

really helpful, thank you !!

[@bazildesiles]

That is so helpful, thanks a lot ! 🙏

[@tidragos]

great content, thank you!! subscribed!

[@timothyricks]

That’s great to hear! Thank you

[@Sofia-lace]

very helpful, thank you!

[@walisonmartinsw]

Thank you!

[@RichardReynolds]

Really helpful! Thanks Mrs.

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

[@alvarobeleza]

Thanks!

[@andr3asunshine]

I needed this. Thank you!

[@hal-zeitlin]

DUDE YES

[@baron5978]

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

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

[@lewistony]

What mic is he using?👀

[@normthomasmarketing]

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

[@timothyricks]

Yes, the c stands for component.

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

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

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

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?