When I add a css class and then add another css class on top of it, the resulting css rule in the code is a compound rule. Most of the time this is fine, but there are times I need the two rules to be separate. Please expand on the css layering, by giving us granular options for creating single-classĀ or compound rules, and maybe even some complex bitsĀ like parent/sibling selectors, or ":" suffix rules.
Mainly, if I've got two elements, and one's got classes A->B->D whileĀ the other's got classes A->C->D, I don't want to have to define D twice, like I do now.
Brendan Keyworth
Hi all - jumping in with an update here. While weāre not planning specifically to build support for these types of CSS targeting rules, we do have plans to build a lot more power into symbols that will enable you to create more reusable, manageable component-based design systems. Will share more updates on that as we have them!
5
34
3
8
7
0
0
0
.svg){kind=logo}
Try my plugin called WindFlow!
Use utility-based classes without compound rules. Use parent/sibling selectors and and elements like before/after using Tailwind classname rules https://tailwindcss.com/docs/hover-focus-and-other-states
WindFlow enables Tailwind classnames on your elements.
Install now https://webflow.com/apps/detail/windflow
Attachments Open full size
thanks for sharing...
Attachments Open full size
How would you not support these? This is clearly an important, widely used feature of CSS. Please add!
Attachments Open full size
I love the 'custom properties' update, but no support for :after! I want to be able to add extending borders on cms items and target the last child! IMPOSSIBLE. Custom CSS still the best way to go in 2024 :)
Attachments Open full size
+1
Attachments Open full size
Webflow class system is a nightmare for perfectionists, which is supposedly its target audience. Please do something, Webflow is not above other websites builders for nothing. Don't oversimplify.
Attachments Open full size
This limitation is a real drag. I love Webflow, but not having this capability when it's such a basic thing in CSS is tough. I recognize that it's probably neither here nor there for people who do not know how to write HTML or CSS, but this feels like a downgrade whenever I build a site. Can you please reconsider on this?
Attachments Open full size
Another idea that obviously EVERYONE wants and is ignored by webflow for 6 years. If I was running this company I would make the first two pages of the wishboard mandatory projects for the product team. Embarrassing.
Attachments Open full size
For developers coming into Webflow, the lack of really basic css selector control is a huge turn off. If you want more adoption, at some point you're going to have to open up the platform to modern css. I think this would be a hell of a lot more useful for developers than a React integration :)
Attachments Open full size
Yes please, the current combo classes are kinda getting less useful the more you actually try to use them.
Attachments Open full size
The lack of this feature makes every Webflow project so needlessly more bloated and messy to work with. Fundamental CSS logic missing, for what it seams no reason at all.... Love the way you describe this Brendan, even though the fact that you wrote this has been 6 years ago...
Attachments Open full size
sometimes I'd like to just say Go that thing yourself, just a few world class developer away to graphql your entire infastructure while you go keep hiring new dmos cmos ufos. ...you realize at your pace webflow will never run parallel with the cutting edge? nvm, all the 2603 voters from 2017 to present... all are doing fine, just that weird taste you've left us thinking the love was mutual.
Attachments Open full size
This please, I know I'm making SUCH a mess with CSS classes because of how Webflow handles it by default š©
Attachments Open full size
Adding my vote. Symbols have nothing to do with this---I want to be able to target all elements of a specific kind inside a given class. The fact this functionality already exists within Webflow (as noted below by Michael David) but can only be used if you hack around it is nothing short of bizarre.
Reposting the link Michael shared below for visibility:
https://forum.webflow.com/t/how-to-define-css-descendant-selectors-in-webflow/135561
Attachments Open full size
Please give us the ability to more easily manage and work with our css. This has nothing to do with symbols so the admin response is not applicable. We need the ability to be able to convert combo classes into a new singular class, and the ability to use more global classes. I like the combo class idea but it is running wild and needs to be tamed LOL.
Attachments Open full size
In CSS, pattern matching rules determine which style rules apply to elements in the ... CSS gives so much power to the "class" attribute, that authors could
Attachments Open full size
the column combinator; the :drop() pseudo-class ... querySelectorAll() function defined in [DOM] or the selector of a CSS style rule.
Attachments Open full size
What is with the Admin Response?
Did anybody ask for more power in symbols? I never use symbols, they have no use on small projects. But the basics of how CSS works I use in Every Single project.
Attachments Open full size
Pleeassse Webflow, give us this! I'm still getting used to Webflow and have some SCSS knowledge, and the combo classes make no sense. Sometimes I search for several minutes just to figure out the inheritance, meanwhile if I had a global class, it would be so easy to edit. Symbols don't help on this part because there's still so so many classes. Improvements are definitely needed!
Attachments Open full size
I'm disappointed by this response. The inheritance dropdown that let's you switch between combo classes and device rules is like... 95% of the functionality here...
Why not just let us select the specific class in this dropdown?
In my screenshot I've got a Column class and a combo class for a Column with padding. If I could just select the Padding class in this dropdown I would literally have a utility class I could use everywhere for even padding without even thinking about it. It would speed us up so much.
Attachments Open full size