The workbench
Style and markup links
The workbench · 1 min read
Click a style rule to see the things on the page it changes, or click something on the page to see the rules that style it.
When you would want it
A class name written in one file and used in another is the most common untraceable link in a codebase. This traces it, both ways.
Where to find it
- All Features → Style and markup links
- Open project map
What you get out of it
- The two-way trace replaces project-wide text search with ground truth.
- Style questions about markup and markup questions about styles are the same tool.
How to use it, step by step
- Open the project map from the Structure area.
- Click a style rule to see the elements it styles; click an element to see the rules that style it.
- Works in HTML, JSX className, and Vue, Angular, and Handlebars templates.
- Optional detectors - rules that style nothing, classes nothing defines - are switchable per project.
Why this beats the usual way
The class link is the least traceable thing in any codebase, and every file-type-specific CSS tool solves only its own dialect. Cross-template, two-way linking in one popup is the shape of the actual problem.
Find it in Universal Search
Style and markup links · The workbench · html css · class name · selector links