No "Undo" and annoying "Clean" CSS
I spent a whole day designing a page variation in the CSS editor in Optimize. And I was losing my nerves the whole time. What is really annoying about the editor:
1) There is no Undo option. When I change a color or whatever and it is not right, there is no way to go back. At least I haven't found it. So I have to keep pieces of code in a file outside the editor. Not very handy.
2) The obligatory "Clean" code feature is really a pain in the back. Please let me use my own code, with my own faults. Or at least with shortcuts. "Border: none" is split into like 8 attributes. Colors are converted to rgb - which we don't use in our code. Some code is removed but when I enter the same code again, it suddenly passes. And the worst thing is that you don't know what changes the "Cleanup" made. It just spills out different code - and you find the changes, human, why should the machine do your work for you.
I know this is not a question but rather a complaint. But I don't have the e-mail of Optimize's Product Owner so I'll just post this here and hope somebody read it. If you have the same trouble just give me thumbs up or something
No "Undo" and annoying "Clean" CSS[ Edited ]
November - last edited November
As a dev building tests in various optimization tools - with Google Optimize recently added in to these tools - I fully agree on Adam's complaint here. We often put in code EXACTLY as we want it in, with all the CSS shorthands, prefixes, and all that also EXACTLY as we want in the tests.
We don't want no hex to RGB color conversions, shorthands split into multiple properties - often set with 'initial' - and all those 'cleanups'. Worst thing for us is: we write all our selectors carefully and we often write our JS next to it, so we can quickly predict browser and styling behaviour and such during the build process. The rewritten Optimize selectors make all these specific selectors ultra unreadable for us humans; I can't read what element div > div:nth-of-type(2) > ul > li:nth-of-type(5) > span > img:nth-of-type(1) is within a second. However I can when I read .sidebar > .authors-list > .author img.
Although I get it that in Google Optimize you would want to directly identify my selector to the element in the interactive preview (interactive designer), but why would you force rewriting (or: 'cleaning up') my selectors and CSS properties? In first place, why not make the 'cleanup' function optional already?
Google Optimize Product Owner, this is so frustrating that in specific situations we would rather consider other tools like Optimizely, Convert, VWO for our clients and prospects, just because they don't 'cleanup' and mess with your code at all. Think about sites with dynamically loaded CSS classes or dynamically loaded elements - React? Angular? - which are very popular these days. Please consider this complaint, possible solutions and the purpose of cleaning up also from a dev & test-builder point of view and I'm sure you'll create a larger base of happy users in the (near) future.
No "Undo" and annoying "Clean" CSS
From what I can understand, the main (if only) feature that you must be using in the Optimize editor is the CSS code dialog right?
I suppose that you haven't used features like the editor palette (I suppose you are a dev and can code directly your CSS).
There is undo in the editor palette - for example if you use it to change the font size of an element, drag to change the position or resize an element, or if you do other types of changes like text change or content change.
Have you discovered those features at all or do you expect to be doing everything that you need in the CSS code dialog? The undo button for this functionality exists on the top of the editor palette menu (you may also use right click to show up the edit menu).
I can understand the frustration with the CSS code dialog and I hope that the experience will be improved there.
There is an easy workaround already though: if you just want to add your CSS code (that you know that is correct), just use the "Insert HTML" option in the editor palette menu and add your CSS code inside a <style> element.
You can even change the CSS selector (using the change list UI) to insert the <style> element in the "head" (it doesn't matter much though).
In that case your CSS will not be "validated" so there will be no change (but also no warnings in case you have errors). The CSS dialog may change to do something like that in the feature by providing an option to "not clean up".