Which strategy best balances prefers-reduced-motion with manual application toggles?

Answer

The best balance is a CSS custom property set by @media (prefers-reduced-motion: reduce) as the default, with an explicit app-level override that changes the same property. A variable-based cascade scales better than nested media queries and lets the system preference be respected unless the user makes an explicit in-app choice.

Confirmed facts

• @media (prefers-reduced-motion: reduce) is a standard media feature that reflects the OS accessibility setting.
• CSS custom properties cascade and inherit like any other property. A value set on :root/html is inherited by all descendants unless overridden.
• Inline styles and later rules in the cascade win over earlier rules of equal specificity. Attribute selectors on html can be ordered after the media query to provide a manual override.

Likely explanation and practical setup

Specificity is not the main lever; cascade order and a single source of truth are. Using a variable avoids duplicating motion rules inside multiple media queries.

1. Define a motion token at the root.

:root {
  --motion: 1; /* 1 = allow motion, 0 = reduce */
}

2. Set the OS preference as the initial value.

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0;
  }
}

3. Provide an explicit app override that is applied after the media block.

html[data-motion="reduce"] {
  --motion: 0;
}
html[data-motion="full"] {
  --motion: 1;
}

Apply the attribute with JS when the user toggles the in-app control and persist the choice if desired. The override wins because it is later in the cascade and targets the same element.

4. Consume the token in animation rules.

.animated {
  animation: slide 0.6s ease both;
  animation-play-state: var(--motion, 1) ? running : paused;
}
/* Simpler pattern */
@media (prefers-reduced-motion: no-preference) {}
/* Preferred */
.animated {
  transition-duration: calc(var(--motion) * 0.3s);
}

When --motion is 0, durations become 0s and animations are effectively disabled without needing separate media blocks per component.

Why variables beat nested media queries

• Single source of truth: one property controls all motion, not repeated @media blocks.
• Manual toggle is a class/attribute change, not a media query re-evaluation.
• Specificity stays flat. No need to fight @media nesting or !important.

Verification

• With OS reduced motion on and no app override, computed --motion should be 0.
• After setting html[data-motion="full"], computed --motion should be 1 even with OS reduced motion on.
• Inspect computed styles in devtools to confirm the variable propagates to animated elements.

Note: overriding a system accessibility preference can conflict with platform accessibility policies. The conservative default is OS preference, and the manual toggle should be opt-in and clearly labeled. If the variable is not propagated to all rules, the toggle will appear broken.