Does this mean that the 80 odd sites I have built with X / Pro with 100’s of lines of custom CSS on each of them are all going to be stuck of older versions of Pro or require me to go in and update and change the CSS?
3 Likes
You’d hope/assume that if you update the site, it still respects custom code over the top. As with any update before. But good question!
In my thread, I am mentioning simple element CSS that stopped working. It was this:
$el.x-modal {
margin-top:100px;
}
it seems that this case is not due to the Breaking changes mentioned in the pinned thread, because .x-modal is still present in the code.
I am puzzled with this:
* In many places our generated element CSS no longer includes qualifying selectors. For example a selector like .e1-2.x-something might be reduced to .e1-a . This means you won’t have to fight uphill against the base styles as much when making changes.
Does that mean that descriptivex-something is going to be replaced with cryptic .e1-a kind of CSS? Does that mean that we cannot have our own CSS libraries for various situations, but have to inspect the current CSS class each time? I hope not. 
Hundreds of hours of work may be for nothing, and also it is not realistic to review and fix almost a decade of building various websites that relied to this kind of CSS.
@urchindesign It depends on what the custom CSS is and what was customized. It is possible that adjustments to the CSS will be needed if it doesn’t look exactly like the previous version. By standardizing the load order and making sure all custom CSS is loaded last, in most cases this still means your custom CSS will have the strongest selectors and styles will be added.
@Misho I’ll take a look at your other thread as well. To clarify on that statement, here’s a specific example using the modal.
In the previous version, Modal elements font size was applied like this:
.e123-5.x-modal { font-size: 1em }
The 123 would be the ID of the current header, footer, page etc. and the 5 represents the element. That number is just incremented for each element encountered.
The selector .e123-5.x-modal includes .x-modal making it two classes strong and therefore harder to target with custom CSS. You wouldn’t be able to rely on things like this:
.x-modal.my-custom-class { font-size: 2em }
Because that’s still only two classes - and with the load order not being consistent, it’s hard to know if stronger CSS is needed.
The current output for the modal font size is:
.e1a-b { font-size: 1em; }
Breaking that down e is just a prefix, 1a represents the current page ID, and b is the current element. Those are base 36 encoded so we can fit larger numbers into less characters. The important thing is that it’s only one class. Take a look at this element CSS:
$el.x-modal { font-size: 2em; }
No matter what, this should always apply a font size because it is two classes strong.
Does that mean that descriptive
x-somethingis going to be replaced with cryptic.e1-akind of CSS? Does that mean that we cannot have our own CSS libraries for various situations, but have to inspect the current CSS class each time?
No, the x-modal, x-text etc. classes were not removed from the markup. They were just taken out of the generated CSS selector chain when possible. You can always target them. The generated class names (e.g. .e1-a) should never be trusted as they can change as elements are added and removed.
2 Likes
I think I get you here.
I presume then that if we have targeted CSS by copying the class structure from the inspector the custom CSS should work as structurally the elements and CSS classes have not changed. You have just changed how you target them.
Generally I’ve also always kept your structure and then added my own custom class into the structure at the relevant point so hopefully those should also still be good.
The new way looks like a good improvement though so I’m really hoping it doesn’t break much.
I presume then that if we have targeted CSS by copying the class structure from the inspector the custom CSS should work as structurally the elements and CSS classes have not changed. You have just changed how you target them.
Yes! Exactly. We’re hoping as well that it doesn’t make too much of a difference for existing customizations but considering we changed the load order it’s still possible for some cases.
1 Like