garden
garden copied to clipboard
Feature request: Support for cascade layers
Hi
Modern CSS supports cascade layers that are useful for example overriding framework specific styles: https://developer.chrome.com/blog/cascade-layers/
I wonder if there is a support coming for this in Garden? Something like at-layer
could be a reasonable way to implement this.
Interesting! My first thought was that we already have "layers" since nesting is one of the huge features of Garden (although it is also now included in CSS proper). But then I read your link and saw that this is about a new sort of selector. Can you help teach why this would be desirable instead of, eg, principled nesting/variables that are so easy in what Garned users have? Perhaps a (psuedo-code) example?
Let's say my site uses some 3rd party CSS framework as a base style. In this framework, there is a selector which adds a style for list items with links:
.list > li > a {
color: red;
}
Now I want to override this style in my application code and turn the color into blue
. A simple way to do this would be adding an utility class of blue
to the a
element and creating the equivalent CSS class selector with Garden. The end result would be:
.blue {
color: blue;
}
However, if I attach this blue
class to my a
item, it's still going to have red
as a color, because the framework's selector .list > li > a
is stronger than my own .blue
selector. In order to override the red color, I would need to create a selector which is stronger than the one in the framework, something like .list > li > a.blue
(this would also kinda defeat the purpose of the blue
utility class, it should work everywhere with a simple class selector).
Cascade layers could make this process much simpler. I could wrap all the framework specific code into "framework" layer like so:
@layer framework {
.list > li > a {
color: red;
}
}
Then I would wrap all my application code into its own "application" layer (i.e. I would use the at-layer
rule in Garden), which comes after the "framework" layer like so:
@layer application {
.blue {
color: blue;
}
}
Now my a
element turns into blue
. The @layer
rule creates a new cascading context, which automatically overrides all framework selectors, no matter how strong they are.
To add to this discussion. Here is a CSS snippet from a project I'm working on. It simply describes the layer hierarchy. Anything defined on a layer to the right will override something in the layer to the left.
@layer reset, globals, layout, components, partials, utilities;