Basic Webflow question here about style overrides:
I have my style guide (originally from Relume/client-first if I recall so I am counting this š ) and there are weird thing like font-weight classes and sizes that donāt always work.
Two specific issues:
text-weight-bold does not change my font weight, despite appearing fine in the style guide, and also changed some of my font colors. So if I have text-color-whiteand then apply text-weight-bold, it changes the color. This boggling my mind.Hey, apologies I have been so busy I couldnāt get back to this. Yea I could really use some help sorting out this class inheritance issue. Just a minute here.
Yea I was looking at the inherited classes but I am not quite sure what is actually happening when I am clicking up and down that list.
A good example is this page:
https://ba.foreflight.com/solutions/trip-support
If you click āGet Startedā in the hero, you will get a form modal. The labels are inheriting a font-size from āpadding-section-largeā. I am not understanding how to fix this though. I can click the āreset: button on that class, but itās too unpredictable what will happen. Next thing I know, I switch pages, all my font sizes have changed, and not thereās no way to revert.
On several instances, it appears you have modified utility classes - which you'll generally want to avoid. It also looks like you are using the CF style guide - version 2. So in the Webflow Library as well as the chrome extension, you'll want to set your preferences to be using the Finsweet Style Guide v2 (last option. Because you dont have this preference set, it appears that somehow variables have been included or created, and then deleted, so you'll need to reset these values.
Most of my screenshots are pointing out what is wrong or should be reset basically.
The reason you are having some of these things happen is because of this concept of combo classes in webflow - I would read up a bit about them here: https://university.webflow.com/lesson/web-styling-using-classes?topics=layout-design#how-to-create-a-combo-class
Once you get some of these utility classes cleaned up, let me know if that resolves your issues and if not, we can keep going on troubleshooting - happy to help!
Ok yea I only recently discovered the reset button. - thatās why I was so confused. I was like why would this force me to have styles attached here.
We also have 3 designers jumping in and out lol and all still getting use to the platform.
This is a big help though. I think this will help us clear up a lot of the issue.
Webflow should be paying you š
ha all good, if you run into any other snags don't bang your head on the desk for too long, just pop in here!
Nice work
Is it fair to say that every class should style one thing?
Example: add padding, centre text, colour text, etc. if you want to apply two thing types of styles (colour and alignment) then use two different classes.
And for the most part those classes are already defined for you.
Yea I agree with this it -seems- to get convoluted if you accidentally add a style when you have something with two classes applied. Weird stuff like that.
yeah that is one way. But per Client-First strategies, we should avoid "deep stacking" which is this idea of having more than 3 combo classes. If I have that many combo classes on a single element, I use the "Merge Combo Classes" feature of the Finsweet extension to create my own custom class and it grabs all the properties of those combo classes for me which is very handy.
For instance, if I have an h1 heading in a hero section - and I've got say, text-color-white, text-weight-bold, heading-style-h2 on it - I'll just use the merge combo classes feature to turn those combo classes into hero_header-title