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 leave a comment such as “Unset from .foo”. There are also other implicit dependencies in CSS code, for example
position: absolute will be relative to a parent that has
position: relative. Again, this is not immediately clear from scanning the code, so it has to be documented.
What would be really great is if your IDE could show you what styles are inherited or composed, and then which styles you are unsetting or resetting. As of now, my workflow is to jump into Chrome DevTools and review this manually, but it’s tedious and most developers won’t bother, resorting to adding new styles instead of modifying inherited ones (for example).
If you document the DOM hierarchy of how you plan to use your classes (for example, in a comment at the top of the file), theoretically a tool would be able to render this information inline in your IDE. I have attached two examples of implicit style dependencies – inheritance and positioning. In these examples I have left comments for where the tool might display this information, just as an example.
Do you have any suggestions for how I might build this? Essentially I have some HTML and CSS as input, and as output I need the computed styles(?) for each element. I’m not sure if there are any tools I can use to produce this information. Chrome DevTools obviously parses this information somehow, so I should look into that.