How to manage CSS files on design A/B test

Question

I am working in a web company and we are going to make an A/B test on one of the the main web pages that will test 2 different designs. The A/B is going to examine 2 different design approaches: different icons, colors, scheme, etc and even slightly minor changes in the layout. the main changes are DESIGN (and I will change them in CSS).

Assuming I know how to run A/B test:

my question is: how do I handle the CSS files.

my main CSS is in a file called: generalStyles.css.

Do I nee to create a file that is called generalStyles_B.css ? Will it be a duplication of generalStyles.css or will it be in addition to that file and just 'run over' the CSS rules that I am changing?

Duplicate will make it easy to use generalStyles_B if we decide to go gor the B option. but to maintain the code easily duplication seems to be wrong.

thanks, Alon

Answer 1

It depends on how you are doing a/b testing. The method I would use is as follows, with the basic assumption you are using two different files, something like register-a.html and register-b.html. Even if you are using an app that outputs your pages for you, you should have control of the markup of both. Also, I am making the assumption that somewhere on your page you have a div around your content.

Your html may look like this on your first page:

<div id="container" class="register-a">
 <h2>Title</h2>
 <p>Content Goes Here</p>
</div>

On your second page, you may have mark up as follows:

<div id="container" class="register-b">
 <h3>Title</h3>
 <p>Content Goes Here</p>
 <div id="registerBox">
  <input />
 </div>
</div>

You won't need two CSS sheets for this. Because of the classes 'register-a' and 'register-b' you can make visual changes however you'd like to. I would use the current CSS sheet you have running, and include something like this in your styles:

div.register-a p {font-size:14px}
div.register-b p {font-size:18px}

This will be a clear visual difference. Again this all depends on how you are doing your A/B testing in the first place, and how your code is organized on your website as well. Hope this helps.

Answer 2

My I propose as well, that if the changes are made for something like a background on a specific page, the same .css could be used with a duplicate entry with a slight variation.

For example in the original css, the background is "background.jpg"

body.home {
background-image:url('images/background.jpg');
background-color:#444;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
}

In the variation, the background is "background0.jpg"

body.home0 {
background-image:url('images/background0.jpg');
background-color:#444;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
}

So in the case, the variation page could simply refer to body.home0 instead of body.home without losing any other formatting.