Webflow vs. OOCSS

Webflow and the #nocode movement rubbed me the wrong way when I first heard of them. There are few things I enjoy more than writing HTML and CSS, and the idea of exchanging that for a mouse-heavy UI seems bonkers. It only took a couple hours on the platform (and the hyper-informative / hysterical training videos (I did a spit take on this one at “delete the project”)) to have a change of heart. Within a month of casual weekly use I was not only able to ship a site in a day, but I was able to build sites WAY faster and with fewer bugs than coding from scratch (scratch being key, this is more comparable to starting with a solid tested boilerplate with #yescode).

Simply put: the Webflow platform has a lot to offer, and is worth and front-end/UX developer’s serious attention and consideration.

No platform is perfect, and as I often like to say even the most awesome things must have a least-awesome aspect. In my opinion Webflow’s UI doesn’t lend itself to OOCSS; by default it lends itself to more of a component-based styling which will lead to more CSS. In its defence though the resulting site is always very fast – you are more likely to pay for this with developer time in maintenance than performance.

I made a video demo below showing some of these friction points (deliberately not calling this a “pain point” or a flaw, this is probably edge-case). When giving elements multiple classes (a hallmark of object-oriented modular abstraction) it’s hard to change classes, or style without conflating styles (I love the word conflate, but it is a bit uncommon: To combine into one whole, (two variant texts, for example). Conflating styles with a more specific selector is an intended (and probably necessary) feature of how Webflow works.

My OOCSS wish list:

• it would be nice to have “remove class” functionality from a style submenu (like in the above screenshot UI).
• if there was an object-oriented-mode (maybe a session toggle in the Style panel) then there would be the option to add multiple classes without the mouse. Currently typing a class-name and hitting enter blurs/unscopes the style-selector input, I want to be able to type multiple classes and hit enter multiple times. I think having a session-toggle for this functionality would be best for users who probably prefer the way it is now.
• I don’t see how the UI could avoid conflated styles without some kind of awkward prompting, so I’m not sure that’s actually feasible. Pre-building a template with all the abstractions already existing is a great way to avoid that; it’s only when “building the lego set on the fly” that I run into issues.

I don’t like to air my grievances with products – and I hope my reader’s main takeaway is that I love Webflow, and even with features that push against my style approach I’m able to be highly productive and efficient.

The main reason I’m sharing this on my blog is that in addition to a fantastic platform the Webflow team really listens, and I wanted to clearly explain my edge-case issue! Hey team, thanks for all the pixels.

Categorized in: Personal

This post was written by ArleyM