We are trying to create an elegant, hierarchical, easy to maintain site using classes appropriately. This has proven harder than expected because:
We may not be using the right strategy
X Theme short-circuits CSS cascades with !important tags
There may be bugs or incompatibilities
We have learned through experience that classic elements often present fewer issues using this strategy that new one, but even then we have challenges.
We would like to define classes that specify the basic typography of our text; the color and weight; and the behavior (including responsive size) then simply apply combinations of those classes as necessary. This way we could build pages quickly and make global changes easily.
The first section of this example illustrates this strategy and actually seems to work as expected. However, the second section looks and works great in the builder, but the stretchy text (the upper “Smart Design…” line) fails in the wild. This is a very common problem.
I will submit that specific problem as a separate ticket, but for this one I would prefer to focus on strategy and best practices:
Is trying to use classes this way essentially impossible in X Theme, or am I simply doing it wrong?
What are best practices in this regard?
Any other general hints as we refine the structure of our pages preparing to go live would be very helpful.