Why this matters for Loupely Lens #
Loupely Lens diagnoses visual CSS problems. Its capture file records the full CSS Cascade for the element you clicked, including every rule that applied and every rule that was overridden. To understand why Lens says “your theme is overriding your Page Builder,” you need to know what specificity and the cascade are.
The cascade #
CSS stands for Cascading Style Sheets. The cascade is the set of rules that determines which style wins when two or more rules try to set the same property on the same element. Every element on a page can have dozens of rules pointing at it from different sources. The cascade decides the winner.
The first factor is origin: where a rule came from. Browser defaults are overridden by theme styles. Theme styles are overridden by Page Builder styles. Page Builder styles are overridden by inline styles (styles applied directly to an element in HTML, typically by JavaScript). This is what Loupely Lens means by “origin classification.”
Specificity #
When 2 rules from the same origin compete, specificity decides which one wins. Specificity is essentially how targeted the selector is. A rule that targets #checkout-button (a specific ID) beats a rule that targets .button (any element with the class “button”), which beats a rule that targets button (any button element on the page). The more specific the selector, the higher its priority. The less specific, the easier it is to override.
This is why changing a color in your Page Builder’s settings sometimes has no effect: the Page Builder’s rule might be less specific than a rule already in your theme’s stylesheet. The theme rule wins not because it loaded last, but because it’s more specific.
Inline styles and !important #
Inline styles (applied directly as style="..." attributes on HTML elements) have higher specificity than any selector in a stylesheet. JavaScript plugins and page builders often inject these. They can only be overridden by !important declarations, which themselves override almost everything else.
When Loupely Lens diagnoses a conflict and the diagnosis says the winning rule is an Inline Style injected by JavaScript, the fix path is different from a conflict between two stylesheets. You can’t solve it by writing a CSS override in your Page Builder’s custom CSS panel unless that override uses !important.
The ancestor chain and inheritance #
Some CSS properties (font size, text color, line spacing) inherit from parent elements. If you set a font size on a container, the text inside inherits that size unless something more specific overrides it. This is why the most common reason a section won’t center correctly isn’t a rule on the section itself: it’s a constraint set by a parent element two or three levels up. Loupely Lens captures the ancestor chain specifically because of this pattern.