Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Utilities to scope test CSS to the experiment / treatments only #23

Open
kingo55 opened this issue Nov 13, 2019 · 2 comments
Open

Utilities to scope test CSS to the experiment / treatments only #23

kingo55 opened this issue Nov 13, 2019 · 2 comments
Labels
enhancement New feature or request Priority-Med

Comments

@kingo55
Copy link
Member

kingo55 commented Nov 13, 2019

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?
@kingo55 kingo55 added the enhancement New feature or request label Nov 13, 2019
@dapperdrop
Copy link
Member

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

@allmywant
Copy link
Member

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request Priority-Med
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@allmywant @kingo55 @dapperdrop