Fight View is the second stage of a Lens diagnosis. It appears in the popup after you click Diagnose, and it’s where you see the CSS conflict laid out directly: what rule is winning on the property you selected, what other rules tried and lost, and why each one lost.
The name is deliberate. When something looks wrong on your site, there’s usually a fight happening in the CSS, and you’ve been watching it from the outside without knowing what’s going on. Fight View puts you inside it.
Before Fight View: the live preview #
Before you click Diagnose, Stage 1 shows you a live preview of the value you typed applied to the element on the page. The preview gives you a quick visual read on what the value looks like, and a warning if Lens can already tell it won’t hold in production CSS. Fight View is the follow-up: it explains exactly why, with the full rule evidence.
The property header #
At the top of Fight View, you’ll see the property you selected and the target value you typed. For example: “Changing background-color. Your target: #FFFFFF.” This confirms Lens is analyzing the right property and knows what you’re trying to achieve.
What is winning right now #
The winner card shows the CSS rule that’s currently controlling the property on the element you clicked. Each card shows:
- The selector. The CSS Selector identifying which elements this rule applies to. Long selectors are truncated to 60 characters, but you can hover to see the full thing.
- The source. Where this rule came from: your theme, a specific plugin, your Page Builder, an Inline Style, a WPCode snippet, or something else. This is the origin classification, and it’s what tells you where to go to fix it.
- The value. What value the winning rule is setting. Includes a color swatch if it’s a color value.
- Badges. Three possible badges appear when relevant: !important in red (this rule uses the nuclear option), @media in amber (this rule only applies at certain screen sizes), @layer in purple (this rule lives inside a CSS Layer that affects its priority).
Rules that tried and lost #
Below the winner card is a section listing every other rule that tried to set the same property on the same element. Each row shows the value it tried to set, where it came from, and why it lost. The loss reason is written in real human terms:
- “Lost because: it uses !important” means the winning rule has !important and this one doesn’t.
- “Lost because: it has a more specific selector” means the winning rule’s selector is more targeted.
- “Lost because: it loads later on the page” means both rules have equal specificity and neither uses !important, but the winner appears later in the stylesheet order.
- “Lost because: it is in a CSS Layer that loads later” means @layer priority is involved.
- “Lost because: this rule only applies at a different screen size” means the rule is inside a @media query that doesn’t match the current Viewport.
If this section is empty, your target property only has one rule competing for it, and that rule is winning by default.
The override prescription #
When Lens can generate a safe fix, the CSS rule appears directly in Fight View. You can copy it from here without opening the Triage Page. It’s the same rule you’d see in the full Triage Page, just surfaced immediately so you don’t have to navigate further if the fix is obvious.
If Lens can’t generate an override, it says why: usually because the winning rule is a JavaScript-set Inline Style, which requires a different approach than a CSS rule can address.
See full detail #
The “See full detail” button opens the Triage Page in a new browser tab. The Triage Page has everything in Fight View plus the full ancestor chain, additional override variants, the “Where styles come from” panel, the developer handoff message, and the feedback form. Go there when the Fight View isn’t enough to act on, or when you need to hand the diagnosis to a developer.
Different property #
The “Different property” link at the bottom of Fight View returns you to Stage 1 with the same capture, so you can select a different property to analyze. Note that clicking Diagnose again from Stage 1 counts as a second diagnosis against your plan. The first diagnosis already ran.