Webflow CLASS NAMING strategy (Webflow workflow series 003)

Hi fellow Webflowers, this video is about class naming conventions for Webflow.
In this video, I'll cover class naming basics and ‪@Finsweet‬ class naming system that will make it easy to organize and manage your Webflow website's CSS.
Learn how to use:
- Webflow combo classes,
- Webflow utility classes and
- Webflow global classes
to improve your overall workflow and build quality. I won't only show you how to organize your classes in Webflow, but also how to sort and bulk change them with Finsweet's Browser extension.
###
Get Webflow: webflow.grsm.io/py25k1h77m5i *
Follow me on other platforms:
Twitter: / felix_brodbeck
LinkedIn: / ui-ux-webflow-felix-br...
###
Work with my studio:
www.designbase.studio
#webflow #structure #productivity #consistency #organizationhacks #protips
* affiliate link

[@felixquansah5214]

You're a real gem to the webflow community. Thank you for all you're doing!

[@designbasestudio]

Thanks 🙏 Felix

[@taylorjackson3691]

Thanks for this video. It's clear and straight to the point. So many videos overcomplicate this topic.

[@designbasestudio]

You are welcome! That was my intention 😊

[@GregDolan]

Loving this series, thanks for the great videos 🔥

[@designbasestudio]

Thanks for the support 💪

[@Pavel555]

Deleting and then adding a modifier class is a small price for keeping the code maintainable. Global classes harden the maintenance because, as you mentioned, the client or other developer may change the styling for a global class, and that may cause issues. With modifiers, the styling is sort of more isolated inside of a specific element by the naming convention. Also, you mentioned that BEM may not be the best choice but didn't mention why. I think BEM is a great choice! It's basically the same naming system as the "client first" but doesn't encourage using global utility classes (which is good, in my opinion).

[@Pavel555]

By the way, if using BEM modifiers as prescribed in the BEM documentation, then there wouldn't be a situation with breaking the markup in some other element when editing the modifier's properties. For example, if you have the following classes: some-element some-element--modifier, then the some-element--modifier will be specific for this block only (some-element block), and there wouldn't be a possibility to break some other block on the website.

[@designbasestudio]

Bem is great but in Webflow other systems have more potential

[@SuvuIC]

This was an incredibly helpful, short and concise video!!

[@designbasestudio]

Happy to hear! Stay in the flow ✌️

[@hciniheni9101]

Thank you so much, the narrative style is amazing 👌and always straight to the point.

[@designbasestudio]

You are welcome!

[@brendinventer6407]

You're so helpful thanks mate!

[@designbasestudio]

You're welcome Brendin!

[@JaspervanderKamp]

very helpful ! thx

[@designbasestudio]

You are welcome, again 😉

[@taunado]

Love it. Do you have an ebook for your Webflow guidelines? That'll be gold for quick reference. An email newsletter too to keep up to date with videos. Perhaps a Discord channel to develop a community.

[@designbasestudio]

Coming soon!

[@Zmoorgekaffii158]

What i do not understand is: Imagine we have a utility class d-flex, it only contains display:flex; justify-content:center align-items:center; Now you add a doviv block and give the div block d-flex All okay but now i have a .button and i want to apply the d-flex class so .button .d-flex It wont work because i need to set up a second class d-flex wich is only used by .button This confuses me because i cant make real global utility classes only utility classes wich is used by a specific element... Or is there a way to make a utility class wich can be used to all elements like in my example .div .d-flex and .button d-flex or even .link-block .d-flex? Im not sure if its clear what i mean but if you programming without webflow you can make this freely. In html it would look like this: Css: .d-flex{ Display:flex; Justify-content:center; Align-items:center; } .div { Width:100px; Height:100px; } .button { Width:100px; Height:100px; } .link { Width:100px; Height:100px; }

[@TheMarouuu]

Why do you delete the combo class for mobile? You can just select the base class and then go back. Is there an advantage in deleting that I'm missing?

[@designbasestudio]

If you look carefully it is not always possible to select the base class on smaller breakpoints.

[@TheMarouuu]

@@designbasestudioSet any property on the smaller break points and they'll be avilable for selection later in the combo classes. So basically if it's "button button-primary", set all break points for button, any property will do, and then it will be available. You can even fake it, like just set the same padding from desktop just so the class is available, then change the values later as needed.

[@designbasestudio]

@@TheMarouuu yes but in case you don’t have any properties you need to delete the combo temporarily to make changes to the base. And i would just set fake values just to make the class available in smaller breaktpoints. This blows up your css.

[@TheMarouuu]

@@designbasestudioThat's a fair point.