Episode 011: Miriam Suzanne on CSSWG, Container Queries, Scope, and Layers

We learn more about Miriam's journey into webdev and onto the CSSWG, what she finds frustrating about how others use CSS, the why behind the three specs shes writing, and what she personally wants to use container queries for most.

Show Links#

Transcript#

Claire:

Hi.

Steph:

Hey,

Claire:

I'm Claire

Steph:

and I'm Steph.

Claire:

And this is Word Wrap.

On this episode of Word Wrap, we're going to talk to Miriam Suzanne, who is actually our first guest. Um, she comes to us, uh, as a member of the Sass core team, as well as the CSS working group. And she also works at OddBird.

So you've probably seen her around lately talking about container queries or maybe the layers, um, uh, working spec or even, um, uh, scope, which are all really cool things. We're going to talk to her a little bit more about, just kind of, you know, how she's gotten into this whole thing. How does one get into the CSS working group, for example, um, you know, uh, just all those different kinds of things. We're just going to have a little bit of a chat. So, um, without further ado, Steph, do you want to ask our first question or do you want to say something first Miriam?

Miriam

No. Hi, thanks for having me.

Steph

We're super pumped to have you. Um, so yeah, so, uh, my question will help us kind of learn a little more about you, for sure. What is your first memory of being interested in web development?

Miriam

Oh yeah, so there's a, there's a few, there's a few little places. I mean, I remember I took a class at one point. And I think it was because somebody asked me if I could help. We had worked on a project together and they were like, can you put together a website of what we've done? Um, and they sort of showed me, um, Dreamweaver and I helped put some images into some tables. Um, and then I took a class on it and was kind of like, Oh, there's this new CSS thing that looks kind of interesting, but I didn't really do much in that class.

And I think it was actually a couple of years later that my theater needed a website and I was like, okay, I better actually learn this thing and see if I can build a website for the theater. And that's, um, my brother sent me a link to Eric Myers CSS Edge site. I don't know if either of you saw that, um, back in the day, he just had all these experiments, uh, and I got obsessed with it.

I was like, Whoa, this, this new thing is so weird and cool. Uh, I want to play with it. Um, so yeah, from there it grew.

Steph

That's awesome.

Claire

It sounds really similar to how I, how I kinda came into it. Just like tinkering with stuff and like, Oh my gosh, this is so cool. Yeah. So that's really cool. So, uh, fast forwarding to kind of like what you do now, or even just like kind of how you've, um, How you've built upon like your process and stuff. What is, what is one thing you do in every project to like, you know, it could be a Easter egg, it could be, you know, whatever. What, what do you find yourself doing in every project.

Miriam

Resetting box model?

Steph

That's fair.

Miriam

Um, yeah, I don't know that I have any. Uh, I mean, these days I've been throwing my, I have a little tool that does like light mode, dark mode, change themes, um, all built with custom properties. And I've been throwing that on a lot of my projects lately. Um, not really client work, just all my personal stuff, um, because it's fun and I already built it. So I'm not sure. Claire Yeah. I will say that one thing I really love, uh, just about oddbird.net in general is just like. Um, just a bunch of different things that like, it seems like I believe your slides and stuff like that are on there as well. And, um, I just think it's really cool that you've built like all that custom tooling and stuff. So it's really cool.

Miriam

Yeah, it's either really cool. Or it's like an obsession with side projects.

Steph

I can relate.

Miriam

Great

Steph

No problem. Or a coping mechanism. Choose your thing.

Miriam

Exactly.

Steph

I love it. Well, yeah, so we, um, you know, we definitely do want to hear about, you know, Maybe, is there anything you haven't like kind of, you know, find yourself talking about when it comes to your involvement on CSS working group or, um, you know, that path in or anything related to that?

Miriam

Anything I haven't found myself talking about? Yeah. I mean, the working group is interesting and I, I don't know a lot of the history of it and how it's developed. Um, my understanding is that a couple of years ago they added this invited expert role. Um, and that that's part of why I'm there now. Uh, and part of why, uh, various other people are there, uh, is because of this invited expert role that is for bringing in people who are not W3C members.

W3C membership has this whole thing. The W3C is like, any organization that has enough stake in the web that they, or in web technology, even, um, that they pay a lot of money to join the W3C. Uh, and it's kind of an absurd amount of money and there's no way that OddBird could reasonably join that W3C. All the member companies get to send anybody they want to these working groups.

