My tip is to avoid the use of tag names to style your page. Use classes instead.
Go further and investigate BEM naming conventions or better. Start creating components ( React, Web components, etc. ) that have encapsulated CSS.
Go further and investigate BEM naming conventions or better. Start creating components ( React, Web components, etc. ) that have encapsulated CSS.
I also disagree strongly with using encapsulated CSS everywhere except for individual widgets (and even then, where possible widgets should inherit styling in a sensible way -- otherwise a list row that goes in a main window table needs to be implemented separately from a list that goes in a sidebar, etc.
What I think is bad is having a convoluted CSS hierarchy. Having one or at most a few big standardized containers (e.g. document, tool-palette, browser) which receive reused styles and inline or very local css for specific cases allows you to implement preference settings, high contrast modes, etc. This is how actual desktop applications tend to work and they're a heck of a lot more complex than most websites.
Nothing stops you from styling classes in your CSS while still using meaningful tags in your HTML :)
Really good reference is the new Calypso [1] Repository which has some really nice examples [2].
To answer specifically to your example. I usually write something like this :
<h1 class="heading">Use <strong class="heading-keyword">classes</strong> instead of tag names</h1>
.heading { ... }
.heading-keyword { ... }
h1 strong { color: blue; }
strong { color: red; /* won't work */ }
1: https://github.com/Automattic/wp-calypso/ 2: https://github.com/Automattic/wp-calypso/blob/a7478174b04417...