The Secret to Webflow Class Naming

Chrome Extension
chromewebstore...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.i...

[@malachiatkinson4121]

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!

[@timothyricks]

I'm so glad to hear that! This convention works great with any framework. Yes, you would have a "hero_section" with a combo class of "section" on top. It would help a lot with the col classes also. For instance, you wouldn't have to remove the mobile and tablet class if you wanted to change the desktop class.

[@malachiatkinson4121]

@@timothyricks ohh man that’s been such a headache of mine!! I can’t wait to try it out

[@iTubeFF]

@@timothyricks This sounds fantastic! I had the same question about MAST. So are you suggesting something like: hero_section.section and inside of that: hero_container.container, and inside of that: hero_row.row, and inside of that: hero_col.col, and then e.g. hero_col.col.col-md-6 ?

[@timothyricks]

@@iTubeFF Yes, but instead of hero_col, it could be hero_visual & hero_content. They need to have different custom class names if they're going to have different column counts.

[@iTubeFF]

@@timothyricks Your mean like: hero_visual.col.col-lg-8, and hero_content.col.col-lg-4 if I want the image to span 8 columns on desktop, and the text 4 columns?

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

[@austinandriese]

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

[@timothyricks]

I’m so glad this helped, Austin! Thank you for encouraging me to create this video in the first place.

[@kylepitocchelli1738]

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

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

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

[@timothyricks]

That’s awesome! It sounds like you really get the value of custom classes

[@bertan9506]

Every time so impressed with your videos - so 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.

[@timothyricks]

Great points! We can still click the orange label to see which class the style is coming from, but having the blue label would be nice for sure. Renaming a base global class has never been ideal in Webflow even if just two utilities were stacked together without a custom class.

[@Kabarza]

Exactly. You did a phenomenal job putting all that together and explaining it. I’m so confident now that I wasn’t doing it in an odd way 😅

[@timothyricks]

@@Kabarza Thank you! I’ve instinctively known this is the best solution for a while now, but never took time to think of and write out all the reasons until preparing for this video.

[@goldenant9450]

@@timothyricks do you still think this is the best solution? I inevitably find it too much too manage and start creating new classes for everything bc annoyance. My issue is always text & managing breakpoint variations. Between on-dark, on-light, max characters, center-align, left-align; I end up with a massive stack of classes, and sandwiched in the middle is align left but I actually want my text to be centered for mobile in this case. 😵‍💫😵‍💫😵‍💫

[@timothyricks]

@@goldenant9450 Text color and text alignment shouldn't be applied directly to text elements in most cases. Those styles can be applied to the section so that all children text elements receive that color and alignment unless overridden. We can apply mobile overrides to the base custom class if needed. Using a utility for the color and alignment on desktop keeps the site loading faster and is often faster to apply. The Lumos Chrome Extension has a new keyboard shortcut that allows us to quickly style the base custom class on any breakpoint.

[@solutionresource]

I learn so much from you Timothy! Great video.

[@timothyricks]

Thanks so much!

[@MARQGOD]

This is so helpful,thank you so much

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

[@austinandriese]

Tim mentioned that naming the class doesn't add CSS, it only adds it if you make a change outside of using utility classes. Yeah it takes longer to write the class names but I can't imagine it'll be that much more work once we get used to it.

[@atakann]

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

[@timothyricks]

Yes, thank you!

[@garyvoigt321]

Top tier organization!

[@AbelHaddis-h8h]

How did you rename the combo utility class at 03:55 to small-text when it already existed and how did the styles change to the small-text global utility class? When I tried to do that, I get the error already exists

[@timothyricks]

Sometimes Webflow gets stuck and says the class already exists even when it’s not being used as a combo class elsewhere. To fix that, rename your existing combo class to something random and press enter. Then rename that combo class again to "small-text".

[@AbelHaddis-h8h]

@@timothyricks Thank you for the response Tim, and so fast too! Is there any way to prevent Webflow from getting stuck like that or is it just something we have to deal with? Also, the ratio on the cards... mind blowing

[@geoffdawes6529]

Brilliant!

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

[@CircularElement]

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

[@rickbossenbroek]

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

[@timothyricks]

Hi Rick, setting a flex gap on the parent is the best spacing solution when working with components because the space will hide automatically if the client disables the paragraph or any other element in a component instance. If using margin for spacing, there's css that can automatically remove the margin from the last child, but it only works on the published site since Webflow just hides disabled component elements in designer view and doesn't completely remove them yet. If you're trying to replace spacing divs while keeping their spacing classes, the classes could be stacked like this. "hero_heading heading-style-h1 margin-bottom margin-small" Ideally in a case like that though, I'd combine the last two classes into one "margin-bottom-small"

[@JuliusKrunglevicius]

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

[@timothyricks]

Yes, there is. If we need to change the utility to u-text-h2 in the future, any styles applied to home_hero_title will be lost since they only existed when on top the h1 class. Placing the utility first also prevents the class renaming benefits we get from putting utilities on top of a custom class.

[@fpv_jesus]

Convert all projects to lumos. Check.

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

[@timothyricks]

Any classes we create don't add to our website's CSS unless they have styles applied to them. So custom classes with no styles don't affect a website's performance as long as the styles are coming from reusable utilities for things like layout and font sizes. With a strong utility system, it's possible to create new promotional landers like you're mentioning without adding a single extra line to our website's css.

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

[@timothyricks]

Thank you for the great suggestion! Here's a Webflow for Beginners Playlist. kzbin.info/aero/PLoXSZEwtbySuHC7cLr18wi6Z9Byz5EJ6T&si=Kv-DIr1og0K_fGIu

[@aronleniger]

@@timothyricks thx you so much!

[@dhanushrijayakumar4177]

bro why webflow crashes everyyyy 10 minutes