Um, But now there's this invited expert role. That's like, Hey, can we bring in a few people that aren't part of, one of these big organizations, um, and that sort of coincides with a lot of the really dramatic, uh, activity happening in CSS. I don't know how closely related those are or what other changes were happening at the time. This could be correlation and not causation who knows. Um, But I'm interested in that opening up even more, or like, how do we, like right now there's no path to becoming an invited expert, besides somebody in the group going, Hey, that person had an idea. Maybe they, maybe we should invite them. And it would be interesting if there were actually like a path for you to learn spec writing, um, and become involved. Uh, if this were sort of laid out more clearly, and I wonder if that's possible.

Steph

Yeah, that would, that sounds really interesting. And I think that's always been something, you know, I've been writing a lot about CSS, but that's definitely the part that's a black box to me and partially just cause I haven't taken time to super look into it.

Um, I think that, um, I know you were recently talking about how, um, It's it's the - there's been an effort to make what's happening more public, like through GitHub and GitHub issues. And definitely, uh, got more exposure on that one. I was, you know, looking into container queries, so that's really cool that that's coming out and I'm not sure that that's really publicized super well either. Um, but then again, not everybody is necessarily interested in that part. So.

Miriam

Yeah, and it can be a bit of a fire hose to try to follow it all. There's a lot of things happening in CSS all at once, all the time. And really what you find out is that most of the people have working group are focused on one or two of those things.

And you're sort of, maybe you're skimming through some of the others. And it's nice that in the phone calls, um, you know, even I'm listening in, even on issues that I don't have a strong opinion on, or don't have a lot of knowledge about. So I'm learning all about Ruby text in CJK languages and stuff. And I'm like, okay, that's interesting. And it's not my specialty. I don't know it. But yeah, if you want to follow it, you have to sort of like find the issues that you're interested in. They are all public, all the conversation is public, uh, and follow those issues.

Claire

Yeah. It, it seems like you have to really purposefully follow them because those conversations move really quickly it seems like sometimes.

Miriam

Yeah. Until they don't.

Claire

Yeah. Until they don't yeah, exactly. So it's really cool to see that, uh, and to see that happen in a public sphere. And like Steph said, like, I didn't really know that a lot of that stuff was very public until I, you know, submitted that issue about container queries. Um, which I admittedly felt a huge imposter syndrome kind of heard about it was just like, Oh no, I'm going to type this silly idea into, into a GitHub issue and someone's going to look at it. So I thought that was really interesting.

Miriam

Yeah. Well, very quickly somebody filed a duplicate issue. Um, so you weren't alone in your thinking on that.

Claire

Yeah. I was really, I was really happy to see that, Oh, this is a duplicate of my issue. I was like, yeah.

Steph

Ah ha!

Miriam

I mean, that's actually, how I got into the group in the first place was CSS layers. I hadn't even fleshed out anything about it.

And that's sort of the best time to approach the working group is when you have sort of a rough concept, but you haven't flushed it out. The working group likes to get in on things early.

Um, and sort of help with what direction they go, but I just posted and under great duress. I mean, Jen Simmons had to insist several times that I post this suggestion because I had all of the same, uh, sense of being an imposter and not knowing and fear of being judged for it or something. Um, but it was that suggestion of what if we had some sort of layering in the cascade that we could control as authors. Um, that's when they reached out to me and said, sure, can you write the spec?

Steph

Yeah, that's pretty that's awesome. I mean, it's a, and obviously it's all has been super amazing work and, you know, um, I think I've seen like, you know, just sporadic chatter that, you know, the, how great the explainers are and, and things. So all that's been amazing for all these things and obviously extra and you know, of your own doing those, those documents. So that's all been awesome. I was wondering like about, so of course, container queries being the star child of the moment. Um, um, what would it mean for your own projects to have that available?

Miriam

Well, We have a sort of a side project that we've been talking about for a long time at OddBird. Um, I don't like any of the collaborative text editing tools out there. I don't like any of them. There is not a single one that I like. You either are editing all at the same time all right on top of each other, or you're sending files back and forth, or you have to understand git and do some like version control, but then you have to be a nerd. Um, and while some of us are, I would like to collaborate also with other people who aren't going to learn git. And as I've been building demos for container queries, I've been realizing that building a text editor of the kind that I want, the way I want it to work for collaborative writing, I want container queries all over the place in this.

