Most of our websites have the following (generalised) requirements for the main content:
Global default background, text and link colours
Alternative background, text and link colours
An example being a site with an off-white background with dark grey text that has some dark blue sections with white text.
Using Cwicly we set up the global styles accordingly and plan to have a global class applied to the dark sections (e.g. .dark) to enable quick re-usable styling of them.
So far so good.
When attempting to use the global style links, we were not able to glean the benefits of using this over and above just using a global class. Is there something we missed?
As we understand it, in order to take advantage of the global styles for the links to override the default styles, you have to specify a class on the element you are targeting anyway. To save re-typing this every time, it makes sense to use a global class. Once you have done this, you essentially have a global class that is empty, that is used as a context for enabling the global style links.
Based on this experience, it seems to be easier and quicker to simply add the required styles to the global class itself - thereby negating the need for the global style links.
If we are missing something obvious or there are other considerations or benefits we are not yet taking advantage of, please let us know.
That’s not (necessarily) the case.
Maybe this gives you a better idea about the global elements:
You are basically styling the tags, with the ability to add classes in some instances, for a more granular control by adding specificity.
For me, global elements have the single purpose of basic general/global styling, just like setting up my headings (h1-h6).
Again, you are not styling classes, even if you add them inside your global elements.
I think what you described is clearly a case for global classes.
At least, that’s the route I’d choose - especially from the perspective of flexibility and best practice.
Thanks @Marius, I think we are saying the same thing then, for the most part.
For overriding of global styles in specific (Cwicly) contexts, global classes seem to be a better fit.
What you say makes sense, for targeting specific non-Cwicly blocks, with the requirement that the class name used by the non-Cwicly block would still need to be specified for the Global link style.
This does seems to be equivalent to creating a global class with the same name as an override, but maybe the global styles are more user friendly (for, for example less experienced users) than global classes, I am not 100% sure.
Either way, the global classes route is what we’ve gone with, using relative styles for inner elements such as the links.
Since this is done on the section level, it catches non-Cwicly blocks that are wrapped by the section, so we can avoid unnecessary overrides in the global styles as well.