😍 PSA: ident() is an upcoming CSS feature I’m incredibly excited about and you're about to be too. It will allow you to compose CSS variables from other variables, making code like this possible. 😍 Spec: drafts.csswg.org/css-values-5... Proposal (by @bram.us ): github.com/w3c/csswg-dr... - ThreadSky

lea.verou.me • 122 days ago

😍 PSA: ident() is an upcoming CSS feature I’m incredibly excited about and you're about to be too.

It will allow you to compose CSS variables from other variables, making code like this possible. 😍

Spec: https://drafts.csswg.org/css-values-5/#ident
Proposal (by @bram.us ): https://github.com/w3c/csswg-drafts/issues/9141

Comments

goodman.dev•122 days ago

It seems like that provides everything needed to hack arrays and maps into css 😁

the-angry-dev.bsky.social•122 days ago

I swear css is just getting worse. I mean it was never pretty, but my god

transbbsaral.bsky.social•122 days ago

I don't understand this code..

flurf.net•122 days ago

Countdown to some Perl 3 refugees using this to simulate multi-dimensional arrays...

spark-int.bsky.social•122 days ago

yeah i dont know what this is, i work within python

theturtle32.bsky.social•122 days ago

Oh god, can we not? The functionality, yes. This syntax? Please let's not make it all worse haha

theturtle32.bsky.social•122 days ago

Like, wtf does the word fragment "ident" even have to do with composition? As a software engineer, "ident" makes me think of "identity", like a specific instance of something. As I look, it seems it's supposed to be a shorthand for "identifier." That's not intuitive.

karansh.bsky.social•122 days ago

The only thing I see when I look at the code is:
hue hue hue hue 😂😂

gm112.bsky.social•122 days ago

Oh yeah, this is super useful! Would clean up a loooot of css out there, since prefixing is used a lot in css ui libraries

eldy-10.bsky.social•122 days ago

I'm super excited! What is it? 😉

ultrafoxx64.bsky.social•122 days ago

Holy jeez, can someone break this down for me? Is it supposed to be like, "identical colour to the variable just stated"? Wouldn't it be just as time efficient (and clearer) to whoever else is reading the code to just copy paste the color information? Just trying to see the advantage.

thatfanficguy.bsky.social•122 days ago

It's composition, isn't it? Looks to me like declaring an `ident` makes the string compose, so you end up with e.g. `color-blue-500`, which as a string you can then immediately use as a variable name in your CSS. No JS required.

thatfanficguy.bsky.social•122 days ago

To add to that: what this enables is passing down "arguments" for the composed string via style declarations, just like in the image. Set the border color on the e.g. button without having to declare it more than once per type. It's just gonna... cascade, if you will.

nocksock.dev•122 days ago

OMG. So we can finally sortof create dictionaries!?

I’m assuming this exists to pave the road for your Variable Groups proposal?

monochromeobserver.bsky.social•122 days ago

derol.com•122 days ago

It’s all fun and games until your CTO falls in love with Tailwind, and sets it all back to styling like it’s 2002.

lea.verou.me•122 days ago

And before you say "this is hard to read": This is a low-level feature to make things *possible* that currently are not. That gives us more time to figure out how to make the common cases *easy*.

Also, in real use cases you'd probably use a lot of intermediate variables to make it more readable.

mike.herchel.com•122 days ago

I was *literally* gonna say, "This is hard to read!"

But yeah, what you say makes sense.

rhyseichel.bsky.social•122 days ago

I'm going to say it anyway.

qua12.bsky.social•122 days ago

Great way to write s users manual👍

adrianthedev.com•122 days ago

Jeesus. CSS is becoming a programming language.
But it's better to have it than not have it.

toutouxc.bsky.social•122 days ago

I’m more of a backend guy myself, and I’ll admit that just by looking at the code, I have zero idea what it is or what it does, and the syntax doesn’t make me want to find out.