Some of the components have overqualified CSS selectors. So far I've seen things go 4-5 levels deep i.e.
.container .subcontainer .someblock .someelement input or similar, you get the idea
This is pretty unwieldy and can be especially hard to work around when styling things. It also makes it harder to scale/maintain. We should minimize the levels of qualifying in CSS selectors by reducing it to the bare minimum.
Some of the components have overqualified CSS selectors. So far I've seen things go 4-5 levels deep i.e.
.container .subcontainer .someblock .someelement inputor similar, you get the ideaThis is pretty unwieldy and can be especially hard to work around when styling things. It also makes it harder to scale/maintain. We should minimize the levels of qualifying in CSS selectors by reducing it to the bare minimum.
Alternatively, we could also look into some other solutions for managing the CSS in React: https://blog.bitsrc.io/5-ways-to-style-react-components-in-2019-30f1ccc2b5b