Hey Webflow peeps! I’m writing to let everyone know that soon we’ll be releasing an update to how styling works in the Style Panel.
Currently you have to create a class in order to reveal the styles for that element. Although this workflow may make perfect sense to someone used to writing CSS by hand, this name-first and style-second workflow can be unfamiliar and unintuitive to those new to the web design. As we know, coming up with good class names is hard. It’s even harder when you’re not exactly sure of the structure or design of the thing you’re building. With the update you’ll be able to add styles immediately and worry about naming later.
How it works
When you add an element to the canvas, all your styling options in the Style Panel will be available immediately. At this point you can decide whether to create a new class and then add styles like you currently do, or you can add a style and we’ll generate a class for you based on the element type.
Showing these controls up-front will help in a lot of ways…
Reduces the confusion many first-time users experience when attempting to style an element
Gives all user a new workflow to build layouts and experiments faster and save class naming for later (our recent class renaming improvements make class renaming a lot faster and easier)
Opens up new doors for the Designer to utilize on-canvas controls instead of having all styling happen in the right panels
If you’re comfortable with your existing workflow, you can carry on as usual by either creating or selecting an existing class. Automatic class generation simply opens up a third option that allows you to immediately style an element.
This does make a lot of sense. It alleviates the commitment part of naming, which like you said- it’s hard to name things until you know exactly what it is you are building.
Excellent - the more we can view the underlying css the better. I would vote for a complete reveal with the ability to edit directly. Then, I could paste defaults I have stored elsewhere …
Btw. I would like to place some feature requests for classes here.
Sorting of classes should be alphabetical. How are they sorted actual, by last edited, or last created? This could be a sorting option
Easier editing of classes, especially while having combo classes. At the moment it is necessary to remove the combo class, to get the chance to edit the main class of an element
And last but not least, better overview of classes. While trying to clean up all classes of a project from time to time and especially before launch can get hard to find all elements, which are not longer needed. Why not adding a possiblity to get a list of all elements, linked to a class and jumping to the related page and position of this element.
YESSSSSSS this is amazing! The slowest part of using Webflow for me is having to stop and think about how I want to name all the classes… Much prefer to get about building, and go back and name after the fact. I’ve wanted this FOREVER
You don’t need to remove the combo class. Just click the icon in line with the class field and select the option from the drop down that doesn’t include the combo class.
Yeah we knew there would be this limitation. Ideally editing an element inside rich text would automatically create a class on the Rich Text parent and then nest the selected tag selector in it. That’s something we hope to build out in a separate enhancement. Thanks for the feedback Tim!
