Post

Syntax aside, would you want layers that can win from unlayered styles as Dave describes here? Favorite this post to cast your vote. RT to reach more people.

Dave Rupert@davatron5000.bsky.social

what about `@reyal` that works the opposite of `@layer` where un-reyal'd styles are the weakest?

18/8/26, 9:38 pm5 reposts13 likes

@where {}

@jantimon.bsky.social

19 Aug

layer and reyal don't help us for bundled web applications both can not provide the granularity web developers need when working in component based design systems here are three examples which afaik are not solvable without hacks when using @layer:

Bramus

@bram.us

20 Aug

For example 1, I filed github.com/w3c/csswg-dr... (as we DM’d about) For the 2nd example (the margins): that seems like something I’d slap an important on (or put in an overrides layer, or — in the future — use `margin-trim` for).

github.com[selectors-5] “initial state” selector · Issue #14360 · w3c/csswg-draftsI recently had a chat with @jantimon about not being able to set the background-color of a button but only if that button is in initial state. Effectively, the code they have is this: @layer base-u...

Bramus

@bram.us

20 Aug

As for that 3rd example: To me it feels like the structure of the CSS is wrong, and you can fix it by carefully structuring your layers: - base (.btn) - specials (.btn-hero) - overrides (.btn with the MQ)

Jan Nicklas

@jantimon.bsky.social

20 Aug

I really like the idea of margin-trim Here margin was just a simplified easy to understand example using margin-trim but there are many more :first-child cases