What's a good way of handling specific styling for components?
Let's say I have a basic slider component that displays a slider.
Let's say on page A I want the slider to have some type of margin-bottom because there're other components underneath of it.
Page B I don't want it to have any margin because it's isolated on its own.
What's a good way of handling this? I have a page builder module within a CMS where I'm adding these generic components to but some of them need padding / margin / some other css property while others don't.
I don't think it makes sense to add variants to these components as realistically, the properties needed could be anything based off what other components are on the page layout or based off a specific need for that page layout. I would also like to avoid setting page overrides as that doesn't seem to make a whole lot of sense either to me in a component-based page building system.
Am I overthinking it or is there a better way? I've always struggled with this
10 Replies
#depends you could go as simple as a mb-10 util class
TW š§ it
Lol honestly that's not a bad idea, idk why I didn't think of that
If you want variations of it you can also use [data-attribute="value"] variants
[data-slider="padded"]
ohhhh dang I never thought about doing variants like that!
š
I would always just make another class for them lol
I freaking love attribute selectors
Opens up A LOT of styling power based on key:values
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Side note I forgot you could do those like regex expressions in data attrs š
ty tho b1! you gave me something to chew on
i.e. is just one level
any attribute xD
I also remember now that you're suggesting this that the one large codebase that I work with uses them all the time for styling components