It seems like CSS Layers are pretty much overlooked and underused. 🤔 Are you using CSS Layers? - ThreadSky

cssweekly.com • 39 days ago

It seems like CSS Layers are pretty much overlooked and underused. 🤔

Are you using CSS Layers?

Comments

bregtjek.bsky.social•39 days ago

Huh no, didn’t know they exist..?
So no, not yet but I’m very curious now! Does it work on every browser?

heitorreal.bsky.social•39 days ago

https://caniuse.com/css-cascade-layers

arthur.juchereau.com•39 days ago

Built a css library around them

cssweekly.com•9 days ago

This seems cool, Arthur! Could you share the link? 🙂

arthur.juchereau.com•8 days ago

Of course, it's quite experimental still (basically custom made for our own needs) but fully open and easy so anyone could adapt to their needs.
It's looks like CSS-in-JS, but it's more of a TS to css.module preprocessor, kinda.
https://boomer-css.juchereau.com/

jakelazaroff.com•39 days ago

yup, they’re pretty great for CSS resets and base styles

monknow.bsky.social•8 days ago

Use them all the time in demos to separate the basic styling from what I want to show :)

marybaum.bsky.social•39 days ago

I think I want to know more. Course ultimately the CSS I use regularly will have to get supported in theme.json

cssweekly.com•9 days ago

I created a guide on how to use them a while ago, in case you want to check it out: https://youtu.be/d6IbTQIL0uk

Am I reading this correctly, and your use cases are in WordPress? 🙂

marybaum.bsky.social•8 days ago

Yup!

scriptraccoon.dev•39 days ago

I don't need them because every serious project uses a component framework anyway so that's that. Styles are scoped in Svelte and Vue.

cssweekly.com•9 days ago

This makes perfect sense. 💯

Do you usually work with Svelte and Vue? 🙂

scriptraccoon.dev•9 days ago

Yeah, Svelte most of the time. So there is one quite small global app.css file, and then lots of components with scoped styles. Cascade and layers are rarely used for this reason.

nerdy.dev•27 days ago

Yep, for my whole site https://nerdy.dev

cssweekly.com•9 days ago

I'm not surprised at all, Adam. It was one of your CodePen demos that got me thinking about this again. 🙂

Having a @demo layer to single out the relevant code you want to showcase is so useful. 🙂

romainmenke.bsky.social•9 days ago

Actually stopped using them because we have full control over all styles in our projects. So we don't need the ability to push a group of styles into their own cascade layer.

We found that specificity and source order are more nuanced tools giving us more detailed control.

cssweekly.com•9 days ago

Oh, that's very interesting! Thanks for sharing it! 🙏

Did you find any additional/specific drawbacks and challenges that pushed you to stop using them?

romainmenke.bsky.social•9 days ago

We add "[hidden][hidden] { display: none; }" in our base styles.
Using the double attribute to get a double class specificity.

When layered as "reset, base, components, ..." we found that components with ".foo { display: grid }" are always visible even when they have the "hidden" attribute.

romainmenke.bsky.social•9 days ago

Needing to repeat base styles in each cascade layer seemed a bit silly.

This is just one example, but the most straightforward to explain.

Having full control/ownership over all styles we find that we don't need layers.

romainmenke.bsky.social•9 days ago

Using layers does allow for some really neat and clean source code. We really liked the structure.

Nothing really wrong with using layers, it's more that we don't need them while also experiencing some drawbacks.

So not using cascade layers is a better fit for us.

benteh.no•39 days ago

they're scary!

cssweekly.com•9 days ago

How come? 🙂

benteh.no•9 days ago

really like them, but i work with a lot of large legacy systems with all sorts of wackadoodle code here and there. to build a proper layout management is not easy. i def see the use, and will when i start from scratch

about1em.bsky.social•27 days ago

I just wish you could change where un-@layer'ed styles end up in the stack. With 3rd party styles, especially with css-in-js, you end up with styles taking precedence over all your @layer'ed styles, and there's nothing to do about it.

cssweekly.com•9 days ago

This isn't ideal, but you can import them into a layer in CSS:
@import url layer(layer-name);

Also, there is a proposal to add a "layer" attribute for the tag, but I don't think this has been implemented in any browsers yet. 🙁

about1em.bsky.social•9 days ago

Yeah the import syntax can be helpful, though as I said, CSS-in-JS tends to make things harder 🫤

getrect.dev•38 days ago

I've tried integrating them into our CSS stack, but keep running into blockers.

During my latest attempt, I found the CSS-in-JS solution from our third-party component library is effectively incompatible. I burned a lot of time writing plugin that would wrap its CSS output in a layer to no avail.

cssweekly.com•9 days ago

Thanks so much for sharing this, Steve! It's a perfect fit for 3rd party plugins and widgets, but in reality, it's challenging to make it work. 🙁

Did you try with @import? And would a layer attribute for the tag help with your use case?

getrect.dev•9 days ago

Unfortunately the library we're using handles all the style management, and I couldn't (quickly) find a way to change how it adds everything.

Emotion.js is under the hood. I was able to build a rudimentary plugin to wrap the styles with @layer, but only some appended styles were affected.

getrect.dev•9 days ago

Something else in the library was interfering with how that plugin was being run and styles added. Too bad. But I ran out of time to investigate and had to move on to another task.

getrect.dev•9 days ago

@layer has been great when I've used it elsewhere, and I'd like to use it at my company. But until toolchains fully support it (they should), it'll be tough to convince developers to spend the time implementing it.

matuzo.at•9 days ago

Yes!

https://fokus.dev/tools/css-boilerplate/

cssweekly.com•9 days ago

That's fantastic, as always! Thanks for sharing it, Manuel! 🙏

Do you have any specific tricks, tips, or hacks for cascade layers? 🙂

zellwk.bsky.social•27 days ago

Yep. Pretty useful for overwriting stuff

cssweekly.com•9 days ago

Thanks for sharing this, Zell! 🙏

Do you have any specific examples? 🙂

slurpyb.bsky.social•9 days ago

Having base variables and theme variables to match the projects needs is huge

zellwk.bsky.social•7 days ago

Lemme write up something and let you know when it’s done

zellwk.bsky.social•16 hours ago

Almost done! 😉 I checked with Geoff and he’s willing to publish that on CSS Tricks, so I’d give you an update when it’s live!

(Or if you wanna know that beforehand, just ping me via DM and I’ll send you the draft!)

Comments

Posting Rules

Reply