Implementing utility first css approach in webflow?

has anyone here successfully implemented utility first css class convention in webflow?

  • any tips on the initial set up?
  • which utility classes did you include?
  • what obstacles did you face while building your site?
  • would you take this approach again?
  • could you share a url to the site?

I started doing it this way even before I stumbled upon the description of this approach. It speaks for it being a logical way to go, at least for me. I am still working out the possible kinks, figuring out the best system.

What I usually do is set up all my margins and paddings (calling them huge, large, normal, small, and tiny - I can change their values as necessary during production), create a few font sizes (large, normal (this is basically a default p size that can be used for headings for example), small, and tiny), create font colour variants based on the palette for the site I am building, create centering classes (both flex center and text center), create variations of common flex options (alignments, vertical or horizontal, etc), create a couple of different grids if necessary and so on. I do not have a set rules (yet!) so a lot of utility stuff is just added as I go. I am too lazy to sit and create a truly complete system that I could reuse in all my projects but it is necessary and I will certainly work on that in the nearest future.

Obstacles are the fact that you cannot quickly change your elements styles - you need to remove some utility classes from an element, and if you have a number of similar objects with several utility classes and you need to get rid of one from all of them… yeah, not fun.

I would absolutely take this approach again - it can be adjusted from slightly utility-based if your interface is not too complex to 100% utility-based if you need a super-modular structure.

I created my own portfolio site in such a way (but due to its relative simplicity not many utility classes were necessary) and also this delivery service site some time ago which was a bit chaotic in utility rules implementation since I was going back and forth deciding how to do it, and then just finished it and left some inconsistencies as is (this was supposed to be just a prototype anyway). Also all ongoing projects I work on right now share this approach. Can’t link those just yet.

4 Likes

thanks so much for the reply!

your approach is exactly how i figured it would need to be implemented. it is definitely something where the upfront set up is time consuming but necessary in the long run.

i haven’t implemented a full system yet but have used it for my typography and buttons for the latest project i am working on. the key was setting it up from the beginning. the area it would be most beneficial for me is text-alignment, spacing and visibility but i didn’t set it up at the start of the project so i’ve scratched every implementation i’ve tried along the way. everytime i create a new style just to do one of these for an element, i’m like dang it lol

for the few elements that i have this set up, i’ve run into the issue that you mentioned of needing to delete all classes just to make a change. but i knew that was going to be a pain from the start. really wish there was a way to choose a specific class to delete but we can’t have everything lol

i also would love to be able to build my grid with this approach but i think it would probably be more trouble than it is worth in the long run. not sure. but i think i may try it for the next landing page i build.

it would be really awesome to set up a tailwind css like implementation in webflow. that would be the holy grail for me. i hate naming so much lol so utility first is definitely my cup of tea lol

1 Like

Big fan of utility-first CSS here, and brand new to webflow. After a bit of tinkering around, it sounds like it’s totally possible to set up utility classes for everything, but it would be a major point to create and apply throughout all elements.

Finding this thread made me happy though - good to see people are considering (and implementing) it!

1 Like

I’ve tried to implement Utility-first CSS but it gets so confusing as I go further into the build.

So how many combo classes do you end up with, on an average, for an element?

for the few elements that i implemented this approach for (like buttons), i typically can have up to about 6 classes or so when there are a lot of modifications. for instance, i may have something like this for a button:

button .button--p2 .button--ghost .button--large .donateHero__button

i end up using the last combo class to do all of the spacing / alignment changes (all though i would love to be able to use utility classes for that too).

for non-utility first approach i try to keep it to 3 or less.

:open_mouth: I’ve always tried to keep combo classes to a minimum. Like 1 class and 2-3 combos is what an element has at max. Maybe I’m doing it wrong?

1 Like

a bunch of classes with each having only one function is the gist of utility first…so you are bound to have a bunch when implementing this approach. some folks don’t like this approach because it reminds them of how we used to write inline styles for html but i’m a fan.

for non-utility approach, what you do is exactly what i typically do. one class for the majority of the styling that can apply across components and 2-3 combo classes for modifications.

1 Like

lol i’m assuming autocorrect got you and you meant major pain…and yup…pretty much.

1 Like

Actually to make things a bit easier you can just nest a couple of divs, parent would take care of, say, margins, and your child - button - will only have classes that would modify its look (main button class, size, importance)

2 Likes

ahhhhh…i get what you are saying and it makes perfect sense…but at the same time the clean coder in me lol wouldn’t want a bunch of unnecessary html markup.

There is nothing wrong with nesting though :wink: Just keep it readable and you are golden

i already nest & use sections, containers, wrappers for padding / margin but maybe i was misinterpreting what you were suggesting. if this is what you meant, then true this is pretty common coding practice.

Yep, that’s what I meant :smiley:

1 Like

I’ve tried to implement Utility-first CSS but it gets so confusing as I go further into the build then i tried free dxf viewer and it worked for me.

So how many combo classes do you end up with, on an average, for an element?

got it. i thought you were saying to for example, wrap a single button in an extra div with global class that gives it margin-right: 8px if i needed to add right margin and then reuse that div anytime i need the same amount of right margin on anything. where instead with the utility first approach i would love to be able to just use a mr-8 utility first class on the button itself.

Well, to be honest you can do this as well, why not?

imo that creates unnecessary markup and i’m sure would probably be a nightmare for screen readers. i don’t know, i’ve always followed the principle of only adding markup when absolutely necessary and adding a bunch of divs for presentation purposes only and not structure just seems like it would lead to unnecessary code bloat.

Sometimes you need to add another wrapper not for structuring purposes but for interactions, for example, when it is necessary to have two different objects for two triggers that target the same property but need to work independently but influence the same part of the page visually. So no escaping nesting anyway.

i’m not talking about escaping nesting. i’m talking about taking a minimalist approach to nesting.