This Webflow Mistake Can Destroy Your Website

Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096
00:04 - Problems With Using Only Utilities
01:37 - Purpose of Utilities
02:03 - The Solution
03:23 - Renaming Utilities
04:25 - Overriding Utilities

[@shaneveldhuizen2094]

I've been building in Webflow for a long time but this has some seriously helpful tips. Make utility classes even more powerful!

[@SocialboutMedia]

When Timothy speaks, I listen.

[@meowzord]

"This Webflow Mistake" ** watches for 2 seconds ** oh i definitely do that

[@timothyricks]

I've done it for years!

[@tadasnever]

Damn, I'm so glad that I've found your video! I was just thinking, how to solve this problem with combo classes. And here you are! Thank you so much for sharing your knowledge 🙌

[@andrzej-zaki]

Thanks for the great tips Timothy. I am learning a lot from you :) My workflow will improve.

[@nhato4644]

love your thumbnails man, haha, every video!

[@timothyricks]

Haha, thank you! That's encouraging to hear

[@qamar7]

This is game changing with any framework we use.

[@MaxWeir]

That’s a great approach and plan to redo a project using this method

[@uialexk]

Great tips! Definitely can relate..

[@ihajo]

Great tip, from now on everything has a main/top blank class

[@timothyricks]

Yay! Glad to hear that!

[@DANNFIGDESIGNS]

Thanks for the POWER-UP!!! It can be ridiculously frustrating to find out you've been styling the wrong class! 😖 This video was so helpful! Thank you...... yet again!

[@timothyricks]

Thank you for the kind words! I’m so glad this helps. Definitely wish I would have learned this sooner

[@goldenant9450]

thank you for this video. I was beginning to feel like the more I use these classing frameworks, the more I began to question their value. I thought it was just me not understanding.

[@timothyricks]

Glad to share it! This approach changed the way I view creating utilities for Webflow. They're default styles that can be overridden. It allows us to attach more styles to a single utility which reduces class stacking and increases their usefulness.

[@blcksgnota]

The Wizard always teaching us tricks 🧙

[@kushdeepsingh2306]

I learn a lot from this short video thank you so much

[@timothyricks]

Oh, awesome! Thank you for watching!

[@eugenesoch]

amazing, Timothy, love this!

[@timothyricks]

Thanks so much!

[@HackedDave]

My classes are a mess, but after almost 6 months building the thing I no longer care, I just want it published!! 🤣

[@otterguyty]

I hear you! My first build took forever to clean up classes. It's the biggest learning curve for webflow, but once you figure out a good system it's much faster.

[@createvans]

Saving our life again!

[@bamoj]

That thumbnail tho 😂❤‍🔥❤‍🔥

[@guillaumescaglia2574]

Great tips indeed, thanks 👍

[@timothyricks]

So glad this helps!

[@jelenajovanovic1472]

Amazing!

[@mikepecha]

The idea of using utility classes as a default styling and then overriding it, is huge. Love it. The only challenge I see, is that when I have 2 or 3 utility classes, with some overrides. Then I remove a utility class, b/c I don't need it anymore on this element. This would also remove the override. How do you deal with this in practice? Has this been an issue for you? Thanks, Mike :)

[@timothyricks]

Thank you! I try to apply overrides to the base class when possible. It still overrides the utility styles since the base class was created after the utilities. Most utilities will never be removed though, only renamed, like .hero_contain.u-container, .footer_subheading.u-text-h6, or .blog_cms_list.u-grid-column-3 for example. Even if a utility did need to be removed, we could rename it to a combo class instead like "is-something". It would keep its overrides and lose its utility styles.

[@mikepecha]

@@timothyricks love it. Thanks, highly appreciate your detailed responses :)

[@jerechocastillo1361]

Do you use a naming convention system? Something like finsweet for example.

[@timothyricks]

Yes, I use one I created called Lumos. lumos.timothyricks.com/

[@filippovaragnolodesign]

Hi Timothy, I thought that wouldn't it be better to use global classes through attributes? What do you think?

[@timothyricks]

Attributes are great for classes that need to be toggled from a component or CMS field, but if we apply all utilities through attributes, we lose the ability to rename that utility class and have it affect every instance of the custom class.

[@user-xz3sh3iy4r]

The webflow bug "class already exists" appears eventhough I remove the last work so the class is new and then add the rest as you said :( Do you have any ideas?

[@timothyricks]

Hi, did you hit enter after removing the last word? If so and it's still showing the error, then the class might actually already exist as a combo class on that element. That happens if we accidentally remove a utility and add a different one instead of renaming the original utility. Clearing unused classes can solve it if the class isn't used anywhere else.

[@ankushmaurya1822]

hey tomothy add key points through the captions so people gonna know about what u gonna talk bout in videos and bit colour grade ur videos just an observation . Been Watching ur videos since few days ankush here i specialize in video editing and have experience with projects similar to yours I'd love to help enhance your videos. I'd appreciate your feedback

[@jdanielortega]

what's the difference between an utility class and a normal class?

[@timothyricks]

Webflow doesn’t treat them differently. When we name something as utility class, we’re telling ourselves that class can be used in any section. When we name a class as a custom class, it usually means we’ll only use it on a certain section type or component type.

[@jdanielortega]

@@timothyricks Gotcha thanks for the explanation, and top-tier advice as always.

[@georgejohnking]

I thought you used lumos only Tim?

[@timothyricks]

I do. 🙂 The latest version of Lumos is setup like this.

[@georgejohnking]

@@timothyricks Oh! I'm out of the lumos loop, last time i checked it was long class names. Exciting to see this new version

[@sachinRao15]

💯☮️

[@mschrimmer631]

Hi Timothy, is there a clear pathway you recommend to study Webflow as a beginner?

[@timothyricks]

Hi, I haven’t created my own pathway yet, but I learned from Webflow University’s 101 Course, and it’s still a great place to learn the basics.

[@mschrimmer631]

@@timothyricks Thanks Timothy!