Describe a CSS-only feature toggle you could apply to temporarily disable a styling change during a project stand-up.

Describe a CSS-only feature toggle you could apply to temporarily disable a styling change during a project stand-up.

• A. Implement a root data attribute (e.g., data-feature='old-ui' or new-ui) and wrap new styles under a selector that can be disabled by toggling the attribute
• B. Use a separate CSS file loaded via feature flag service
• C. Use a server-side flag only
• D. Use CSS media queries to toggle features

Answer: (A)

Turning a styling change on and off with CSS alone comes down to using a flag on the root element and scoping the new rules under that flag. By placing a data attribute like data-feature on the root (for example on the html element) you create a switch that CSS can read. Then you wrap the new styles in a selector that requires that attribute value to be present, such as selecting with [data-feature="new-ui"] and applying the new rules only inside that context. This works without any JavaScript or build changes: when the attribute is present with the enabling value, the new styles apply; when you toggle the attribute off (change it to another value or remove it), those rules no longer match, so the old styling remains in effect. It gives you a clean, CSS-only toggle that’s easy to toggle during a stand-up. In contrast, loading a separate CSS file driven by a feature-flag service adds extra infrastructure and steps, which isn’t CSS-only. Relying on a server-side flag only implies server logic controls what’s sent to the client, not what’s applied purely by CSS after the page loads. Using media queries to toggle features isn’t a deliberate stand-up toggle either—it depends on viewport or device conditions, not a manual flag you flip to enable/disable a specific styling change.

Turning a styling change on and off with CSS alone comes down to using a flag on the root element and scoping the new rules under that flag. By placing a data attribute like data-feature on the root (for example on the html element) you create a switch that CSS can read. Then you wrap the new styles in a selector that requires that attribute value to be present, such as selecting with [data-feature="new-ui"] and applying the new rules only inside that context.

This works without any JavaScript or build changes: when the attribute is present with the enabling value, the new styles apply; when you toggle the attribute off (change it to another value or remove it), those rules no longer match, so the old styling remains in effect. It gives you a clean, CSS-only toggle that’s easy to toggle during a stand-up.

In contrast, loading a separate CSS file driven by a feature-flag service adds extra infrastructure and steps, which isn’t CSS-only. Relying on a server-side flag only implies server logic controls what’s sent to the client, not what’s applied purely by CSS after the page loads. Using media queries to toggle features isn’t a deliberate stand-up toggle either—it depends on viewport or device conditions, not a manual flag you flip to enable/disable a specific styling change.