Webflow Class System
Having worked extensively with Webflow over the past three months, my overall experience has been largely positive. I perceive Webflow as a strong contender to WordPress, owing to the remarkable ecosystem it’s cultivating. That being said, I believe there’s room for improvement, particularly when it comes to Webflow’s class system.
Issues with the Current Class System
- The current class system requires every element to have an associated class for styling. This procedure can be time-consuming, particularly in the context of expansive projects comprising a myriad of elements.
- The mutability of class styles, with no option to lock them, raises challenges. Minor adjustments made to the style of a specific element inadvertently impact other elements sharing the same class, often leading to unforeseen results and consistency issues throughout the design.
- The ordered nesting of combo classes makes alterations to a stacking class a daunting task. Consequently, it becomes arduous to modify the hierarchy of nested classes or generate intricate class combinations.
Desired Webflow Styling Features
Inline Styling
In my web development pursuits, I frequently opt for CSS-Module as my CSS solution. While not as glamorous as contemporary JS-in-CSS alternatives, CSS Module enables component-specific styling while also allowing style reuse throughout the project. The benefit is you’re not burdened with mastering new naming conventions or syntax — it’s essentially standard CSS.
For smaller, more informal projects, where there’s often no dedicated designer or a pre-established design system, inline styling — in CSS-Module form — becomes the norm. This practice might not be relevant for larger projects or design agencies, but from my perspective, inline styling is eminently practical. I believe Webflow should consider adopting this as the default behavior when styling an element, unless a class is explicitly assigned.
Global Utility Class
Currently, Webflow doesn’t support the attachment of multiple global classes to an element. Following the first class, the rest are treated as combo classes. Incorporating the ability to append multiple Global Utility classes could pave the way for Webflow’s compatibility with popular CSS libraries like Tailwind. To prevent inadvertent editing of other elements sharing these Global Utility Classes, an explicit edit button would be advantageous. This change could increase efficiency and minimize errors.
My Current Approach
In anticipation of these desired improvements to Webflow, I propose leveraging the BEM system as an interim solution. This system offers a structured approach to naming and organizing classes, promoting consistency and minimizing style conflicts. The Block → Element → Modifier structure is more compatible with Webflow’s existing Global Classes and combo class system.
For a deeper understanding of BEM, I suggest reading this insightful article: Class Naming 101: BEM.
Comments