Roma’s Unpolished Posts

Dashed Idents for Everything

Published on:
Categories:
CSS 37, Dashed Idents 2
Current drink:
Yunnan tea

What do you think when you see --foo in CSS? Is this a custom CSS property? Maybe, but not necessary.

It is a dashed ident, which is a variation of a custom ident (an author-defined identifier).

You can read why we have these in the specs by the links above, but the main difference is: in the dashed ident there are two dashes at the start. That’s it, that’s the whole difference. At least in how it looks.

But there is a big difference in how it works.

Not all places that accept a dashed ident would accept a custom ident.

If something wants a “dashed” one explicitly, for example, anchor-name in anchor positioning, or a view-timeline-name in scroll-driven animations — they won’t accept a regular ident.

When first encountering this difference, it might be challenging to adjust initially — and I did actually mention this in my article about anchor positioning:

One common mistake I initially had in my experiments — using the names without the double dashes in the beginning. The spec defines the names as <dashed-ident>, so they won’t be your usual idents, like with animation names or grid areas, but more like a CSS custom property’s name.

My solution to this problem? See the title of this post. We can just use dashed idents for any author-defined identifiers. Yes, not all places would accept a custom ident, but any place that accepts custom idents, would also accept a dashed one.

By doing this, we achieve the following:

Yes, the syntax is a bit more verbose, and yes, you might get used to dashed idents only being used for CSS variables. But that is changing, and I suspect more and more specs would allow only dashed idents, just because this makes writing the properties’ syntax definitions much easier.

What are the properties that we could start dashed idents for now?

Did I miss something? Maybe!

I have been using this notation for a while, and so far, I’m happy with it. If you’re attentive, you could’ve noticed it in my previous post, where I used it for the keyframes’ name! One thing I wanted to try: create a stylelint rule that would enforse this. Maybe one day.

Please share your thoughts about this on Mastodon!