I’ve been using webflow for about a week and I love it, but here is the problem I am having:
I have a div block with 3 unique classes [ 1, 2, and 3 ]. I would really like to style each of those classes individually, without styling any sort of combo class. That doesn’t seem to be so straightforward to do. I can select the first class [ 1 ] that I added, I can select a combo of the first and second [ 1, 2 ], and I can select a combo of the first, second, and third [ 1, 2, 3 ]. I would really like to be able make style changes ONLY to class [ 3 ]. To do that now, it seems like I would have to remove classes [ 1, and 2 ] from the selector, make my style changes, and then add those classes back. That’s unacceptable.
It may be the case that this is just part of webflow’s design, and that’s fine. My question then would be, does anybody have any recommendations for css stylesheet methodologies that are well suited for webflow? I’m sort of new to front-end web development, and I want to implement some sort of methodology so that my css, and html are well structured. I was attempting to use BEM, but that may not work because of that problem I’m asking about.
Just click on the button to the right of the classes:
And then select your class 3, without changing the other ones
For example, I want to edit all my Heading 3 type of font to Roboto, that’s why I selected Heading 3
The other combo class will only add it a different colour to the text
Thanks for the reply! But what if I wished to change the hex value of ‘Black’? It seems like doing so will tie that style change to the ‘Heading-3 Black’ combo class.
Of course I could work around this on such a simple example, but as things get more complicated, it would be nice to be able to just select ‘Black’ to edit.
You won’t be able to just edit “black” because it’s “parent” is the heading.
My Heading-3 (and normally all headings) only have the type of font and size that I want to use set:
Roboto 12pt
Now the “black” only changes the colour to black, so if I make any changes to the Heading (for example change the size), all the other heading-3 will change size… but they’ll keep black/white/red colour
Gotcha. Thanks for taking the time to help! I totally get it. I guess I was trying to avoid these parent-child relationships as I wouldn’t normally structure CSS like that. I think it will just take some new ways of thinking in order to work within these rules of Webflow.
