mojito-js-delivery
mojito-js-delivery copied to clipboard
mint-metrics
Utilities to scope test CSS to the experiment / treatments only
Something I've noticed larger organisations doing is scoping their tests' CSS down to particular variants or tests.
For example, given a test with ID w123 we might apply the classes to the page like so:
<body class="w123 w123-treatment">
And then CSS classes can be written like:
.w123-treatment a.btn {
display: none;
}
This ensures we can lock any events or CSS down to experiments / treatments. It's especially useful in the case where we might have some shared CSS that is injected into the control but it's not strictly needed.
Thoughts on this approach?
I think that's a sane approach.
Your example with applying the experiment id as a class to the <body> element is something else we should think about.
E.g. it could be a good way to signpost on the markup level if a test is running.
<body class="w123-staging ...">
.w123-live-{{sampleRate}}
.w123-divert-{{recipe}}
etc
@kingo55
Good idea, so we just need to add the test id and {test id}-{name of chosen recipe} classes to the body tag, right?
Also, I agree with @dapperdrop , using the {test id}-{test state} might be more useful.
