codeforsanjose/disaster-response-sj

Cleanup Overqualified CSS Selectors for Component CSS Modules

Opened this issue · 0 comments

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.

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