I see this quite often in CSS: something doesn't look right, so we apply some new styles on our class to make it look right.
Instead we need to review what the current styles are, and where they come from – another class (composition) or inheritance. If you’re changing the font-family
style, for example, you should have a look to see what might be currently setting that property in the styles pane, and identify how it’s cascading to this element. It may be that you can remove it from a parent element, or you might need to override it with a class. Without reviewing the code is this way, you CSS codebase can easily become bloated with style overrides.
Chrome DevTools makes reviewing the cascade very easy with its styles pane. However, when you look at some CSS code in your IDE, it’s not at all explicit what styles will be inherited or applied through composition. This means we have to have strong discipline in documenting our CSS – where you’re unsetting or resetting a style that is inherited, you might le