RSS FeedTwitterMastodonShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia IconGit IconSpeaking IconTools Icon
A series of images of an avatar doing a bunch of skateboard tricks.
adam@argyleink
notecss

This felt like a future of library customization, using @layer:

/* <tool-tip> styles */
@import "tool-tip.css" layer(components.tooltip);

/* later, in some-new-context.css */
@layer components.tooltip {
  .some-new-context tool-tip {
    --_bg: var(--surface-1);
    --_shadow-alpha: 15%;
  }
}

Scope the import, then append tweaks into that scope from anywhere. Safe and sound.

Rad stuff.

Join the conversation on

48 likes
12 reposts
  • romainmenke
  • Miriam Suzanne
  • Apple Annie :prami:
  • Niklas Wolf
  • Jan Andrle
  • Roni Laukkarinen
  • Tixie Salander 💕
  • Thomas Broyer
  • GENKI
  • Abdul Fatir
  • Melanie
  • Chromium Developers

@argyleink This honestly is a gamechanger what cascade layers enable 👍😊

Niklas WolfNiklas Wolf

@argyleink @a11yMel I love this, but what of the performance impact of importing CSS files?

Ollie BoermansOllie Boermans

Member of a CSS Webring

Try a site in the ring!
PreviousRandomNext