Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Rethinking how I name some things in CSS
2 Plays4 minutes ago
Roma's article: https://blog.kizu.dev/dashed-idents-for-everything/
Recommended
Transcript
Introduction to General Musings
00:00:00
Speaker
Hello, my front-end friends, and welcome to my podcast, General Musings. My name is Kevin, and here my podcast, I talk about whatever is front of mind for me in any given week, usually in some way that is related to front-end development.
Highlighting a Front-End Development Article
00:00:10
Speaker
And this week, we're doing things a little bit differently, definitely front-end development related, where I'm going to be looking at an article. I did this a little while ago, and people really did seem to look at it, though if you are listening to the podcast-only version of this, don't worry, I'll be making... you audio This will be audio-only friendly, though if you are watching the video, we'll we'll have some on-screen stuff to go with it.
Introducing Roma's CSS Blog Post
00:00:29
Speaker
And the reason I wanted to talk about this, I don't know how I missed this blog post originally. This is by Roma. It said his blog post kizu.dev in part of his unpolished posts. And if you don't know Roma, he's a CSS genius.
00:00:45
Speaker
is often ah doing like really pushing the limits of what you
Roma's Proposal for Dashed Identifications
00:00:50
Speaker
can do with CSS. So definitely check out his blog. There's some really interesting stuff there. But in this post, he posited that we should use dashed indents for everything. i said indent, I should say ident. For some reason, my brain, whenever I see it, always reads it as an indent. It's a dashed ident for everything because it's a dashed identification.
00:01:09
Speaker
that's why we call it an ident. And what do you do when you see a hyphen hyphen foo in CSS? This is a custom property, maybe, but not necessarily. Though for the most part, and for a long time, those were the only dashed indents that we had. i said, it I did it again. I said the indents.
00:01:23
Speaker
We're going to, this podcast episode, if nothing else, we'll break that habit of me saying it out loud the wrong way. So our dashed ident. So you write the custom property. It's your hyphen, hyphen. You name your property.
00:01:36
Speaker
You can't come up with your own property. If you want a custom property, it has to start with a double hyphen.
Expanding on Dashed Identifiers in CSS
00:01:41
Speaker
The thing with them is those now there's other places where we use this. If you've been using anchor positioning, you name your anchors the same way it's hyphen hyphen, and you come up with the name of your anchor. And they're starting to introduce this thing where if we're naming something ourself in CSS, that the hyphen hyphen is going to be used because it distinguishes something that's from the CSS itself or something that's custom on our end, a custom identification. but
00:02:07
Speaker
But custom identifications already existed. These were a thing for a long time. Counters is the one that I always think of because you can create your own counters and you just do your counter reset and then you put in whatever you want to call it.
00:02:20
Speaker
You don't need a hyphen hyphen. You can have a custom name for it. Another one that people are probably more familiar with is keyframe animations, right? If you do an at keyframes and you put a name for your animation, you can call it whatever you want. This is a custom identification or custom ident. But now we have dashed identifications and custom identifications. And he's saying maybe every time we should use and dashed one. Because if it's a custom one, there's nothing stopping you from putting two hyphens in front of it. It's still going to work.
00:02:47
Speaker
They're just characters. So it would be completely fine. And part of the reason he thought of this is he he said here he had an article when he was first using anchor positioning where one common mistake I initially had in my experiments using the names without the double dashes in the beginning.
00:03:02
Speaker
The spec defines the names as dashed ident. So they won't be in your usual idents like with an animation name or grid area, but more like a CSS custom property name. And then he continues, my solution to this problem, see the title of this post. You can just use dashed idents for any author defined identifiers.
00:03:21
Speaker
Yes, not all places would accept a custom ident, but any place that accepts a custom ident would also accept a dashed one. By doing this, we achieved the following.
Benefits of Dashed Idents in CSS
00:03:30
Speaker
You don't have to remember if something accepts one or the other, right? Is it a custom one or a dashed one?
00:03:36
Speaker
ah You just use dashed everywhere. He also says, we make it easier to understand that these idents are author to defined. The main reason to have them was to be able to distinguish them for the parser in places where there might be both author defined identifiers present and other CSS keywords. There will never be a conflict between a dashed ident and a CSS keyword.
00:03:54
Speaker
This is guaranteed. So then he does go on to concede that, yes, the syntax is more verbose and it can be a little bit weird, especially if you're used to you and using the dashed one only for CSS variables.
00:04:06
Speaker
But this, I agree with him in that it's weird sometimes that you're using dashes and you're not using them in other places. And I started doing this a little bit on a personal project I was working on, and it felt really normal to be doing things like a counter reset with the hyphen hyphen there, because it was something I was naming. And especially with the counters, you use them like a variable because you have your your var function and then your parentheses. And in there you have the variable name.
00:04:31
Speaker
Counters are the same. You have a counter function and you put the counter's name inside of it. So it felt very normal. Keyframes, I also was fully behind. it it just it doesn't look weird. It does what I want it to do. It's pretty awesome. um And it makes the other places that we're starting to see them, like with anchor names, feel more normal. Instead of this weird thing where sometimes I'm naming things but not having it, and other times i I am naming it, but I'm not putting the double
Concerns with Dashed Idents for Grid Areas
00:04:59
Speaker
hyphens.
00:04:59
Speaker
But he does go on to say one thing, sorry, he did mention it here for view transition names, which I also think like that's weird because it's new and I would have expected it there too. But the one area that I couldn't get on board with was the last one he mentions in his article, which is using it for CSS grid area names and column names and naming stuff in grids.
00:05:19
Speaker
And I don't know why i feel really weird using it in that context. I think that if I'm doing it everywhere else, I just have to get used to doing it there as well.
00:05:31
Speaker
i I don't know what else to say on that. Every time I did it, ah maybe it's because I've used it so much. Or maybe it's just because you end up with like whole bunch of... like If you're using grid areas, especially, and you just have like these double hyphens everywhere, it sort of looks kind of bizarre ah and and needless, and it's becoming a lot more verbose.
00:05:50
Speaker
But I think if you're leaning into it everywhere everywhere else, I guess it makes sense to do it there. Though I think... I'm feeling really comfortable putting it in everywhere else that I'm doing it, but I'm not feeling comfortable there. and I might make the decision on my own only not to do it with grid areas and see how I feel about that.
00:06:09
Speaker
Though maybe i just need to force myself to use it and then see what happens from
Experimenting with Dashed Idents in Videos
00:06:14
Speaker
there. Maybe I'll get used to it in the same way I did for my animation names. That's the main Thank
00:06:22
Speaker
use them for anchor names i'm trying to think there must be something else that we named to right but i can't think of anything off the top of my head and doesn't mention anything else in the article so i'm i'm curious but you think this is a shorter episode than usual and i'm very curious what you think about it though so please leave a comment or if you're listening to this in your podcast uh podcatcher of choice then uh hit me up on on blue sky or mastodon and and let me know what you think of it because i'm super curious i haven't seen anybody talking about this and i came across it and i'm like how come i haven't seen anybody talking about this this seems like something that should be maybe more talked about and i plan on introducing it into my videos and start using this in videos now
00:07:02
Speaker
And I'm curious if I do it without saying anything, what the comments in my YouTube videos are going to look like. If I do a keyframe with it and I just make it with the double hyphen and don't mention it, that's my, I say the name. I keep on going. Like how many people are going to get upset in the comments?
00:07:17
Speaker
I should try and see what happens. And the same with anytime I use it. ah Even if I want to make people really mad, I could use it in the grid area and not mention why I'm doing it. I wouldn't do it there, but I think for an animation name, I would.
00:07:31
Speaker
So I think I might try doing that and seeing the reaction, though. I should probably explain myself. We'll see. oh On a short, maybe I won't. And in a longer video, I'll probably explain why I'm doing it. But yeah, a quickie this week, just to sort of see what you think about this idea.
Listener Feedback Request
00:07:47
Speaker
I'm very curious.
00:07:48
Speaker
I'm definitely, I think it makes sense to to do it. Obviously, I'm rambling. I'm repeating myself now. So I'm going to shut up and say, thank you so much for listening. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.