How to find where in HTML, and even better on which pages of the project, a particular CSS style occurs?

Question

css

In what environment (IDE, IDE plugin, framework, CMS, CMF, their combinations, etc., etc.) can you get the answer to both questions from the title?
The idea is to somehow organize the work of developing a website in such a way that it is easy to get an answer to the questions posed, for example, in order to understand exactly where and what will change if you change some style in CSS or how to optimize the structure of CSS files etc.
And if the first problem (finding where in HTML) can still be somehow solved by a simple text search for mentioning the name of a particular style in files containing HTML markup, then get an answer on which pages (their url addresses are meant) this style name will occur - it's not so easy anymore. Those. in fact, an environment and / or a development method is required so that somehow the HTML and CSS markup is automatically linked and taken into account both with each other and with the pages (routing) of the site.
Ideally, in the IDE, when hovering/clicking on the CSS style name, it would be very cool if two lists were somehow displayed:
1st - where this style is used in HTML
and 2nd - on which pages it is used.

Answer 1

Why is this needed?!
1. If you want to make a dependency tree - do it through the routing tree (URL + styles + blocks).
2. By routing - load the necessary blocks.
3. Blocks - load via includeHTML