Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Getting more involved with CSS with Miriam Suzanne
0 Plays2 seconds ago
🔗 Links:
✅ Oddbird: https://oddbird.net
✅ Follow Miriam on Bluesky: https://bsky.app/profile/miriam.codes
✅ Follow Miriam on Mastodon: https://front-end.social/@mia
In this conversation with Miriam Suzanne, we discuss getting involved in CSS specifications, including her journey of becoming a spec author, and the importance of community feedback in shaping web standards. Miriam shares her experiences with the CSS working group, the challenges of understanding specifications, and the collaborative nature of how it all works. Miriam is also heavily involved with Sass, so I ask her what the future of Sass looks like, specially with all the CSS specs she is part of that deal with Sass-like features. And, as is becoming a new tradition, I wrap things up with some rapid-fire questions.
Recommended
Transcript
Introduction to General Musings
00:00:00
Speaker
Hello, my friend and friends and welcome to my podcast, General Musings. My name is Kevin and normally on this podcast, I talk about whatever is front of mind for me in any given week. But this week I'm not alone.
Miriam's Contributions to CSS
00:00:09
Speaker
I'm joined by none other than Miriam Suzanne. For those who don't know Miriam, she's a developer, teacher and pioneer of modern CSS.
00:00:15
Speaker
ah For the old school of you out there, you can thank her for Susie and for the youngins who have no idea what that is. You can thank her for container queries, cascade layers and scope along with some other things as well.
00:00:26
Speaker
yeah Thank you ah so much for joining
Getting Involved in CSS Specifications
00:00:28
Speaker
me. And the reason I wanted to chat with you today is actually because of when we got to meet during CSS day, which was a lot of fun.
00:00:38
Speaker
And at one point, you pulled me quietly aside, and you asked me why I wasn't more involved with the specification. And I didn't really have a good answer for you other than i don't really know how to do that.
00:00:51
Speaker
yeah I could have found out more on the spot, but I thought it would be valuable information for others that are out there too. But not just about, like I don't think everyone wants to get heavily involved in the spec. right So maybe talk about different ways that people can get involved in the world of you know spec, whether it's CSS or other things along the way. so yeahs Yeah, and the way to get heavily involved is to get lightly involved. So, you know, that's a good ah good path for anybody.
00:01:23
Speaker
You're an invited expert on the CSS working group. ah So obviously you're sort of probably as involved as you could probably as you can get. yeah I'm guessing based just on what you answered there about being lightly involved, you didn't start by being, you know just diving right in and being an invited expert.
00:01:42
Speaker
How did you even get to that point? Yeah, I mean, for me, it's interesting. I did ah i wasn't real active with the specifications before i was invited, but I was working on a lot of things sort of around Um, what was coming out? I was doing a lot of teaching CSS similar to how you are.
00:02:06
Speaker
Um, and, uh, was working on a series of videos for Mozilla, um with Jen Simmons who was on the working group. Um, and she kept telling me that I should be on the working group.
00:02:18
Speaker
I should get involved. Um, ah she had me listen in on part of a call at one point, um, when they were talking about, uh, determining the width of a box that doesn't render. It felt pretty absurd to me, but I enjoyed sort of you know the way they were talking through the details and trying to sort out an answer here.
The Proposal and Development of Cascade Layers
00:02:41
Speaker
um and We were working on this series of videos, and Jen kept asking me, why does Tailwind exist? Why do why does CSS and JavaScript exist?
00:02:54
Speaker
What are these tools? What problem are they solving and how would we solve it in the language? Um, and I was doing a series of videos on the cascade, um and trying to explain sort of, um where some of the misunderstandings seem to be in my mind, um, and what some of the issues were that people were trying to solve.
00:03:14
Speaker
Um, And I came back with a sort of an answer, ah which was we need cascade layers. Basically, we didn't have a name for it at that point. um But I just thought, well, we need a little bit more explicit control in the cascade. And that would help a lot.
00:03:33
Speaker
And she said, okay, um you're going to now go to GitHub and post that. to the CSS working group GitHub. um And I did And ah the working group wanted it ah and said, you are now a spec author.
00:03:54
Speaker
um And you know I didn't know what I was doing, but I got paired up with other people ah who did. And we sort talked through the feature and what it would become. And so it became a very collaborative effort.
00:04:06
Speaker
ah But, yeah, it took engaging with the CSS working group GitHub um for them to know I was interested, know I was thinking about it.
00:04:19
Speaker
um And, yeah, bring me on to to help work on it. You sort of just got thrown into the deep end a little bit there. Yeah. Yeah.
00:04:31
Speaker
That's actually really funny. You know, your story of the first time you sat in on the meeting, because Jen invited me last year to one that was on the inline box model.
00:04:42
Speaker
And yeah, that was... ah deeper dive than I had ever expected to be involved in on something. it was like, oh, this is way more complicated than I ever imagined it would
Collaborative Nature of the CSS Working Group
00:04:54
Speaker
be.
00:04:54
Speaker
yeah Right. And to some extent, I'm really thankful that I got thrown into the deep end because, I mean, I had... I had lingered and observed before. I had watched some threads. I had participated in the ah the email ah group back before there was um before the conversations were all on GitHub um a little bit.
00:05:18
Speaker
um And it's a bit of a fire hose and a bit overwhelming ah and can feel scary to get involved. And by getting thrown into the deep end, ah i lots I found out that there's lots of people there working on it um and that it's a collaboration.
00:05:37
Speaker
ah Nobody knows all of the parts. um Nobody knows both. I mean, most of the people who write the code that becomes CSS and who know what can be implemented don't write CSS. Yeah.
00:05:53
Speaker
Uh, they're not authors. Um, I guess author in this case being a ah term of art for those of us that write CSS. um But yeah, so the group is comprised of people who sort of ah know how the specs are written, people who write CSS and people who write browser engines.
00:06:19
Speaker
um And none of us know all of the parts. ah And so we work together and I would have been too scared to say, I know how to do all of these things.
00:06:31
Speaker
Cause I don't, I don't know how to do all of these things. Um, but it turns out I know one of them. Uh, and there are other people who know the other parts and we work together.
00:06:42
Speaker
Uh, so, yeah, in some ways getting thrown into the deep end helped me get past my fears of having to understand the whole system myself. David having to think about that and and the complexity there ah would probably be overwhelming. And it's, I think also beneficial when you don't have that, because then you are, you know there's all the things that now we're getting that we're, we were always told you can't do.
00:07:08
Speaker
ah right Partially because you know people were asking for it because they don't know any better. Because you know here's the feature that would be useful. And then eventually maybe that becomes possible. Yeah.
00:07:20
Speaker
yeah Yeah. And I think it's very similar to working with clients on other things, like respecting that the client has an expertise and their expertise is in what the problem is, uh, and not, uh, not necessarily in how software can fix it or how, how the web can, can help.
00:07:40
Speaker
Um, and so, Yeah, I'm used to being on the other end of that where I'm the implementer um and I'm working with a client who knows the needs and in a way that I don't.
00:07:53
Speaker
So in that situation, I'm the browser engineer. Yeah.
Entry-Level Involvement in CSS Specs
00:07:59
Speaker
And in this situation, I'm sort of going into it and ah have to remember that I am in some ways the client um or or I'm playing a few roles there. But, you know, ah there's some interesting parallels, I think.
00:08:13
Speaker
Yeah, that's an interesting way of looking at it. Now, for people who are listening, are like, oh, I want to sort of get involved, but I'm definitely not ready to just start writing a spec sure of something.
00:08:25
Speaker
um Let's say going to like the very... entry level, or maybe even beyond entry level, the first thing that comes to mind for me is just filing bug reports on things when stuff comes up.
00:08:38
Speaker
ah My feelings always, if someone has time to complain about something not working on social media, they probably had time to also file the bug report about it. Yeah. My one question there would be, how do you know if it's a bug or if it's something that doesn't work the way you think it should?
00:08:55
Speaker
that's what i was good at That's what I was just going to say is like, that's the problem with going straight to filing bug reports. um So i think maybe there's a step before that.
00:09:08
Speaker
And I often start by asking on social media, but that is partially because I've built a community on social media where a lot of the people read and write specs.
00:09:22
Speaker
um And so I might find somebody who knows. whether it's a bug or just something that ah doesn't work the way I want. But I think that's a useful place to start.
00:09:32
Speaker
um And in some ways, I could say I started there before I got involved, right? i ah I followed Fantasi, Elika Edimad, and Tab Atkins,
00:09:46
Speaker
and Jen Simmons, Rachel Andrew, um all these people that work on the CSS specification, i followed them on social media. um So that both means that I'm seeing what's coming out, what's new, and also what conversations are.
00:10:05
Speaker
they're having about new things. Um, so getting to watch back in the day grids develop, right. And the syntax change and watching that process, even from a distance on social media, you start to get a sense of what the questions are, what the conversations are, um, who's involved, uh,
00:10:29
Speaker
And so I think that is a useful place to start and to be part of those conversations, part of that community, ask those questions. um And then that also gives you a community you can go to and be like, is this is it a bug?
00:10:43
Speaker
hu I mean, I think the other the other thing is to get comfortable looking at specifications. um You're not going to understand everything in them. There's some absurd stuff in there that's hard to follow.
00:10:57
Speaker
ah But some of them you'll be able to figure out. And CSS specifications... They're mix. They're written by lots of different people. um But there is an effort in the CSS working group to make them readable, um to make them have language to explain what it's doing, um even when it goes into extreme detail um using all sorts of lingo you don't know.
00:11:24
Speaker
often there is a note that says, ah this is what this means, um, in sort of author facing language. Um, so yeah, don't be scared of
Understanding and Testing CSS
00:11:37
Speaker
them. Even when parts of them don't make sense.
00:11:40
Speaker
Um, lots of specs still don't make sense to me, but often there are parts that I can understand and I can find what I need. Um, so that can be a good place to look for,
00:11:52
Speaker
Yeah. Is it a bug or is it specified that way? Yeah. I remember the first time I got into the spec a lot was when I started learning more about formatting contexts.
00:12:05
Speaker
And then I would just keep reading, like rereading some of the sentences over and over, trying to like understand what, and then as you said, there's words in there that you don't understand. And then that they're I'll click that link. And it's just like, oh, here's a whole new rabbit hole of stuff that I don't understand. Fantastic. It's yeah. Right. And some of those that are so foundational, like formatting context,
00:12:26
Speaker
you'll end up following the rabbit hole back to the initial CSS specifications, and then you're in trouble. Yeah. Because those first specs are pretty vague about things.
00:12:36
Speaker
Yeah. i've noticed i've I've definitely noticed that the newer stuff is much easier to read than the older things, both in terms of like how specific it is.
00:12:47
Speaker
And like you said, the the older stuff was... A little hand wavy on certain aspects. Yes. Very. Yeah. The other thing you can do to tell if something is a browser bug. I mean, I guess this is another way to think of it.
00:13:00
Speaker
If you run into something that doesn't make sense, the question is, do I ask the working group? Is this a problem with CSS um that can maybe be addressed? Or is this a problem with a specific browser?
00:13:14
Speaker
So the first place to get through that is often to try it in different browsers. And see if the same thing happening is happening across all
Feedback and Evolution in CSS Spec Development
00:13:23
Speaker
of them. And then like any bug report, how little code can you get to recreate the, like, yeah can you isolate the problem?
00:13:31
Speaker
Can you isolate the browsers where the problem happens? um And then if it's only happening in one or two browsers, you know it's a browser bug and you... file or it's likely a browser bug and you file it with the browser.
00:13:45
Speaker
And if it's happening everywhere, you start to ask the working group for or somebody who will help with the spec or you go try to read the spec.
00:13:56
Speaker
Yeah. um Yeah. And I think there's a lot you can learn from that, even if you're not super comfortable reading through everything that you find in there. Yeah. And um ah you have to remember, you know, the specs grow and adapt and they can be wrong. um we'll We'll go in and be like, that was a mistake. Let's change it.
00:14:15
Speaker
um So you can still file an issue with the working group to be, to ask, to say, this this seems wrong. ah Do we need it?
00:14:27
Speaker
Right. Yeah. ah I guess on that, friend, and also you were mentioning before about when you were following sort of the early days, when the grid syntax, for example, was coming out, I've noticed, and i was i was following it a lot then too. That was sort of when I was getting more into education. So it was a fun time.
00:14:47
Speaker
um And there was, I definitely saw a lot of the conversation going on. i find, i guess we're seeing it a lot right now with, um,
00:14:58
Speaker
masonry layout where not only is there a lot of discussion going on but they're very actively seeking feedback yeah um and which obviously it's one of those things i guess because there's a lot of debate they want to encourage more feedback but it doesn't only happen for the hotly debated things right they're always asking for feedback on things it's just some of them go more under the radar than other features i'm guessing Yeah. And sometimes the group has more of a sense that like, we're all on the same page, we think our intuition is right. um And so there's a little less effort to go find a lot of people to weigh in.
00:15:37
Speaker
um And there's sort of a sense of like when we when we can't disagree, ah when we can't agree, um that's a ah good time to go find out that no nobody can agree.
00:15:51
Speaker
Which is often the case. It's like if the group is split, ah so the polls will also be split. ah But yeah still, it's useful to get ah in that feedback. It's not just a yes or a no often or ah ah this side or that side, but...
00:16:07
Speaker
We're looking for, you know, why? what are the What are the reasons people have for liking one thing over another? um And those become more impactful in some ways than just the final position people take. And I guess there's different times when this is happening too, right? Because there's like when you're actually right now, or I guess it's past that, you did a proposal for mix-ins?
00:16:36
Speaker
Yeah, functions and mix-ins. Yeah. Yeah. So say you write this like a proposal for that, that then gets adopted to get turned into a draft. Yeah.
00:16:48
Speaker
And then, so let's just say like right now at that stage, it's becoming a draft. Is that so like, is this when people, is this just something that would be going sort of through the working group or is it something like we can, I guess we can follow what's happening, but is it possible to also, if somebody is like, Oh, I want to know more about how mixins are going to work. Could they follow it and get involved in the discussion?
00:17:10
Speaker
Yeah, absolutely. um And there's sort of various stages along the way where you can get involved in different ways. And it sort of depends what you're interested in. um So I wrote up a sort of proposal explainer of how I saw this, these features may be working.
00:17:29
Speaker
um what problems they would solve, ah sort of what approach we might take, um because it's never going to be the same as what SAS would do. So I wrote that up and then, yeah, I presented it in a working group meeting and in a GitHub issue.
00:17:46
Speaker
um So first I posted the GitHub issue. Anybody can read it and comment there. And then I presented it at a at one of the meetings. um And the group decided to adopt ah the feature set.
00:18:03
Speaker
Sort of the idea there is not it will look exactly the way it was explained. But ah yes, this is something we want to start working on as a group.
00:18:15
Speaker
um We will create a specification for it and officially open issues around it and officially have this conversation. and develop something. Um, so that means it's time to start opening lots of issues basically against my proposal, um, and start asking hard questions about it.
00:18:38
Speaker
Like, do we really want it to work this way? What about, what about these other options? Um, On this one also, ah Chrome seems real interested in shipping functions.
00:18:51
Speaker
So they're sort of pushing, ah they've written part of that spec already. They will probably have a prototype soon, which is sort of a next stage of feedback where there will actually be something to play with and give some feedback at that stage.
00:19:07
Speaker
But in both cases, the feedback would come through, ideally, ah through the CSS Working Group Drafts GitHub project. Um, and, uh, if you are just looking at the issue tracker for CSS, it's overwhelming.
Engagement with CSS on GitHub
00:19:25
Speaker
It's a fire hose.
00:19:26
Speaker
Uh, it's constant new issues. um there's way too much there to dig through, but everything new that comes in ideally gets triaged and labeled by what spec it's related to. Um,
00:19:41
Speaker
And so you can filter things down to a spec you're interested in. um So you can look for the CSS mixins label on GitHub and find all of the issues that are currently tagged in relation to that.
00:19:58
Speaker
um And if you have a new one that's not tagged there, Go for it. Open open up an issue, um write down what you're thinking, and somebody will try to get to it.
00:20:10
Speaker
It is also on our end a fire hose. So as a as one of the people that would help triage that and respond to issues, there are a lot. They come in quickly.
00:20:22
Speaker
And so i'm you're not necessarily going to get an immediate response, but people are going to try to get through the issues and respond to you at some point.
00:20:35
Speaker
um Yeah, I was going to ask about that because I was just like, it must be, and I guess it it probably depends on the feature and the how many eyeballs are sort of on it.
00:20:46
Speaker
But at times it could probably be quite overwhelming the amount that's coming. Yeah. It's sort of like the the longer I've been doing this, the more specs I'm an editor on. And then even, you know, i am one of four editors on a spec and it's usually because i have, uh, helped with one of the features that is covered in the cascade spec.
00:21:08
Speaker
Um, or something, or in the conditional spec. um And there's also issues coming in against that spec for issues I haven't really looked at.
00:21:19
Speaker
So um often, yeah, there's a lot of sort of trying to decide what needs my attention and ah what I can leave to somebody else. And yeah. So for someone like me, who's heavily involved in CSS, but I don't really haven't done anything when it comes to the, that side of things beyond that one meeting that I did sit in on,
00:21:44
Speaker
um ah or for other people that are just very interested in the state you getting getting more involved in this type of thing. But I'm definitely not about to start writing a spec because i'm just i yeah I get why it worked for you. But i first of all, i don't even have any ideas of anything I would want to add at this point. And if I did, I'd probably be quiet about it.
00:22:06
Speaker
um what but What suggestions would you have of like, you know what would be the next step for for me or someone else who's sort of at that point where they're interested in in diving deeper?
00:22:19
Speaker
Yeah, I think you are a little bit past that. I've seen you ah look at specs and respond to what's in a spec,
Understanding CSS as a Language
00:22:29
Speaker
right? So um that's that's a stage of involvement. That's a ah so like starting to understand the questions that are being asked and the ah concerns that are in there and... And how it works.
00:22:43
Speaker
um And I think that's a great place to start is start thinking not just what can I do on a web page, but how is CSS doing it internally?
00:22:53
Speaker
no What is actually... Not just what is what is the specificity of my selector, but what what is a selector and what is specificity?
00:23:05
Speaker
What do those things mean? What are they doing? Why are they there? um And starting to ask those questions and go and find the answers is a first step to getting involved.
00:23:17
Speaker
Yeah. And it's in some ways what Jen Simmons was pushing me to do, right, when I was making those cascade videos, was to answer those sorts of questions. Like, what what about the language...
00:23:31
Speaker
um leads to these issues people are having. um Is it just a misunderstanding or is there something actually missing in the language? What's going on?
00:23:42
Speaker
And so starting to look at the language, I mean, I feel like there was a mental shift for me of like thinking of programming languages as just a thing that exists out there.
00:23:56
Speaker
um versus a piece of software that people are writing. CSS is a piece of software that somebody is making, and I can be involved in the making of it.
00:24:10
Speaker
um And even just that mental shift was huge. Like, oh, it's just a set of features, and we can change those features. Yeah.
00:24:22
Speaker
what are the rules of changing those features? How does it work? Uh, so you're already several steps in, um, you're already going to CSS day. You're already following those people. You're already having those conversations and you're teaching the language in a way that goes beyond, um, I don't know, surface level. You're, you're getting into why it works and how it works.
00:24:46
Speaker
Um, So that's a place for people to start. From there, I think it is um subscribing to issues on GitHub that are interesting to you and participating in those conversations.
00:25:00
Speaker
And it doesn't have to be all of them. You don't have to look at all of the issues. You can just be like, you know what? I care about um how arguments are handled in a function. If we add functions to CSS, I i find that an interesting conversation.
00:25:15
Speaker
Or I care about... Masonry and how it's added to the language. You can go find one of those issues, follow the conversations, participate in the conversations.
00:25:28
Speaker
um And that's a great way in. And then over time, I also, when I'm interested in something like that, I will also go to the different browser issues for it.
00:25:40
Speaker
So like one that comes to mind is the, the attribute function, uh, which we've had for a long time, but it's been very limited. It's always, the spec has always had a lot more power to it, but browsers never shipped that.
00:25:54
Speaker
And so for a long time, I've been following the browser issues asking for the full feature. Right. um And they've mostly been quiet.
00:26:07
Speaker
Nothing's, i haven't been getting notifications about them. And then suddenly browsers are talking about this again. And suddenly I'm getting notifications of which browsers are working on this feature and what they're doing.
00:26:17
Speaker
um It can be a lot of fun to just sort of follow a few. you You get emails then when something changes in the browsers issue. So you go to the WebKit bug tracker or the Mozilla or the Chrome bug tracker and um you can subscribe to an issue and ah just get notifications when it's changing.
00:26:41
Speaker
And you don't have to like read and understand everything. Some of it's just like commit messages, but you can be like, oh, this is active. Somebody is working on this now. Yeah. Um, uh, so I find that really interesting, but then, yeah, you can do the same thing on GitHub with the CSS working group issues and see, see where things you're interested in are being discussed.
00:27:01
Speaker
um see what ah both what authors want, other authors want, what you want, um and how the browser engineers and spec writers are responding to it. Like what are the issues that they're having on their end?
00:27:15
Speaker
How does it relate to the issues you're having? um And you have to sort of think about all of those things fitting together. But that's the work. is thinking about how all those things fit together.
00:27:27
Speaker
So just being in those conversations, watching them happen, um, participating, is a good way to start to get that mindset of this is software. We have backend constraints. We have front end constraints.
00:27:40
Speaker
We have user needs. Um, how do we pull them all together? ah it's, it's that we've done, we've done that. It's not too scary. We just have to remember that we're a little bit in a different position on it.
00:27:55
Speaker
Um, and I think it's useful to remember going into these conversations, which of the skills you have. Um, so for me, that's like, I, I now understand some things about spec writing and,
00:28:10
Speaker
Um, I mostly I'm an author. That's the perspective I'm bringing. And then I am trusting browser engineers to tell me that part because yeah I don't know it.
00:28:24
Speaker
And if I go in remembering that that's a thing I don't know, it helps me like know what perspective is useful from me. Yep.
00:28:36
Speaker
Yeah, that's the subscribing to the the browser ones that just made me think I subscribed to the subgrid one way back when and obviously got nothing, no, no emails or anything. And then like, all of a sudden, and when they started popping up, I was just like, I didn't even I was like, I i didn't even know I subscribed to it. But I'm happy I did. because you know It's finally happening. It is it is often for me several years later, i started getting emails and I'm like, oh cool.
00:29:02
Speaker
This thing that I was interested in three years ago, it's finally it's finally moving. yeah I mean, talking about the attribute function, but how many years has that been? Holy cow. Yeah.
00:29:14
Speaker
ah And i my when I posted about it, i did I think I only put it on but Blue Sky. But the first, all the replies are just like, is this is going to be Tailwind without like a class now? like you just use the attributes. And I'm like, why is that the first thing everybody thinks of? Like all the stuff that you can do
Community and Conversations in CSS
00:29:31
Speaker
with this. And that's just like, oh, we don't need to use class equals now. We can just put in everything. And I'm like, oh.
00:29:38
Speaker
Yep. I mean, I think, I think it is useful for utility classes, or an alternative to utility classes. So great. Start there then work out.
00:29:54
Speaker
um Yeah. So yeah I really appreciate that advice. And I think it's good. i'm For me, I guess I have to go from lurker mode a little bit. Like I'm just, I've been a lurker since I've been online for everything I do.
00:30:10
Speaker
um I'm on like 15 discord servers where I just poke my head in and see what's the temperature of of whatever community it is. And I leave, I'm following a whole bunch of different things, but I just, I enjoy following the conversations and just sort of yeah keeping a pulse on things. So definitely, i guess for me, the next step is is breaking out of my shell a little bit to get more involved in the discussions.
00:30:33
Speaker
Yeah. And, you know, to some extent, I would say there's levels of that, right? Like some of the discussions aren't just happening in the GitHub issues. So you're a lurker there maybe, but I would say, you know,
00:30:47
Speaker
A lot of us read what you're writing, know you on social media, and it's that sort of like, ah we know you, we know you're part of the community, we know you know CSS.
00:30:58
Speaker
And somebody doesn't have to have a certain number of followers on YouTube to be in that place, right? You don't need to, there's a lot of people who are sort of part of the community. um on social media. And they're not necessarily in the GitHub issues, but they're still participating in the conversation ah more casually.
00:31:18
Speaker
And that that information makes it back into group meetings. I mean, like... i I think I have seen links to your videos in CSS working group issues, right? Where somebody's like, somebody's like look, here here Kevin is talking about the problem.
00:31:36
Speaker
um here That's an example of the problem. like Let's solve it. um So, I mean, i would say a lot of our job as spec editors too is following the conversation that's happening outside.
00:31:51
Speaker
Um, what are authors talking about on social media? What are the questions they're asking? What are the teachers talking about, um, in blog posts or YouTube videos or whatever?
00:32:03
Speaker
hu So ah you don't have to think of being part of the conversation as an as a single on-off switch. There sort of shades of it.
00:32:14
Speaker
um And ah doing it casually is still doing it. Yeah. And I think what you said before, obviously I have a large following, but for anyone listening, like the community in general for CSS is relatively niche and small, yeah like or at least the active voices in it. And you always see sort of the same people there, even if they're not with these huge followings. So it's definitely some, like somewhere that you can get involved in social media and other things and, and be, it's a very friendly and welcoming environment that,
00:32:46
Speaker
uh, you know, I think I would encourage anyone to sort of speak up there as well. for sure Yeah. And definitely there's some people in the working group who, you know, they wrote a couple blog posts. They didn't have like a following for their blog, but they wrote a couple of blog posts that somebody noticed, um, that, that were, they were clearly thinking about CSS the way that the group is thinking about CSS. And then, uh, you know,
00:33:10
Speaker
They get pulled in because, yeah. yeah Yeah, there's really a sort of like looking for that.
00:33:22
Speaker
that perspective of, I mean, in terms of getting more formally involved, um it is useful to have authors just thinking about CSS as authors and just saying how it is working for them or not without getting into any of the details about how a spec works or what's happening on the backend.
Miriam's History with SAS and Its Impact
00:33:42
Speaker
So that is a useful way of participating in the conversation is just to say, As an author, I don't like it. As an author, i do like it. yeah um And often we'll want more detail about why, but that's ah that's a valid way to participate.
00:33:58
Speaker
And then in terms of getting involved, ah it's sort of a question of like, are you starting to think about it in terms of a piece of software that has all of these constraints? and how they all fit together systematically. And that's sort of the the mental step to get through to then um really become part of the group or become a spec writer.
00:34:25
Speaker
Yeah, that's, um um I'm also curious, just because you're heavily involved in the spec now, you're also but ah one of the core maintainers of SAS.
00:34:37
Speaker
um And I'm just curious how that also had just, I'm i'm a big SAS person too. And I'm just curious, sort of, obviously, with Susie, that yeah lots of any any people from the olden days of the web probably used it at one point or another.
00:34:55
Speaker
um But from that, like how did it how did you end up getting directly involved with SAS? ah Going to SAS conference, um which only existed for five years or something.
00:35:07
Speaker
um But I mean, it was Susie. It was like um when SAS took off, like really took off.
00:35:18
Speaker
Susie was one of the only grid systems um that was built for it already. So, I mean, that was just sort of a luck of the timing, right? I happened to play with SAS before it got big.
00:35:34
Speaker
Um, and so, uh, Susie was there and I had already at that point been through several steps of like working out the bugs and documenting it. Um, so when it took off, it was already documented.
00:35:48
Speaker
It already had a lot of the bugs fixed. I got lucky. Um, I mean, ah yeah, not that, um, I mean, it was open source software. I didn't get paid.
00:36:02
Speaker
and didn't I didn't get anything except to invited to SAS conference. how But yeah, I mean, that was that was it. I got invited to be part of the community and part of the conversations. and then um And that's sort of what the core team of SAS is, ah really like the majority of SAS, uh, is implemented by Natalie.
00:36:27
Speaker
Um, she's, she's the heart of SAS and she's the coder of SAS and, um, but she's pulled together people who were involved and who had built things, uh, in SAS and sort of built a core team of, um,
00:36:46
Speaker
active users, active tool builders, since SAS is sort of like SAS is for building tools for CSS.
00:36:59
Speaker
So yeah, there's just sort of a few of us that ah give a lot of feedback and and help give direction and stuff. which has been fun and interesting and weird to go from that. I was doing that first.
00:37:13
Speaker
And then yeah actually ah Natalie was the first one to ask me to write a spec, to write a spec for SAS. And it turns out SAS specs and CSS specs are entirely different.
00:37:26
Speaker
but they sort of have you're you're thinking through some of the same things um you're sort of building a a test suite in plain language thinking through like all all of the things that could happen what are the tests i would write what are the things that the questions i would have to answer um and then you're just writing them out in prose to some extent um Yeah.
00:37:49
Speaker
So I wrote a spec for SAS adding CSS colors, the new color spaces to SAS. Oh, yeah. Yeah. And then I very soon had to write CSS specs. I was like, OK, here we go.
00:38:04
Speaker
Yeah.
00:38:07
Speaker
So the reason, ah one of the reasons I brought up SAS first, I still enjoy it, but I, and I still do use it, but it's also, I'm just curious because you're involved, like you said, you're now writing actual specs for CSS and with the, especially the mixins and functions one seems to be like one of the features that people are still saying that's why they're hanging on to using SAS.
00:38:28
Speaker
Uh, so I'm just curious if like at this point, you're secretly trying to kill SAS by bringing all of it. features to native CSS and instead. i do think Natalie at one point said, well, it would sure make my life easier if SAS died,
00:38:44
Speaker
which is fair. But no, I mean, I think, you know, it's like we, uh, we put more and more features in the browser, um generally on the web,
00:38:56
Speaker
um But it doesn't make servers go away. um And I, in my mind, SAS is the server side language and CSS is the browser side language.
00:39:07
Speaker
um And for some people, you're not going to need a lot of server server logic. That's fair. Don't use it um And if we can move these features, every time a feature moves from one to the other, it changes dramatically because they're fundamentally different languages.
00:39:26
Speaker
SAS is running on the server. It doesn't have access to the DOM. It doesn't know the structure of your DOM. um it doesn't ah It doesn't do anything dynamic.
00:39:39
Speaker
It can't say... what what are these user settings and adapt to them the way that CSS can. It doesn't have a cascade. it doesn't It's an imperative language. It has loops.
00:39:51
Speaker
CSS doesn't have loops.
SAS vs CSS: Design Tokens and Logic
00:39:53
Speaker
um CSS is declarative. They're just sort of fundamentally at their core languages that work differently. So when variables move from one to the other, they become...
00:40:04
Speaker
properties, they're actual properties, but they're custom properties. And what does that mean? Well, they cascade and they do all these different things, right? So yes, we have variables in both languages, but they work very differently.
00:40:19
Speaker
And if you understand the differences, you can start to think, well, which of my design tokens make sense as a SAS variable versus a CSS variable?
00:40:30
Speaker
Or um in our case, we'll often have SAS variables that generate CSS variables. Um, and you know, we get the advantage of, we can loop through the SAS variables.
00:40:44
Speaker
We can use that to generate both the CSS custom properties and utility classes if we want them. And so we can do all this other stuff that is server side stuff with those design tokens.
00:40:57
Speaker
And then also we can have them as client side design tokens. Um, So that's how I'm thinking about it. And I think functions and mixins is going to be a similar thing.
00:41:08
Speaker
They're going to work differently, um which is going to mean that they are in some ways more powerful and in some ways less powerful. ah And so we're going to find that ah they replace some of the use cases of SAS mixins and functions.
00:41:24
Speaker
And at that point, you can look at your code and be like, do they replace my use cases? Yeah. Do they replace all of my use cases? um And if you're able to dump SAS, great, go for it.
00:41:38
Speaker
ah There's no reason to hold on to dependencies you don't need anymore. But i still I still know where my projects get large enough or intricate enough that I want server-side logic, oh that I want loops, and i want to be able to do things like that that are server-side problems and not pass that off to the, the user's, um, uh, processor.
00:42:08
Speaker
Like I don't need to make your computer figure that out because my computer can do it first. Uh, so I don't think SAS is going anywhere. We're not replacing it exactly, but we are replacing it for some use cases that the browser can do better.
00:42:24
Speaker
Um, and so. Yeah. and For some people, SAS will not be as as necessary anymore. And that's great. For me, o there are some sites where I won't need it anymore and some sites where I still will.
00:42:40
Speaker
Yeah, that's how I see it too. ah everything you Everything you were just describing is a lot of the reasons I still use it with being able to have variables that aren't <unk> sort of like the non-exposed ones that they don't be, you know, it's the the higher level tokens that you don't want to become custom properties because they don't really need to be.
00:42:57
Speaker
And then looping over things is fantastic to make utility classes and to make the custom properties for you and everything else you need. It's yeah, ah super handy. And definitely, you know, I'm throwing it together a really quick site. I don't need to bother with it. But if I'm doing something larger in scale, it really, it's worth it, in my opinion. Also, it's there for tools.
00:43:17
Speaker
So like... I mean, i early on to learn how custom properties worked, I did build a version of Susie using custom properties. Never use it. Don't use it.
00:43:29
Speaker
But it's on Code 10. You can find it. um And it's just sort of like an extreme use of custom properties in CSS to figure out like what would it look like to build that same sort of system.
00:43:40
Speaker
Use grids instead. You're fine. You don't need this. But it was a fun experiment. um But yeah, you sort of see the differences and custom properties aren't built for this kind of tool building in the same way. So it still makes sense for a lot of tools to um be built in a language like SAS.
00:44:02
Speaker
And I still like SAS a lot better than um a lot of the other options that people use for doing. i mean... CSS and JS is sort of like take your server side CSS logic and then also put that in the browser, um which seems like to me, like making the browser do more than needs to. But I also, i struggle with the fact that um JavaScript doesn't know what a color is.
00:44:30
Speaker
It doesn't know what a length is. It doesn't know ah how many pixels are in an inch. Um, SAS knows these things because SAS is a design language built for CSS.
00:44:42
Speaker
Uh, and so I like that I can take a color and manipulate it. Um, which in JavaScript, I would need a separate library for colors. And then I would need a separate library for lengths or something. I don't even know if that library exists or I'm like doing this, something where I'm removing the units and then casting it to a number and I don't know like why am I doing all that SAS knows what these things are um and CSS also knows what they are and I can do calc and now relative colors right yeah
00:45:18
Speaker
yeah On that, just ah it I think it's an interesting point, just because, like say, with something like color mix or or relative colors and and these things that are coming that we used to have the pre or post processes for um versus, say, nesting or mix-ins and other things.
00:45:36
Speaker
I guess even even maybe to an extent, all of them um are more developer experience related rather than like, you know, it's not like the has selector that just makes new things possible that we couldn't do before.
00:45:46
Speaker
Yeah. Yeah. um I know some people think that the more tooling space things should just stay as build, like you the build tool should do that.
00:45:58
Speaker
And then when it comes to like functionality of the language in terms of like what we're able to accomplish, that should be the features that are more focused on.
Balancing Developer Experience with CSS Features
00:46:05
Speaker
I'm just curious, I guess, I like seeing these things come in. Like you said, like when you bring in variables that become custom properties, that does change yeah everything because they they work so differently.
00:46:16
Speaker
um But like, I guess at what point do you think there is a cutoff of like, we should never bother bringing this feature to CSS because we could just use a tool instead? Or should all of these things potentially maybe eventually go into the language itself?
00:46:31
Speaker
I think it's always a question of, um I mean, in terms of like, do we put developer experience stuff in CSS? The answer is like, well, I mean, the whole language developers use it, right? Like it has to be.
00:46:46
Speaker
If nobody wants to use it, then it's not a good language. Everything is balancing developer experience with the features. And so there's not, I don't think there's a clean line there in the way that people want there to be um between like, is nesting a new feature or developer experience?
00:47:03
Speaker
developer experience thing, it does work slightly differently than SAS nesting in some interesting ways that if you dig in, there's, there's like a hidden new feature in there, um or a foot gun, depending, depending if you know, it's there.
00:47:18
Speaker
ah ah Because it's it's it's doing something slightly different fundamentally. But yeah, I don't think there's a clean answer there. But I would say, like, in every case, it does change. Like, we're going to get functions are going to be dynamic in CSS. Yeah.
00:47:37
Speaker
ah And that's different than how they are in SAS. um So they're going to make they're going to give you different output in different places in the cascade.
00:47:48
Speaker
um That's interesting. um You can't do that with SAS. Uh, so I don't know what features exist that are purely, um, I mean, to some extent there's changes that we make that are just like, look, we have, we have these two properties that do slightly different things.
00:48:14
Speaker
Let's figure out some way to clean it up just so that it makes sense in the language. Um, and, And you could say, yeah, that's that's no op or no no change to the functionality. It's just better developer experience. I think that's great.
00:48:31
Speaker
We should have a better developer experience. The devil developer experience should be excellent. So like go for it. um I think you just run into problems of like, yeah ah if it's purely developer experience and the developer experience isn't that much better and browsers don't want to waste their time on it. That's where you're going to, but yeah, I don't know. Otherwise i don't think there's a clear line. The harder line is like SAS is, uh, imperative. It's got loops, um, control structures and CSS doesn't want to go there.
00:49:09
Speaker
Um, it's a declarative language. So things are going to be fundamentally different. um And that means some things aren't going to move into CSS. Or when they do, they're going to be very, very different.
00:49:20
Speaker
Right. Yeah.
00:49:23
Speaker
Cool. Awesome. I really i appreciate your your time with all of this. Before we started recording, I said I'd respect your time and I think we've gone way over what we'd originally had on the calendar. So I do apologize ah for that.
Rapid Fire Questions with Miriam
00:49:35
Speaker
No worries. ah Before i let you go, i do have five rapid fire questions that I'm starting to ask all my guests. So they're... so there Most of them are questions that I get asked a lot and I don't have good answers for. So i'm just trying to cheat on my homework a little bit here to hopefully steal good answers from other people instead.
00:49:56
Speaker
ah We're going to start with a really easy one, though. Just a softball to get warmed up, I guess, is ah do you have a favorite unit? Favorite unit? Oh, yeah.
00:50:08
Speaker
Boy, ah no, my favorite is that I can use calc to combine units and I can use min and max and clamp, which are also calc functions internally.
00:50:22
Speaker
um My favorite is that I have all these units and I can combine them in weird ways. That's my favorite unit. yeah that' Yeah. That's awesome. That's a good answer. Yeah.
00:50:34
Speaker
I like that people sometimes worry that CSS has too many. i think it's great. I love all the units. Yeah. Yeah. Anytime i get complaints about it, I'm like, this is a feature, not a bug. it's here Yeah, they mean things.
00:50:49
Speaker
Yeah. And it's like, you don't know, you until you don't until you need that unit, you might be like, ah, that's completely useless. And then you come up with that perfect use case for it, where you're very happy that you have it. so Right.
00:51:02
Speaker
Yeah. um I am very happy that we now have like small viewport units. Go look up SVW or SVI. Those are useful. ah And for a long time, we didn't have them.
00:51:15
Speaker
So, you know, I think that's one I'm excited about. the the The S ones, I think, are more exciting than the than the L or the D, the larger the dynamic. Yeah, I was really excited for the D. And then once I started actually using it, I'm like, oh, the S one actually the useful one out of all of these. Okay, that's good to know. Yeah, in most situations, yeah. Yeah.
00:51:37
Speaker
Um, with all of the new stuff that is in CSS or like, let, since, you know, you're, you're on top of the things that are very soon happening as well, I'll let you go into like something potentially in the future.
00:51:52
Speaker
Um, but your favorite new thing that's currently happening in CSS. ah Currently happening, I'm real excited about like relative color stuff um and like color contrast functions in CSS. yeah I think those are super exciting.
00:52:09
Speaker
um I mean, also, to me, old, but just starting to roll out style queries. um I think there's a lot that we can do there. um They've been in Chromium, but they haven't been in WebKit or Gecko.
00:52:23
Speaker
So those are starting to come out everywhere, and that'll be fun, too. But relative colors, that's pretty cool. Yeah. They're both, they're both awesome. At style queries, I started coming up with some actual, like you always like do the simple demos and then when you start actually coming up real, like good use cases for it, you're like, oh, this is going to be good when I can, yeah.
00:52:46
Speaker
Is there a CSS best practice that you secretly disagree with? Uh, secretly? No, I think very vocally.
00:52:57
Speaker
Something you know, maybe not everyone would know that you, you don't agree with it. Well, um there's, uh, I think there's, there's probably several, but, um, the one that's on my mind, because I'm supposed to be writing a blog post about it. And we did just did an odd bird live stream, um, with, uh,
00:53:21
Speaker
ah with the chair of the working group, Alan Stearns, was i I'm curious. I think we could do better with responsive typography.
00:53:34
Speaker
I don't know that the current clamp calc situation that we've got going on, I don't know that it does what we want. um And so I'm really interested in revisiting that best practice.
00:53:45
Speaker
I don't think it's awful. i just, I think maybe there's something else there we need to think through. um So, yeah, I think that that's the one on my mind.
00:53:56
Speaker
Yeah. That's interesting. Cause I heard from some design systems people that, especially with like the container using it with the container units or container query units, just on how it like all of it sounds really good, but then they're like, from a design system perspective, the inconsistencies that it starts throwing up, they were driving them bananas and like, oh, I never would have thought of that. Yeah. Totally. Interesting. Yeah.
00:54:17
Speaker
I mean, I guess at a higher level, um you know, I've spent a lot of time working on the Cascade. um And there are a lot of strict rules people have about um what selectors you're allowed to use. And I think all of them, all of them are bunk.
00:54:33
Speaker
um You should happily use... ah IDs. You should happily use names of elements. um You should use as many classes as you need to say what you mean.
00:54:46
Speaker
um And you should learn what importance is for and use importance when it's ah the right tool for the job. um The entire cascade, the cascade is your oyster.
00:54:59
Speaker
ah You should use it. So there's a um the The strict rules there from them and other places i are a best practice I disagree with.
00:55:11
Speaker
Yeah, that's an interesting one because I've definitely gone back and forth on the important thing. And then the one that really... And I guess part of it might be because i have a lot of my audience is more beginner.
00:55:22
Speaker
But when it's trying to explain importance within cascade layers, and I'm just like... the The added complexity that that just throws out. It's about that back complex, but for somebody who's just learning, say specificity in general, then it's like, oh my goodness, what's going on here where it reverses. And that seems to throw a lot of people off. So it's like the main thing to understand there is that importance mostly exists for users.
00:55:48
Speaker
It's there for people browsing the web to be able to override us. That's what it's for. um There are places in our architectures where it might make sense, but only if we're interested in participating in that bigger game of like, who gets priority between the browser, the user and us.
00:56:10
Speaker
It's part of that game. um And so it's part of the Cascade Layers game 2 then, which is sort of a subset of that. um So like learning how that system works and how Cascade Layers work, I would say if you're not playing with Cascade Layers, probably don't use importance.
00:56:26
Speaker
um Because... ah learning how it does that reversal um is sort of fundamental to the feature. ah So learn that. But when you start playing with layers, you might start to see where it makes sense again.
00:56:41
Speaker
Right. Even though it's more complicated yeah than than the way we learned it before.
00:56:48
Speaker
The next question is probably not the best one for you because you've literally added things to CSS, but it would be if you could add... I guess maybe it would be what will... The question normally would be if you could add one feature to CSS, what would it be?
00:57:01
Speaker
ah Maybe it would be what would what's your next thing that you plan on writing a spec for?
Current Focus and Future Proposals
00:57:07
Speaker
Well, right now i have to work on mixins and functions. That's the that's the the next set I'm working on.
00:57:14
Speaker
um But I'm trying to think if there's things that like are sort of blocked right now that I would like to see unblocked in CSS. um I mean, well, actually, there's there's a theoretical one.
00:57:28
Speaker
um I think you can find it in the latest WebKit post about masonry. It's sort of hidden in there. There's a proposal for, like, what if we had more ways of combining layout layout methods? What if you could do basically grid in one axis and flow in the other axis, normal flow in the other axis? Yeah.
00:57:51
Speaker
Because in some ways, masonry is grid in one axis and something else in the other axis. It's sort of like almost flex box in the other axis. um yeah What if you could do that with flow? What if you could write articles where you can float things into a column?
00:58:08
Speaker
ah ah Things like that. I think there's a lot of really interesting potential down this road of like, what if instead of entirely separate layout modes. We had ways of combining layout modes in different access.
00:58:23
Speaker
I want that. Yeah. That's interesting. ah Something, I guess there'll be a lot of discussion about before we get anywhere yeah with that. Yeah.
00:58:35
Speaker
Um, and this last question is one that is the one question, no matter what I'm always asked, but what do you think about tailwind? Oh, I don't care.
00:58:49
Speaker
um it does not solve a problem that I have. Uh, my, my sense with it is that it's solving a problem that we created for ourselves.
Opinions on Tailwind and Staying Updated
00:59:01
Speaker
Um, and, uh, great. If you've created that problem for yourself and tailwind helps you solve it. Okay. um I'm not going to tell you ah not to use a tool that helps you day to day, but I think avoiding the problem in the first place, ah not causing the problem in the first place, and then we don't have to solve it.
00:59:28
Speaker
I don't know. It seems to me also now like, you know, they're... they're sort of reinvent, they're running into all of the problems that CSS was there to solve.
00:59:39
Speaker
yeah And so they're having to like re-solve all of the CSS problems. And okay.
00:59:47
Speaker
Maybe when you ah see that ah the problems we were dealing with and how we solved them, maybe just, ah yeah, burnne learn how it's done in CSS.
00:59:57
Speaker
But yeah, whatever. It's all CSS under the hood. um You do you. I don't know if that was a i' took a very good answer.
01:00:10
Speaker
So yeah, I just want to say thank you so much for your time and for joining me today. And if anybody does want to follow anything or everything that you're up to, what's the best places to follow you these days?
01:00:21
Speaker
Oh, good question. um I mean, oddbird.net sort of has, is the hub of things. That's my web development agency with couple other people.
01:00:35
Speaker
um And we have a newsletter that goes out. ah You can, from there, you can find my social media, and my Blue Sky, my Mastodon. and follow me in those places if you're interested. Awesome.
01:00:48
Speaker
Yeah. Thank you so much. it was a ton of fun talking about this and I appreciate your time. And that's it for this week. Thank you so much for listening. And until next time, don't forget to make your corner of the internet just a little bit more awesome.