Understanding a project
Show the rules that style an element
Understanding a project · 1 min read
Click something on the page and see every style rule that changes how it looks.
When you would want it
A class is written in one file and used in another, and nothing normally connects the two.
Where to find it
- All Features → Show the rules that style an element
- Turn on or off
- Settings
What you get out of it
- 'Why does this look like this' is answered without grep.
- Works across all five template styles the same way.
How to use it, step by step
- Open the Structure popup against your markup - HTML, JSX, Vue, Angular, or Handlebars.
- Pick an element; every rule styling it is listed.
- Click a rule to jump into the stylesheet that defines it.
Why this beats the usual way
Reverse-lookup of styles is usually a browser-tool trick that only works on the rendered page. Doing it in the source editor means never leaving the desk to answer the question.
Find it in Universal Search
Show the rules that style an element · Understanding a project