ADCode

Show the rules that style an element

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
  • Settings → adcode.structure.elementToRules

How to use it, step by step

On by default.

  1. Works in HTML, and in React, Vue, Angular and Handlebars templates.

Why this beats the usual way

Knowing what a style rule touches, or which classes nothing defines, normally needs a bespoke extension per framework - if it exists at all. ADCode reads HTML, JSX, Vue, Angular, and Handlebars templates natively and connects markup to styles both ways, with findings surfaced in the same Problems panel as everything else.

Find it in Universal Search

Show the rules that style an element · Understanding a project