Every, every demo I'm making is sort of a, like, What if my, what if my text editor could do this? Um, and that's like, you know, we're going to run out of space sometime when you have multiple documents open at once. And how are we going to adjust font sizes when there's less space? How are we going to, uh, lay them out on a page? Um, there's just all sorts of stuff in there that I want container queries work.

And then there's sort of more universal, like. Yeah, every time I build a media object or card or whatever I'm doing this, uh, dance of, when does it turn vertical? When is it horizontal? And you could wrap all that up in a component and be done with it. Um.

Steph

Yeah, super cool. That's an awesome idea. Yeah, that'll be fun. And that, I think that whole dashboard, I mean, you didn't specifically say dashboard, but the dashboard kind of idea where you have multiple views of whatever kind that'll be really neat.

Claire

Yeah. I think it, I think it, um, componentizing is like, the responsive media or responsively layout kind of idea too, because like, you're not thinking about it as terms of page you're thinking about in terms of components. So it's just really cool to see that, um, see that happen. Uh, the two other specs that you were talking or that you've been talking about lately are layers and scope. How do you, how do you find that they'll change, how you use Sass in your projects or just CSS in general? Like what, what do you find the biggest, um, What are the biggest takeaways from those two things?

Miriam

Yeah. With layers it's a little bit yet to be seen. Um, in some ways, one of the things that excites me is being able to write defaults that are very specific. I, I like sometimes having very specific defaults and layers will give me that ability to say, hide this away. Uh, make it, it's not important. It's just specific. So I'm excited about that.

And on the other end, I think, you know, in a lot of my personal projects, I'm not running into specificity issues. It's not a big concern on a lot of my personal stuff. When I'm working with clients all the time, I'm dealing with, uh, you know, they've integrated three different frameworks because they wanted the, uh, the date picker from one of them and they wanted the drop-downs from a different one and they wanted, you know, Uh, and just being able to all these frameworks, each one has some like internally consistent set of rules for how they're gonna handle specificity, but they don't have any set of rules across frameworks for how all frameworks should handle specificity. So you've got to somehow like capture, I don't know, figure out how you're going to work around their internal rules. And layers would let you just say like, Bootstrap goes here. Uh, whatever, whatever other frameworks I'm using, here's where they slot in. Here's when I'm overriding them. Here's when I want them to override me.

Claire

Yeah. I think that just saying that, um, you know, I think. Um, I'm, I'm a huge proponent of TypeScript and I'm not going to get into that or anything like that. But I think that it's one of those things where layers would actually be a good self-documenting kind of thing of like your layers. And like, we use bootstrap on this project, but if you want to extend those styles or whatever, put them in this other layer or whatever, and then you're able to do so without having to worry about the intricacies of like, What importance they've used here or what specificity they've used there.

And so I think that's really cool. Cause like, as much as I'm not a proponent of frameworks, I think that they have a very useful place and I think this would allow them to slot into a certain place if that makes sense. So.

Miriam

Yeah, absolutely. And I feel like I've been, when I teach CSS, I teach it in layers. Like building up, building up layers from your most general to your most specific. And Harry Robertson inverted triangle is a great sort of visual representation of that. And layers would just make all of that extremely explicit. You would just define the layers of your triangle and then put things in them. The other thing that I think about is uh CSS-in-JS people often talk about wanting a way to just say this rule should override this rule. I don't want to worry about specificity. I don't want to worry about source order and layers give you that. Um, they defeat both source order and specificity. And you can just say, have this rule override that rule. Um, you could do that in a constructable style sheet or whatever, and deterministic style waiting, or whatever they want to call it now.

Claire

That's true. Um, what do you think, what about scope? Like in terms of how you'd use that? How, how would you expand on that?

Miriam

Yeah. Scope is interesting because we've used it to mean loss of different things in code. Uh, I mean, we have in a lot of programming languages, we have lexical scope, which is like a variable in this document is scoped to this document and it won't appear. You know, JavaScript modules or Sass modules or whatever are a type of scoping to a document and CSS doesn't work in that way. And there's another thing that's been like scoping to a component in the web component sense where we sort of draw a hard boundary around a custom element and nothing gets in or out of that boundary. Um, but that boundary is drawn in the HTML, not in the CSS. It affects the CSS, but it's sort of a hard boundary drawn in the HTML.

