Variation-specific CSS/JSS

Status: Maybe One Day
by igerber ‎05-21-2014 May 21, 2014

Right now the editor allows us to add global CSS / JS.


This is handy.


However, there are times I would like to add variation specific CSS / JS changes. Otherwise, I need to either do all styling inline or create new classes and add those new classes to the global CSS.

Status: Maybe One Day
Level 2

by chrisgosling
‎05-28-2014 May 28, 2014

You can limit the number of classes you need to add by adding a separate class to the body of each variation.  Then you can use those classes to edit all of the individual variations from the global css.  Being able to edit variation specific css would be a nice feature though. Variation specific JS can be edited with the edit code tab in the bottom right corner.

Level 2
by Optimizely
‎06-09-2014 June 9, 2014

While this is not available to do using a graphical interface, have you tried changing variation level CSS by appending a style tag to the body of your page with your desired CSS properties?


The benefits of this allow you to change a background image immediately, add an !important tag to your style, modify pseudo classes, and specify CSS changes for a group of CSS Selectors.

An example of this code follows: 


The `ENTER_CSS_HERE` should be replaced with pure CSS as follows:

`a {color:red; width:10px !important}`

by Optimizely
‎07-29-2014 July 29, 2014
Status changed to: Great Idea!
This is definitely something we're looking into doing soon!
by sstedman
‎11-21-2014 November 21, 2014



Great suggestion Gary. I'd advise adding css to the head instead of the body though:




Also, I would much prefer to be able to move elements around in the UI, but have the option to export to CSS rather than jQuery. jQuery applied CSS is not easily traceable when debugging in the same way flat CSS is.

Level 1
by tmaiaroto
‎05-01-2015 May 1, 2015 - edited ‎05-01-2015 May 1, 2015

+1 on this


The downside is we gotta carry with us a lot of excess CSS when running more complex experiments. This is a performance issue (yes your milage will vary) and more importantly it's confusing (and limiting) for developers. Obviously it also greatly increases risk of style side affects as well because code is not well organized. Having variation level css would keep things better organized and resolve many of those conflict issues.


If the stance is "variation level css is not necessary" then it would make sense to remove variation level js as well from an architecture point of view. After all, we could be writing JavaScript that targets specific things as well that only affects specific variations despite being placed globally.


However, we know that doesn't really make sense. There are times when you want global and a variation level code. The same applies to css.


JavaScript is an extremely bad way to apply CSS when we have the ability to inject actual CSS files directly (or a dedicated location since it's all applied with JS in the end). Though I understand sometimes unavoidable due to how the original page was coded (perhaps styles placed outside of <head>, inline, etc.). I'd say let us manage those situations as they arrise rather than leading us toward bad coding practices from the get go.


It's been a few months, do we know if this is this something that's planned to be added yet?

Level 1
‎09-04-2015 September 4, 2015

I wold like to see this to!! It would be very helpful to have varation specific CSS / JS -- Doesn't quite make sence (to me) - to have a global feature when A/B testing.

Level 7
by Optimizely
‎03-02-2016 March 2, 2016
Status changed to: Maybe One Day
‎03-23-2016 March 23, 2016



Yes i've used the "$("head").append("<style>ENTER_CSS_HERE</style>");" method, frequentlyh,  but if the css is complex and there's an error it's a pain to have to debug all the escaped code...  a variation specific CSS feataure will all easier editing for css tweaks.



Level 7
by ccdykstra
‎11-17-2016 November 17, 2016

To make this more clear for anyone else finding this, you must put the above in a function in the code editor like so:


$(function() {
    $('<style type="text/css"></style>').text('.myClass {margin: 0;}').appendTo('head');
Level 1