Implementing utility first css approach in webflow?

I think we can either take minimalist approach to nesting or try to keep our classes manageable. I wonder what’s the least of two evils here?

when it comes to webflow that is the million dollar question for me and why i haven’t really fully implemented a utility first approach…lol…i want both.

i think with css frameworks like tailwind and tachyon you can have both.

well… aside from losing the whole Webflow thing :frowning:

1 Like

lol exactly…and why i just suck it up and use combo classes and dream about utility first css in webflow lol

Indeed, that’s what I meant! :rofl:

What if the solution was not utility classes, but “design tokens”. Presets of arbitrary values (based on a config file) you can choose from.

Just like you can have colour swatches, what if we could pick spacing values from a dropdown list, pick box shadows from a list, etc?

Also, I can’t imagine how messy applying combo classes with “responsive” behaviour would end up. Do you literally create a md:mt-0 class to target medium and up screens? Hah and webflow seems to be mobile last - as in small device styles override desktop instead of the other way around.

There are definitely a bunch of challenges here.

BTW it is such a testament to utility-first CSS that we legitimately think we could be faster / more productive / consistent with utility classes rather than a GUI design tool… Having both would be so amazing!

Also, if people wonder why some of us are obsessed with utility-first CSS… I did a talk on my journey from BEM to utility-first CSS last year, you might find it interesting!

3 Likes

If you have an ongoing webflow project with Utility-First CSS approach, could you please share the read-only link with me so that I can learn more, if its not too much to ask for?

lol i don’t. that’s why i made the thread. i was trying to find someone who has.

1 Like

yup…here is an example of how tailwind implements it: https://tailwindcss.com/docs/responsive-design

awesome!!! i’m going to check your talk out. thanks for posting it.

Actually there is one huge caveat to this whole system due to Webflow feature that I forgot about. Here is my topic on the matter. I am not sure I agree with this implementation but that’s how it is currently :frowning:

This means you will have to be absolutely sure your naming convention is correct from the start

for those of you looking to build out a system with utility classes, i came across this excellent resource for creating them in webflow. the whole series is excellent as well.

https://www.edgarallan.com/courses/webflow-for-teams/utility-classes

6 Likes

Now, I was really looking forward to implementing a Utility-First approach and was ready to build a page that has a list of all common utility/global-classes which I could use. But then, I just came across these on webflow university:

We do not recommend using global classes as combo classes as there can be inheritance issues that can break your design across your project.

^ Why not? Is it because of a technical issue?

But, it’s not recommended to create more than one combo class since it gets hard to manage the inheritance of multiple levels of combo classes.

^ Again, why not? Isn’t this exactly how a Utility-First approach works?

If you see yourself wanting to make even deeper variations it’s best to duplicate a class which creates a new separate class with all the stylings of the original class

^ Is this webflow’s recommended alternate way?

Link: https://university.webflow.com/article/combo-classes

I spent some time playing around with building out a design system based around the tailwind css utility classes. I never fully finished it but decided to make it cloneable a few days ago. Figured I’d post it in this thread in case anyone wants to take it for spin, finish it up, remix it, etc.

I’m still holding out for whenever we have better control over global classes to really build out my system and use it in production. I think with the recent changes in symbols and the upcoming ones are setting the stage for future development in this area.

1 Like

The one set of classes I found to be extremely useful is a set of margins on all sides with modifiers of huge/large/normal/small/tiny and set sizes. This is one the most often used classes that I add all the time to all the elements. That and robust grid system are a must.

1 Like

Thought I would share this. I have a never ending project that is supposed to be a framework/startup for most of my projects. Feel free to clone or do whatever you want with it. For me it’s very useful, especially the grid and all sets of padding and margin (nearly finished). https://webflow.com/website/Real-Estate-Framework

2 Likes

A work of titanic proportions, haha

Funny you mentioned that. I was actually just reading an article today that dug into some of the coding practices for facebook. One part of it showed how facebook is using vertical spacers instead of margins. I use horizontal spacers instead of margins often but hadn’t built out vertical ones. I think I am going to explore adding them to my system.

There was another similar article floating around last week about not using margin for spacing as well. Basically the idea is to encapsulate the spacing inside of components so that they do not affect other components when placed on a page.

Here is the facebook article in case you are interested.
It is the second section " The Use Of Spacer Divs Instead Of Margin"

https://ishadeed.com/article/new-facebook-css/

2 Likes

Cool! Thanks for that! I always love me some new techniques to try that would completely change my regular workflow, haha

1 Like