Code snippets

How to Remove Custom CSS from an A/B Test

★★★ Technical level 3 of 3

Written by Neil Webley · Last updated 31 August 2026

Remove A/B test CSS safely by targeting a unique stylesheet, restoring owned DOM state and handling SPA route changes.

Why remove experiment CSS?

CSS can outlive the state it was designed for. A modal closes, a route changes, an experiment component is removed or a safety timeout reveals hidden content. Leaving temporary styles behind can affect later pages, collide with another test and make the control difficult to reproduce.

Cleanup should be owned by the same experiment that created the style. A unique ID provides that ownership boundary.

Safe ways to remove a style element

var style = document.getElementById('experiment-pricing-layout');
if (style) {
  style.remove();
}

The existence check makes cleanup idempotent: a second call does nothing. Avoid code such as document.querySelectorAll('head style').forEach(...), which can remove critical website CSS.

Remove classes and attributes too

If the experiment added a scoping class or inline property, removing the stylesheet alone may not fully restore the DOM.

document.documentElement.classList.remove('pricing-experiment');

var card = document.querySelector('.pricing-card');
if (card) {
  card.removeAttribute('data-fcro-layout');
  card.style.removeProperty('min-height');
}

Restore only properties the experiment owns. Replacing an entire style attribute can erase legitimate changes made by the site after the experiment started.

CSS cleanup in single-page applications

An SPA can change route without unloading the document, so a stylesheet in head remains active. Scope it tightly enough that it cannot affect other routes, and clean it up when the tested component or route ends if the experiment lifecycle requires that.

Do not assume every history change means the test should be undone: FreeCROTool retains variant assignment, and returning to the tested route should show the same variant. Separate assignment persistence from whether route-specific CSS should currently be active.

Remove CSS with FreeCROTool

The hand-coded editor's Remove Style snippet calls:

window.cro_tests.removeCSS('testCSS_--testID--');

It catches an absent element, so the call is safe more than once. The ID must exactly match the ID passed to addCSS. The case-sensitive --testID-- placeholder is replaced at publish time.

For time-limited cleanup, use:

cro_tests.removeCSSAfterSeconds(
  'testCSS_--testID--',
  30
);

The delay is measured in seconds. This is useful for a safety fallback but should not replace event-driven cleanup when you know exactly when a state ends. See the CSS helper reference, adding scoped experiment CSS, and reveal timeout guidance.

CSS removal checklist

• The style ID is unique to the test and purpose.
• Add and remove calls use exactly the same ID.
• Cleanup can run twice without throwing.
• Experiment classes, attributes and inline properties are restored where necessary.
• Other experiments and website styles remain intact.
• SPA navigation away and back preserves the assigned experience correctly.
• Hidden content has an independent reveal path.