The Secret to Webflow Class Naming

Chrome Extension

Join my Webflow Wizards Community

Try Webflow using my affiliate link below.

[malachiatkinson]

This video just blew my mind. How well does this naming convention integrate with MAST and other frameworks?

For example, MAST has custom section classes. Would this method mean I’d create custom section classes (hero_section, services_section, etc) and then apply the global section classes as a utility to each one?

Appreciate the greatness man!

[kylepitocchelli]

Great point about using custom classes on every element to make JS targeting easier and less apt to break.

[austinandriese]

Mindblown Tim. If only I watched this when I first started Webflow. It would've saved me so many headaches.

[Itslogicee]

I love this. I'm odd and actually love using custom classes, but when I started developing with Lumos I assumed classes had to be more generic for wider global editing.

Now using custom classes and stacking utilities makes way more sense. This is awesome.

Especially since I've struggled a bit with some GSAP due to some elements sharing the same class and utilities despite custom attributes. This is awesome 🎉

[svet_design.a]

🎯 Key points for quick navigation:

00:00 *Every Webflow project should utilize Global classes known as utilities for consistency across sections.*
00:14 *Custom classes are named with underscores, indicating their specificity to individual components.*
00:28 *Avoid using combo classes for overrides as it complicates editing and can lead to loss of styling when changing element types.*
01:09 *For effective styling, apply overrides directly to custom classes to maintain flexibility when element types change.*
02:06 *Custom classes ensure unique styles can be managed across breakpoints without affecting Global classes.*
02:48 *All elements should have custom classes, even without applied styles, keeping the global CSS organized and editable.*
03:42 *Custom classes enhance code targeting and prevent accidental global changes, making site styling more controlled.*
04:50 *Overrides should ideally be kept on base custom classes to facilitate easier management when renaming elements.*
05:18 *Custom classes can be specific and organized based on component types, enhancing clarity in the navigator.*
06:27 *A systematic approach to naming and applying classes leads to easier component management and reusability throughout the project.*

Made with HARPA AI

[mikepecha]

I think the u- prefix for utility classes in Lumos is a great idea as well. No additional brainpower required to figure out if a class is a utility class.

[ihor.design]

Something similar to BEM. I worked like this earlier but then realized that it was too long. There are a lot of elements that are absolutely the same and giving them different classes and setting them makes the development process longer. Moreover, the more classes - the longer CSS means slower site speed. But I like your approach of naming a class personally for the element and then using a utility combo class for styling - that will work well.

BTW, thank you for the Chrome Extension, it is really useful!

[Kabarza]

Love it. I’ve been also doing this.
It has a few drawbacks but still worth it.
For example you might end up searching for the blue color in the style name when you are trying to see why something looks different on mobile.
Or if you rename the base global class, it won’t be updated on the stacked ones.

[bertan]

Every time so impressed with your videos - so useful

[solutionresource]

I learn so much from you Timothy! Great video.

[atakann]

Great video! I guess you're sick. Get well soon T!

[CircularElement]

Webflow should have really sorted this shit out by now tbh and have better class management. It’s absolutely essential.

[ShelbyBlissy]

Do you have any tips for managing combo or utility classes in Webflow, especially when you have three or more classes applied? For example, if I want to delete the second class in the stack, is there an easier way to do this without having to remove all the subsequent classes and reapply them?

Also, do you have any suggestions for editing the mobile version of a middle class without affecting the later classes in the stack? I often find myself unintentionally editing the most recent class when I’m trying to modify a class further down.

Lastly, I find it easier to understand when I use separate divs for each styling aspect (like padding, margin, etc.). Do you think this method is poor organization, or is it a reasonable way to work?

[waltorozco]

1. What happens if there are too many classes? Can it affect the website’s performance?
2. What happens if a promotional marketing page is created where the classes are not reused, for example, a Black Friday or Christmas promo? Does Webflow allow creating a new list of CSS classes that aren’t combined with the main CSS stylesheet?

[aronleniger]

Hello Timothy, I know this is a channel for Webflow experts but maybe you could make a YT playlist of the Videos which are suitable for beginners. So that people like me, who just started to learn Webflow are learning the tool correctly from the start. I hope that reaches you ❤❤

[JuliusKrunglevicius]

Is there a drawback in using custom classes AFTER the utility class in a combo? i.e. "u-text-h1 home_hero_title"?

[rickbossenbroek]

Curious to your spacing solution in this one. I can’t imagine you make every space a custom class?