Q: Google Optimize Custom CSS Changed After Save The issue: I write some custom CSS in Google Optimize, save it, then return later and the selectors have been changed from custom to machine-generated.
Something like:
a.gbda-black-cta
Turns into:
div.site-container>div:nth-of-type(3)>div:nth-of-type(3)>a
I believe this can happen if "Clean CSS" is selected on save of CSS, but this is happening after saving the page and returning later. It's been a tough one to intentionally reproduce as well, so I'm hoping to at least commiserate with others who have seen the same behavior and can confirm I'm not crazy.

A: I think is an Optimize bug, I have seen this behaviour many times... Now, I usually put CSS changes with JS.
In Global JS I usually do something like that:
var myStyle = `<style>
               .mySelector{color:#ff0000;}
              </style>`;
document.querySelector("head").insertAdjacentHTML("beforeend",myStyle);

You are not crazy, I thought the same first time ;)

A: This happens when you use the WYSIWYG edit, to change/edit styling of DOM elements. And then Optimize 360 automatically writes this styling syntax.
I wouldn't worry too much, as it works, but it's just formatted ugly.
You should use the "CSS" box, where you can write your own CSS and then the formatting remains the same as you've typed and is neat and tidy.
