What automatic detection means #
When Lens completes a capture, it doesn’t show you the raw CSS data and leave you to interpret it. It runs the capture through a classification layer that looks for known problem patterns in the data. When a pattern matches, Lens produces a diagnosis automatically: what the problem is, why it’s happening, and what to do about it.
This classification is rule-based. The engine reads structured CSS data, checks it against a set of known conflict patterns, and determines which one fits. No language model is involved in this step. The underlying data is the same data a developer sees in DevTools. The difference is that Lens has already done the interpretation before you see anything.
The problem classes Lens detects #
Specificity conflicts #
A rule you set is being overridden by a more specific rule from a different source. Lens identifies which rule is winning, which is losing, where each came from, and what specificity change would resolve the conflict. This is the most common problem class on WordPress sites using themes and page builders simultaneously.
Inline Style overrides #
A Page Builder or plugin is setting a style via an Inline Style attribute, which beats almost every stylesheet rule. Lens identifies the Inline Style, traces it to the component or plugin generating it, and routes to developer handoff since inline styles set by JavaScript can’t be reliably overridden with a CSS rule.
Ancestor constraints #
A parent or grandparent element is constraining the element you clicked through overflow restrictions, fixed dimensions, positioning context, Flexbox rules, or Stacking Context. Lens traverses the ancestor chain and surfaces the specific constraint and the specific ancestor it lives on.
Competitor element interference #
Another element is overlapping, obscuring, or competing for space with the element you clicked. Lens identifies the competitor, describes the interference, and traces it to its source.
Losing rules #
A CSS rule is present and correctly targeted but being overridden. Lens identifies the rule, the reason it’s losing (specificity, source order, @layer priority, or !important on the winner), and the rule that’s replacing it.
JavaScript-injected style conflicts #
A style applied dynamically at runtime by JavaScript is conflicting with stylesheet rules. These conflicts are invisible to static stylesheet inspection and only appear in the computed style state. Lens captures computed styles, so it catches runtime injections that static analysis misses.
When detection doesn’t produce a clear result #
Some CSS states are genuinely ambiguous. A layout that looks wrong to a human may not produce a clear signal in the data. When the classification layer can’t match the capture to a known problem pattern with enough confidence, Lens routes to capture-insufficient rather than producing a guess.
A capture-insufficient result isn’t a failure. The capture file still contains the full CSS picture. Download it and share it with a developer. The data is complete even when the automated classification isn’t. See Triage Routes for Lens for what to do from there.