I had a thought today on a personal HTML/CSS project about how to style a light button in a dark container, and how to style a dark button in a light container.
Should I use CSS inheritance to make the button the appropriate colour in each area? That makes sense right? It means I can write HTML not really caring about the styles, and let the CSS do the rest.
But then I worried about what happens if I use the button elsewhere, out of the container. If the coloured container provides the styles, I’ll need at least some base styles on the button. And which one should be the default? Light on dark, or dark on light?
Let’s say light container is the default, so the button by default is dark.
What about then when we want the button on a different coloured background, maybe a red container inside the dark container. We’d have to override the button’s default styles to make it dark on light, then override these again to show as [I dunno, yellow?] on the red background.
I know the “C” in CSS stands for cascade, but this can get out of hand!
There’s a good article about this I found today, which has this great line that I need to repeat over and over.
…your styles will be more flexible and less prone to breaking if you avoid relying on location inheritance.
Read the rest of the article here. It takes you through a good use case of how inheritance can cause problems. It also talks about how “multiple inheritance” can also get out of hand, and solves it with SASS extends, although I prefer more of a BEM approach, but the idea of being very specific about your styles is the same.