And what I'm looking at with scope is trying to find, like, what is the CSS-y way of thinking about it, uh, where scope really has to do with the cascade and with, um, defining from the style side uh, how do I want to narrow the targeting of this selector in ways that I couldn't before. Either saying I want to make sure that when I'm styling the title class, I only want to style the title class that is directly inside of the post class. Well, and maybe not directly, but belongs to post. And it's not inside post content. It's somewhere between post and post content. I want to style that title and we don't really have a way of expressing that right now. Um, so my scope proposal mostly focuses on that. Like how do we, how do we narrowly target just, it belongs to this component. And that's very much based on the way that CSS modules does it, the way that Vue scoped styles do it.

So in a lot of ways, I imagine on the sort of Vue-like projects that I'm doing, uh, where right now I use Vue scoped styles. Um, in part it's a self-inflicted wound in those, uh, In those frameworks where they're loading the CSS in a random order. So you can't count on source order. So you sort of scope things so that you don't have to deal with that problem.

But I imagine that same system just becomes CSS native. Yeah. I hope that answers the question. My proposal is very much based on what I've seen in CSS-in-JS tools that do it in this sort of lightweight way. And hopefully the migration path would basically be that Vue internally flips a switch, uh, and you don't notice a difference. Um, but then you can also write it by hand pretty easily without having to do all the magic that they're currently doing.

Claire

Yeah. And I think that kind of highlights just how the web has, you know, has innovated in and of itself. Like, you know, a lot of, uh, if we're going to use a JavaScript API is like a lot of APIs that came about in ES6 um, came through like, you know, were inspired from jQuery or like, you know, things like, um, uh, I don't know this specifically, but support, for example, reminds me of modernizer and certain things like that.

And, and so I feel like scope is another extension of that, where it's like, you know, um, Angular with it's a componentized styles or CSS-in-JS or Vue's scoped styles are kind of becomes one of those, like, okay, let's do it natively. And we all benefit from the performance increases that, that, that basically brings.

Miriam

And part of what's taken scopes along is that, and, and probably will still take a little bit for us to really focus it in, is that different people do want it different. There is a desire for that sort of web components, shadow DOM style of scope. And we built that. Great. And maybe we can add improvements to it, but it's a separate thing from what Vue is doing with scope or what CSS modules is doing the scope. And so we have all these different meanings of what scope is and all of them are useful. Uh, so maybe we have to come up with some new words, but.

Claire

Words aren't that hard to come up with.

Miriam

Call them all, Bruce.

Steph

Okay. So hopefully what would be, I'm hoping this will be a fun question, but, um, What CSS features do you feel are misused that we currently have? Features or properties, whatever.

Miriam

Hmm. I mean, I think a lot of people don't quite understand why importance is there or exactly what it does. And that's, that's kind of okay. Like, it, it, it kind of works the way people think, even though it's intended for something totally different, I think it will be interesting when we release layers. And layers treats importance the way that it was originally intended. I think people are going to start figuring that out, but you know, that one comes up all the time. Uh, everybody, everybody has strong opinions about importance.

I generally think anytime anybody has a hard rule about something in CSS, never do this, always do this. That's usually where I get mad. I'm like, no, actually like importance has a purpose and we can learn its purpose and we can use it in, in good ways and not abuse it.

So great. I think I, I get frustrated when people like dismiss CSS grid because they can force a solution in Flexbox. Those sorts of things bug me, or like, I don't need. Or, you know, putting all of your CSS variables only on the root selector and never playing with CSS variables in other ways. And that's a limitation of some of the polyfils, but people now think it's a limitation of the feature. Um, and I get uh, I get annoyed by like, Oh, you learned that from a, polyfill not from, not from the actual thing. But all of those are, you know, do what you want. Um, I'm not, I'm not the custom properties police.

Steph

I kind of wondered if you would bring up custom properties. Cause I, uh, I'll validate that I felt the same way. I didn't get it from polyfills. I don't know. I think just most of the early tutorials did it that way and it didn't even cross my mind until within the last year that maybe I... probably from consuming some of your stuff and you know, like, um, Lea Verou's stuff like. Finally. Oh, okay. It actually makes more sense. Most of the time it is - correct me if I'm wrong - more performance, probably negligible most of the time, but to like, keep it a little more locally scoped depending on what it is.

Miriam

Yeah. Depending on what it is.

Steph

