Understanding a project
Show the elements a rule styles
Understanding a project · 1 min read
Click a style rule and see the things on the page it actually affects.
When you would want it
It turns a class name nobody can trace into a list of elements you can click.
Where to find it
- All Features → Show the elements a rule styles
- Turn on or off
- Settings
What you get out of it
- A class stops being a string nobody can trace and becomes a list of places it is used.
- Impact of changing a rule is knowable before you change it.
How to use it, step by step
- Open the Structure popup with a CSS file in front of you.
- Pick a rule; the elements it styles are listed beside it.
- Click through any listed element to jump to where the markup uses it.
Why this beats the usual way
Asking 'what does .card actually hit' usually means a project-wide text search with noisy results. A real CSS-to-markup link gives the exact answer in one popup.
Find it in Universal Search
Show the elements a rule styles · Understanding a project