Yes. Or things with. I think Houdini, when I kind of made me realize, you know, you're not going to stuff, real stuff related to that, but in the root either, probably.

Claire

Speaking of root custom properties it is really interesting to go on built some websites and just see just a, just a laundry list of different properties that are on the root because of that specific thing. So it's very interesting that you brought that up.

Miriam

Yeah, I think it's also, that also is a reminder of where pre-processor variables can be helpful.

If some of those custom properties aren't actually ever changing in the browser, they don't need to be in the browser.

Um, so. We don't have to make the browser do everything just because it can, we can still, pre-process some things. We still have servers and we can use them.

Claire

I dunno. Serverless.

Do you have another question Steph?

Steph

Oh, I was just gonna say, I think we're almost through, but I definitely, you know, just a couple to end on. Like, what are you excited about for the future of web development? It doesn't have to be CSS.

Miriam

Oh, wow. What am I excited about?

Steph

You're working on super exciting stuff!

Miriam

So, yeah, well, um, I just had a great chat with Jen Simmons about like, where should grid go next? Um, and what are the, what are the sort of issues that we can fix in grid and what are the next big features that we can bring to it? Those were sort of two separate questions. And I'm sort of interested in just always those sort of, those sort of conversations, where are we running into roadblocks? How can we fix them? Uh, where could we take web design to the next level? So I'm always open to ideas. Um, I'm lucky that I get to work on this a lot and not everybody else gets to do that. So if you have ideas, send me ideas, I'm interested.

Steph

That's interesting. Yeah. That'd be fun to see what starts rolling out. Um, even uh just ideas from that. Cool.

Claire I think we've got one more question. Uh, and this is pandemic related, cause you know, we're, we're in this weird quasi state where like people are vaccinated, but like. We're still not really sure if we should like get out. But Steph and I have joked about doing like a, and I don't think it's actually like completely joking. I think we're serious. Um, but, uh, going and traveling and stuff like that and meeting people that we've met online. And, um, I believe you're in Denver. Right.

Miriam

Uh huh.

Claire

And so, um, if we were to come to Denver, would we do, or would we be able to like, do a live show or something like that? Or just, you know, have some fun.

Miriam

Oh, hell yeah. Yeah, yeah, definitely. Um, my partner and I are both vaccinated now, so sure. And I mean...

Steph

So next week?

Miriam

Sure! At one point. Um, I was talking with some writer friends about doing like a, like find a circuit of Amtrak and, um, do a roving conference, uh, that stops in different cities and people like speakers join at some point and drop off at whatever point they want to. And you stop in different cities and do a conference. So do something like that.

Steph

And have a mystery dinner, because.

Claire

That would be amazing.

Steph

That sounds super cool.

Claire

Yeah. Awesome.

Steph

Awesome. So we're at the end. So the stage is yours for our brand new segment that we just came up with this morning. Stage is yours for a word wrap, not literally a rap. You can rap if you want, but any last thoughts, basically?

Miriam

I don't think I can rap. Yeah. W uh, no, I mean, keep writing CSS and, and have fun with it.

I mean, the web is sort of this absurd art experiment in my mind. And, um, I love it when we're playing with that experiment.

Um, people that are doing just absolutely weird shit with CSS is so cool. Uh, CSS, art, and particularly. I, I would love to see more CSS art that plays with resilience. How's it going to fall apart? What does my art look like in an old browser compared to a new browser? Yes, I've, I've made it specifically for Chrome, uh, because I'm using all these new features that Chrome has, but here's how it falls back into other browsers or, um. Yeah, do weird stuff. Weird stuff is great.

Steph

Awesome.

Claire

I love that. I absolutely love that. IE6 anyone? Okay.

Well, thanks for coming on the show today, Miriam. Uh, it was really great to just hear things from your perspective and also, uh, hear about container queries and layers and scope. Um, even though those two, the two last ones, layers and scope still have more, um, you know, flushing out to do. It's still really cool to see that web evolve and, and everything. So, yeah.

Miriam

Yeah. Well, thank you. It's... I'm a big fan of the show. So keep it up.

Steph

Thanks for joining us on another episode of Word Wrap. Be sure to subscribe on your favorite platform, or pick up the RSS feed on wordwrap.dev. You can also catch us as @wordwrapshow on Twitter. Until next time!

View All Episodes

Support Word Wrap

Show Links#

Transcript#