S1:E9
[Todd Libby]: 00:04:08 Welcome to the Front End Nerdery podcast, a podcast about front end development and design. I'm your host Todd Libby. My guest today for the ninth episode is co-founder Oddbird, Sass core contributor, W3C CSS Working Group invited expert. And one of my favorite people working with CSS today. Miriam Suzanne. Miriam, how are you today?
[Miriam Suzanne]: 00:30:12 I'm all right. How are you, Todd?
[Todd]: 00:33:01 I'm doing well, thank you. So why don't you tell the listeners a little bit about yourself?
[Miriam]: 00:39:06 Oh yeah. I mean, you, you covered the highlights I suppose. Yeah, I've been doing this for a while now, started around 2006, freelancing and, and built oddbird with my brothers in 2008 and been going from there. Sort of ended up here accidentally coming out of theater and writing. Theater needed a website. So, I learned how to make websites.
[Todd]: 01:14:15 I think that's how most of us learn how to make websites. That's how I learned. Someone I know needed a website way back when, and I said, oh, I can do that. How hard could it be?
[Miriam]: 01:29:09 Yeah, that's how I got my first client.
[Todd]: 01:34:05 So why did, my first question, then jump right in here, is how did you get started in as we, you just touched upon in your web development and design journey?
[Miriam]: 01:49:10 Yeah, I mean, it really was the, the theater. I wanted to build a website for us. I think I had played with Dreamweaver a little bit, but I wanted to be able to update shows more easily. So, I reached out to my brother who was a developer and said, how would you do this? Can you help me build this site? And he said, I can teach you how and he helped me write a little PHP script to read a flat file database where just every line was a show and comma-delimited.
[Todd]: 02:26:08 Yep
[Miriam]: 02:27:15 And he sent me a link to Eric Meyer's CSS edge page. I don't know if you remember that site that had all sorts of wild experiments in CSS.
[Todd]: 01:49:10 I do
[Miriam]: 02:40:16 And I was hooked
[Todd]: 02:42:18 Yeah
[Miriam]: 02:43:00 I mean that that sort of experimental playing with this weird, this weird language that like it's different on every device and different on every browser. And has all these interesting sort of, I don't know, I mean, all these interesting hacks that Eric Meyer was playing with. I just started exploring it and trying different things and seeing what I could get to work.
[Todd]: 03:12:20 Yeah, that sounds sounds a lot like my path was the same thing. Just Eric’s site, Jeffrey Zeldman’s site
[Miriam]: 03:23:17 Yeah
[Todd]: 03:25:03 A List Apart, you know, all those sites got me really hooked as well.
[Miriam]: 03:28:18 Yeah. Yeah. CSS Zen Garden.
[Todd]: 03:31:21 Yes. Yes, that was, that was also a big one. And there was another CSS site back then. And it's escaping me right now, of course. But so, speaking of CSS, I wanted to, this is going to be the CSS episode, I guess. Cause I've seen, I've seen a few of your talks, a couple were the same talk, but it gets, you know, it's still, it's still great seeing that, that talk that you just gave recently at what was it? Smashing comp CSS summer. So, my first question, as far as CSS goes is if well, I think you can tell me, talk about it. Is what are you and others in the working group, the CSS working group, working on these days with CSS?
[Miriam]: 04:25:11 There are so many things we couldn't get through them all. I mean, it is, it is such a fire hose being on that working group, just new features being developed all the time. And a lot of it is very exciting. And some are closer to coming out.
Things like see the CSS colors five the fifth level of that module has like LCH colors and lab colors and a color contrast function which is fantastic and color modification functions. I'm super excited for that. And that's already starting to land in Safari. I've been helping out a little bit on that, but mostly focused on some updates to the cascade. So, cascade layers was sort of the first one that brought me into the group.
I proposed, we do something to allow authors to explicitly layer their specificity instead of only having a heuristic to work with. Like specificity, which has sort of a, a good guess that may be more general styles are lower weight than more specific styles. So that's what got me into the group, and I've been working on that cascade, cascade layers. And then Google asked me to start working on container queries and see if we could push that.
So, I've been playing with that a lot too. There's still some really hard problems to solve. It's one of these really weird, like we're re we're there, we have a working prototype and we're also far away from having it totally specable and reproducible across browsers. So that frustrating place where you're like we have it and we don't have it.
[Todd]: 06:24:05 Right.
[Miriam]: 06:25:17 But I think we can solve those problems and get through. So, container queries would be very exciting. And then next on my list is scope looking into what CSS scoping might look like. In my mind building off of what CSS modules and like view scoped styles and other tools like that have done but making it native to CSS.
[Todd]: 06:50:23 Yeah, that's I, I follow a little bit unusually on the accessibility side of things and that's, that's a fire hose in itself. But you know, I, I see things here and there and I'm like, I wish that I had enough time to, to delve into what's going on.
Cause it all seems so great. I did do a little stuff a while back with you know with the color contrast. Gave a talk on it and I did see somewhat, I think it was Adam Argyle had mentioned CSS, the, the CSS five module. And it looked, you know, and I saw his, he gave a talk somewhere that I watched.
I can't remember where, but it looks so cool. The stuff that was coming out. So, look forward to that. What, in CSS, what's new in CSS that you really are excited about that you want to let people know about?
[Miriam]: 06:50:23 Yeah, I mean, that's one of the most exciting to me. I mean there's a lot of other stuff, I mean, it's like, I think, I think Subgrids are going to start rolling out in the Chromium browsers, the Blink browsers soon. So that's pretty exciting to me.
Subgrid is really powerful in that it helps you not worry about the nesting of things inside of a grid. Currently, a grid only applies to its children. And you can do some hacks to get a grid applied to the grandchildren or something of an element. The subgrade allows that information to flow both ways. So, grandchild elements can help size the grid which is very powerful.
[Todd]: 08:47:11 Yeah.
[Miriam]: 08:48:20 You know, some of the stuff that Jen Simmons and others have been doing around aspect ratio is very cool, especially, already eliminating jank in the rendering of images if you apply width and height, post intrinsic aspect ratio has helped the page layout. Even if the image hasn't loaded. Yeah, I'm trying to think what else there's just sort of so much going on that it's hard to remember which thing I'm most excited about at any given moment.
[Todd]: 09:21:21 Yeah. Yeah. I, I, you know, again, it's kind of like what we're working on, on the WCAG side of things.
[Miriam]: 09:29:13 Yeah.
[Todd]: 08:48:20 It's, it's the same with me. I'm excited to see these changes that are down the road with, with WCAG 3.0. And you know, like you said, this is, you know, forget what you're excited about now. And, and yeah, I get that. I get that. So,
[Miriam]: 09:50:20 Yeah, I just came off of the CSS working group call for this week. And we resolved to add LVH, DVH, and SVH units along with VW and Vmin, Vmax. But that gives us that helps us solve that longstanding problem with viewport units, where they cause bugs in Safari, on mobile, because of the different way that they're handled.
And this gives us an explicit way of saying, I want the smaller value, I want the larger value, or I want that dynamic value. So that's also a pretty cool thing that will help get rid of a very common hack
[Todd]: 10:31:21 Yes
[Miriam]: 10:33:11 which is always nice.
[Todd]: 10:33:11 Yes, yes. Speaking of hacks, because I was thinking about this yesterday because I had in some code that I revisited, I had some conditional commenting hacks that I was able to get rid of finally. How is CSS evolving to the point where we can no longer rely on or need those hacks?
[Miriam]: 11:03:24 The specifically the browser hacks? Yeah,
[Todd]: 11:09:15 Yeah, yeah, browser hacks.
[Miriam]: 11:09:16 I mean part of what's, part of what's happened there is I mean conditional comments that goes way back.
[Todd]: 11:16:12 Yeah
[Miriam]: 11:17:15 But like, you know, we had conditional comments and then we tried out prefixed properties, but that sort of became a mess. So that was abandoned pretty quickly. It's some of them are still lingering, but that's no longer the approach we use.
And really what's happening now to try to make all of that less of a problem is there's sort of two parts of it. One is making sure that the specs are reproducible not just in terms of how the feature should work, but how the feature should fail. So, what happens when the author writes something unexpected or we're in these weird edge cases?
We tried to define those educations in the specification and that way you don't have one browser doing one thing that then people rely on, and another browser has done something else in the edge case and then there's a conflict. So that's one part of it. And the other part is that people are releasing features behind flags or browsers are releasing features behind flags as the testing phase.
So that means like with container queries, container queries are behind a flag in Chrome right now. And they're not ready and they keep changing. So, people have made demos, but you'll see like demos with the old syntax, demos with the newer syntax. And there will still likely be a few more adjustments.
So, by the time that actually comes out, there will be an agreed upon syntax. We won't have several versions in the wild that were actually used in production. Those flags sort of keep authors from overusing experimental features, live.
[Todd]: 13:10:12 Yeah, exciting stuff. Yeah. I just making, making the, it's the experience in the work easier is I guess the goal of what you and I both do for people. And I mean, we just, you just mentioned it a little bit ago and I want to just kind of step back to it was Subgrid. I
have been waiting for Subgrid so long since Rachel Andrew announced. I talked about it at An Event Apart. And I've been watching that on the Chromium site and seeing all the emails, you know, people saying, oh, when you gonna, when you gonna implement it, when is this going to be implemented?
And I'm just still sitting on the edge of my seat, waiting for it to be implemented. I, I use it on my, on my site currently, but of course it has what supports and there's a fallback I have for that as well. But hopefully with the, how do I put it? The death of internet Explorer?
[Miriam]: 14:34:09 Yeah
[Todd]: 14:35:15 We can finally get rid of that. So, there was a few things I wanted to, to, to touch upon as far as so like @layer could you go into a little bit about @layer?
[Miriam]: 14:54:03 Yeah. So, @layer it looks similar to at media or something, right? It's an, it's an at rule block that you can put other selectors and our rules inside of it. And a layer can be given a name. Doesn't have to be given a name. Layers can be nested. Don't have to be.
But it allows you to sort of create your own. You can think of them as one step above specificity or if you want to think of it that way as a higher specificity than IDs. So, selectors inside of a layer only are compared to other selectors inside the same layer and then layers, override each other.
So hopefully this allows us to, instead of using selector, hacks or bang important to try and manipulate what rules override what rules, we can try to be explicit about the architecture that we're creating, and we can say My defaults are in the bottom layer. Everything should be able to override the defaults, even if it's a very specific default, highly targeted default, I still want to be able to override it easily.
[Todd]: 16:18:08 Yes
[Miriam]: 16:19:01 And then I can say, I'm using some third-party framework. I want it to fit in at a specific place. I want to have some styles that the framework can override, and I want to have some styles that can override the framework. So, we can start setting up exactly the order that we want and defining those layers ourselves and controlling them and giving them names so that we understand what's happening.
And I think it'll also allow framework authors to, they could break down a framework into several layers and say, here you don't actually have to put the entire framework in one place. You could say my defaults, then the framework defaults, then my base styles, then the framework components styles, then my overrides for the framework or something like that. So, it should give us a lot of control there.
[Todd]: 17:14:09 Yeah, which is, I, I look when I make things to have control, because for instance, when I was doing the last WordPress site I did and they, it was, I won't mention the theme. I won't mention the theme cause I have on Twitter, but they took out the outline for everything.
[Miriam]: 17:43:21 Oh, don’t do that.
[Todd]: 17:46:02 And there was, exactly. And there was you know, of course, no way to override that. So, something like this where I can say, okay, I want to override that rule from this theme. I can do that with layer and having that control, I think will give developers so much more power as far as what they can do.
[Miriam]: 18:14:18 Yeah.
[Todd]: 18:15:16 Is that? Yeah.
[Miriam]: 18:17:07 Yeah, that's the idea. I think one of the issues with it is going to be that legacy browsers won't be able to see what's inside of a layer.
So, there may be a slow process of picking up this new feature or ways of doing it progressively enhanced where we say, okay I've got a base set of styles that go to all browsers and then newer browsers and support layers. We'll get these additional styles on top.
I think that's the biggest danger with it is just that, like, how do we move, start moving things into layers while browsers are catching up. But I think hopefully browsers will be able to release this fairly rapidly and with most browsers now being evergreen. Doing this like four-to-six-week release cycles. Hopefully this can happen in the next year or two.
[Todd]: 19:15:03 Yeah, that'd be cool. So, I wanted to jump from, @layer and go over to @scope and talked about, @scope. So, could you explain a little bit about @scope?
[Miriam]: 19:25:19 Yeah. @scope is of, of the three specs I'm working on it's the most theoretical. We, we don't have a spec text written out yet. I have a proposal up at css.oddbird.net is where I keep all of my sort of notes on what I'm working on and links to specs and links to issues.
So, I have a proposal there that you can see, and the idea is, right now, things like CSS modules or view scope styles they allow you to take in a single file component. For example, you say these styles only apply to what's in this template. Which has upper boundaries, like the root of the template, the root of the component.
So, for a header, it’s the header element, maybe. But then also you might have lower boundaries for those styles. You don't want them to apply to everything inside of the header or everything inside of a post. You want them to apply to just the post template itself. Not what's getting inserted inside of it.
So, we've got this idea of an upper boundary and a lower boundary. The upper boundary works a little bit like, like message selectors, but the lower boundary is sort of this new idea. So, the idea is that we want to be able to target styles just between two things. So, say we want to style the tabs component, but only from the tabs, the outer box of the component to the contents.
And we don't want to style inside the contents. We just want to style this outer ring, this donut. So, my proposal is an @scope rule that takes both a root selector and an optional set of lower boundary selectors. And then it would apply to everything between those.
And you'd be able to use the scope pseudo class to target the root. And you'd be able to also target the lower boundaries, but not inside of them. There's a couple counter proposals there and there's some interesting things to work out around how powerful should this be in the cascade?
[Todd]: 21:49:17 Okay.
[Miriam]: 21:50:10 Scope, I mean, by default it could have no impact on the cascades. That's one option. Is it just impacts selecting and it doesn't impact the cascade at all. But there is some interest in saying the closer scope, when scopes overlap, the closer scope should have some priority.
And then the question is how much priority does that priority override specificity? I think not, but some people think it should. And it's reasonable. I think there are sort of use cases either way, and I think there are workarounds either way. If we go with one there's ways to work around it, to get the other effect.
Likely using layers or something like that. I'm voting for a fairly low impact in the cascade. So, saying proximity should override source order, but it should not override specificity.
[Todd]: 22:51:01 Yeah.
[Miriam]: 22:52:04 That's my proposal. There are still lots of discussion to have here, I mean, there's also Lea Verou has been pushing the idea of a lower boundary selector either instead of the scope proposal or in addition to it. Some way of just with normal selectors, applying lower boundaries to them. So, lots of discussions still happening on that one.
[Todd]: 23:19:14 Yeah. And that's, I mean, that's the work we do in, in the W3C is there's a lot of discussion that goes on.
[Miriam]: 23:29:13 Yeah
[Todd]: 23:30:13 And a lot of, you know, and, and with, you know, and I'm sure you find it in the CSS working group, as much as I find it in the groups that I'm in on the WCAG side of things, where it's just constant kind of, I guess, you know, people presenting their point in the counter points, as you said, and then just working that out to something that everybody can agree on for the most part anyways.
And getting that and moving on with it and hopefully putting that and giving that to the public. How can people get involved with the future of CSS? And you know, when I hear you say CSS is a living language and you know, can you expound on that?
[Miriam]: 23:30:13 Yeah. I mean, there's always active discussion happening that the main place to get involved is on the working group issues that GitHub issues for the working group. So that's, CSS working group drafts is the repo under the W3C organization.
And the issue board there it can be a lot of issues that are being discussed regularly because a lot of different people are working on a lot of different parts of the language. But, if you can find the issues that you're interested in search the issue board find things, list new issues. Absolutely anybody is welcome to make proposals. I was I made my first proposal and it turned into cascade layers.
And I didn't have that proposal fleshed out. And I actually recommend people bringing ideas before flushing them out. The working group likes to have that early discussion about what even direction do we want to go with this idea? So, feel free to post issues, ideas you have for the future of CSS.
And feel free to participate in the conversations that are happening there. But also, just a lot of us that are on the working groups. Are posting those same things to Twitter and to our personal blogs or our company blogs or elsewhere on the web and interacting there is also fine.
That's also we like having feedback. So, the more people are involved at any level, either just giving feedback when they see a question or jumping into the issues and getting more active those are all ways to get involved.
[Todd]: 26:26:08 Yeah. That's how, you know, I started getting into the WCAG discussions. Is talking to people on Twitter and then eventually joining the W3C and then from there joining groups and, and going from there. So yeah, that's, that's how I usually tell people they can get it, get involved as well.
So, and, and we, you know, as, as I know that the CSS working group, you all enjoy having people talk to you about that. The same holds true for the WCAG side of things as well. Because both communities are very, very open, very, very friendly and very open to hearing from people and what they have to say.
So, yeah, that's great. So, I wanted to, again, to kind of go back a little bit and kind of at I don't pick your brain, I guess, is what I'm coming up with here. But what is coming up with CSS that isn't quite ready for prime time that really excites you?
[Miriam]: 27:47:24 Yeah. I mean, top of that list is probably colors. The fact that they're starting to roll out in Safari being able to do color contrast based on a color variable. I mean, so right now I can do some color contrast, checking in my sass code or something in a pre-processor and select which variable I want to use based on that.
But it's not dynamic. It's not actually responding to what's happening in the browser. And you can't do that with CSS custom properties. You can't check the value of a custom property in a pre-processor because the custom property doesn't resolve until the browser is almost done rendering.
So having the ability to actually do things like check color contrast, live in the browser and change what output we're going to get. And we also have the ability to add a base ratio contrast ratio. So, you can say either pick the color here with the highest contrast which will, if you add black and white to the list, they will always be one of those.
Or you can say pick the first one here that hits my minimum ratio. And hopefully this makes some of the accessibility work around colors easier and more automatic. And we can get some best practices around that. I mean, the other advantage of this new color stuff is having a perceptual color space.
You've probably noticed in RGB or HSL, HSL in particular, if you change the lightness or if you keep the lightness the same, but you have a blue and a yellow, they have very different visual lightness, even though that L value is the same. So that's not true in lab or LCH colors.
They're attempting to be perceptually uniform. And if you keep the lightness the same, you'll get the same lightness. So again, I think once we're able to use that consistently it's a huge win for design systems built to be accessible combining LCH with color contrast in the browser. I'm super excited about that.
[Todd]: 30:34:08 Yeah, yeah. That's, that's something that also as I kind of read into it more and more kind of it gets me excited because that flexibility of that you just talked about would make it so much easier to do a color contrast check. So, and you, you just talked about Sass, and I wanted to talk about Sass a bit because I enjoy using Sass in, in projects here and there. And so, is there any, any work that's being done in, in anything new going on in the world of Sass?
[Miriam]: 31:17:21 Yeah. Let's see, I mean, we sort of been releasing a lot of features lately. There were a lot of features that were sort of being held back by two things. One was building the module syntax. So, this ability to have sort of namespaced modules and very clearly decide what is part of the current document scope. And get rid of sort of global scoping for everything.
So that landed, I think it's been a year or two now that we've had modules and scoping in Sass, and that's allowed us to add a lot more functions. So, we have a whole math module you no longer need to install some special plugin to get say exponential functions. Which are required if you're trying to do contrast checking or something like that. So, we can now do so much of that natively.
I mean, also we got extended handling of maps for sort of Sass’s version of objects key value pairs. And there's just a lot of, a lot of power coming out of that. And a lot of new features landing. So, I'm pretty excited about that. And I'm excited about thinking through, you know, what, what is Sass need to do to support these new color functions?
What is Sass needed to, to support something like layers or scope? Are there, are there places that we can add to it from the server side? Yeah. I don’t know, it'll be interesting to see.
[Todd]: 33:08:13 Yeah, definitely. So, my next question about Sass is I've had a few people approach me no, no, no means an expert on Sass. I'm dangerous enough with it as it is. But I've had people ask me, you know what's the relevance these days, and as CSS evolves, will it be relevant in the future? So, can you, can you address those two points?
[Miriam]: 33:41:20 Yeah. I mean, I see it sort of like are asking, are servers still relevant now that we have now that we have single page apps run by JavaScript on the client side. And the answer is, yeah, they're different.
So, I think it's really great when these ideas like variables in CSS moved from Sass to CSS, but they also change in that move. And custom properties are different from Sass variables, and they sort of have different strengths and it can be really powerful to use both. There's no reason that we have to choose one.
We will always have some problems that we can solve on the server and other problems that are better solved on the client. And as long as that's true, we need clients and servers. And we need code that runs on both to handle those different things.
[Todd]: 34:40:09 Yeah.
[Miriam]: 34:40:09 So, I think sort of like you know, the internet comes out and books still exist but they're, they're sort of carrying less cultural weight. The internet has taken some of the weight off of books, but it doesn't make books go away. It just sort of rebalances exactly how we're using them
[Todd]: 35:02:04 Yeah.
[Miriam]: 35:02:06 and exactly what they have to do for us. So, I think the same is true for Sass. We can take some weight off of it, but it can still be useful.
[Todd]: 35:09:19 Yeah. I, I, I had the answer that is, it will, Sass won't be obsolete, you know, and, and that's a great analogy with the, you know, the internet and the books, you know, books aren't obsolete. I prefer reading from a book to be honest, instead of a an
[Miriam]: 35:27:21 Yeah.
[Todd]: 35:28:05 e-published version. I like that tactile feeling. I like that to have that book in my hand. and you know, I’m saying, well, it's not gonna, you know, you're not going to see sass just poof, go away. It never, you'll never see it again. But you know, the explanation you gave was it was great. So, I've got to definitely have people watch this and say, here's your answer. So,
[Miriam]: 35:59:19 Right, yeah, I think the other thing is it can, it can continue to be a testing ground for new ideas in CSS. We, we can move a bit faster because we're one language we're not all of the browsers trying to agree on something. We can, we can put something out there and then browsers can decide if, if it's useful.
[Todd]: 36:21:07 Yeah, yeah definitely. So, getting away from the Sass and CSS I saw because I always take a peek very, very early at the An Event Apart situation and I see you're on the roster for fall summit. So, without giving too much away, what's the talk, going to be about?
[Miriam]: 36:49:23 The talk is about container queries, where we are with them and, and sort of a bigger idea of where they tie into where we are in terms of design on the web. So, I'm thinking a lot about you know, responsive web design was a term that we gave to both, both sort of a broad idea, a way of working.
But in that sense, a lot of people had already been doing it. There was a lot of stuff that was responsive before responsive web design. But it also specifically said here's a set of tools to do it, to make it easy, to make it powerful, to make it robust. We can use percentages on everything including images and then we can use media queries to adjust how those percentages are interacting change the layouts.
What's interesting now is we're still very much doing responsive web design in the big, the big, the big idea of it. But we're sort of in a new place with tools and a lot of these new features that we're talking about, container queries, scope, layers, all of it is focused around this idea of what Jen Simmons has been calling intrinsic web design.
Which is still sort of broadly responsive. But the idea is we don't need to put percentages on everything anymore. We have these different types of flexibility fractional units, Flexbox we can mix and match using CSS grid and Flexbox we can mix and match units. So, we don't actually need the whole grid to be in a single unit.
And with things like container queries, we're making it even more component based. So, each component is responsive in its own way to its own context. So, I'm trying to sort of think about that as a whole, because I like big ideas and putting, putting these little tools into the sort of the bigger picture and where we are and where we're headed.
[Todd]: 39:00:20 Yeah. Yeah, I got to get my ticket to that still. Is that a new, is that a new talk?
[Miriam]: 39:09:00 Yeah, I mean, I think you'll see some of the same material, that's been in the container queries talk we've seen. But and also some new stuff.
[Todd]: 39:19:21 Yeah, cool. Definitely have to get a front row seat to that on my couch because that's virtual, not, not in person quite yet,
[Miriam]: 39:30:24 Yeah
[Todd]: 39:33:17 but hopefully we'll get there soon.
[Miriam]: 39:33:17 Yeah. So much more fun when we can do it in
[Todd]: 39:36:22 Yes
[Miriam]: 39:37:13 in person
[Todd]: 39:37:13 Yeah. And Denver, which I met you in, in Denver was an absolute blast because I got to talk with everybody, a lot of different people and you and Jen and, and, you know, it was a great it was a great conference, had a good time and I really suggest, when I tell people that's my go-to conference and they say, oh, well, it's too expensive. I say that is a, that it’s an investment.
I don't, I don't see it as just a trip to a conference. It's an, an investment for me anyways. Because of all the knowledge that is there, the people are great. The speakers are more than happy to talk to people, and it was, it's such a good time. So, An Event Apart fall summit and that was October, was it?
[Miriam]: 40:37:20 Yeah that sounds right.
[Todd]: 40:37:20 I think it was October. Fall.
[Miriam]: 40:39:05 Yeah.
[Todd]: 40:42:18 So, one, one last question before I get to the final questions here, and it's kind of one that I, I get, I get asked a bit and maybe you do too. Why is CSS so undervalued sometimes, do you think?
[Miriam]: 40:42:18 Well, I think there's a couple parts to that. One part of it is that it's really powerful in some simple ways. Like you can, you can, without learning much of the language, you can do a lot.
[Todd]: 41:25:05 Yeah.
[Miriam]: 41:26:12 And so a lot of people, I think only get that far and feel like, okay. And I think the same is true with HTML, right? Sort of like you can do a whole page only knowing that divs exist. And it's a bad idea, but you can do it.
[Todd]: 41:43:05 Yeah.
[Miriam]: 41:43:17 And so if you don't look deeper, it can be easy to get stuck at that point. And I think that's, it's fine for some people to be to stop at that point. We don't all have to deep dive into everything. We just have to understand that there is more depth there and we can hire people who have that depth and understanding.
So that one part is just that there's a lot of powerful stuff we can do very easily. So, so some people don't bother looking deeper. I think the other part is it doesn't work like other languages. It's and I, I, I don't think we've we talk about this enough. I mean, there's a lot of sort of banter about the cascade.
The, the cascade is important, but I think that the cascade is like fundamentally different from any other language that anyone is using. And people try to apply object-oriented language to CSS or, or functional language to CSS. And there's some interesting things we can learn from doing that, but CSS is a cascade-oriented language, and we need to talk more about what it means to be cascade oriented and how this changes the way we think and what our programming paradigms that we use in a cascade.
Because functional paradigms don't make sense in a cascade. And object-oriented paradigms some of them apply some of them don't. So, yeah, I think it, it hasn't been given that, that attention to what are cascade paradigms? How do we teach cascade paradigms?
Well, there's a lot of people giving that attention, but it can be hard and especially if you're coming from another language, and you're used to something else I think one of the reasons that CSS makes sense to me is because I didn't know any other languages before I started with CSS.
[Todd]: 43:42:24 Yeah.
[Miriam]: 43:43:15 But then learning JavaScript was very different to me. It was like, oh, this works in a very different way. So, I think that can be a barrier to doing that deeper dive. People see the cascade as some sort of bug instead of as a different paradigm.
Or it's, it’s something confusing if you're coming from another language. But you have to sort of dive in and understand what cascade orientedness means. It means styles coming from everywhere. It means everything is contextual intentionally. The only reason we have design on the web is because we have a contextual language to do it.
The, the early web documents said, we'll never be able to design on the web because devices and users are different, and they need different things. And we can call that user preferences, we can call that accessibility, but different people need different things on different devices. And what would, what does he even mean to design on a web that is that different everywhere?
[Todd]: 44:53:11 Yeah.
[Miriam]: 44:53:22 And the cascade is the answer to that question. But it means your code may or may not run. That's sort of the magic of it.
[Todd]: 45:02:16 Yeah.
[Miriam]: 45:02:23 CSS works and doesn't work at the same time
[Todd]: 45:06:02 Right.
[Miriam]: 45:07:15 in every content.
[Todd]: 45:07:15 Yeah. Yeah. I agree with all of that. Yeah. Yeah, definitely. So here are the tough questions. I save these tough questions for the last. Just three questions I asked everybody at the end towards the end here. So, the first question is what about the web these days excites you and keeps you excited in what you do?
[Miriam]: 45:37:23 Yeah, I mean, I think the web is always lots of different things at once. There's lots of different people doing different things. And some of those, some of what's happening on the web always disgusts me and some of what’s on the web, always excites me.
And I'm excited about improvements that make the web more accessible, the work that you're doing and ways that we can help with that in CSS, make CSS default more accessible, make the tools easier. I get excited because I think, like I said, accessibility is sort of the core of the cascade.
It's why we have the cascade is so that we can make it accessible to every device and every person. So, anything that's pushing us that direction makes me excited
[Todd]: 45:37:23 Yeah. CSS and accessibility are kind of to me anyways, there, there’s a partnership there along with HTML and along with you know, it can, it could be JavaScript too. It can be a lot of different things, but just as long as there's a partnership with accessibility, there's that piece where if it's available to everybody, no matter what that's accessibility.
[Miriam]: 47:07:21 Yeah
[Todd]: 47:11:23 So even, even UX as well, cause good UX and good accessibility. I just tweeted this out yesterday. Those two go hand in hand.
[Miriam]: 47:17:05 Those are the same thing.
[Todd]: 47:18:08 Yeah.
[Miriam]: 47:18:15 Those are the same picture.
[Todd]: 47:20:00 Yeah, So second question. If there was one thing you could change about the web that we know today, what would that be?
[Miriam]: 47:32:04 I mean, so I immediately think of the Tab and Eleka, I think maintain this Wiki page of all the mistakes we made in CSS. So, I immediately think of that page and I'm sure we can add a link to it.
[Todd]: 47:48:04 Yep.
[Miriam]: 47:48:24 But CSS mistakes. But I think, yeah, I don't know. It's a, it's a hard question because the web is so big, and the web is so many people working on so many different problems. I there's a lot of places where I wish we had built accessibility in better from the start.
I mean, I think in a lot of cases, we're sort of retroactively trying to solve that problem in some ways that have been broken. I think also at some point HTML sort of stagnated, right? And there's a lot of useful components now being discussed in the open UI group. And if we build them right, we're building accessibility into them and we're making it much easier for people to say not rebuilt select menus from scratch.
But actually, just use native select menus and be able to style them and have them have all the accessibility features built in. So, I suppose I wish there had been more attention on that from the beginning, but I also sort of understand why, how that got missed in some places and, and the web changes and our needs change.
And we're always going to have to, I remind my team regularly that we're agile not because it keeps us from making mistakes, but because it helps us respond to the mistakes. And I think that's true of the web. We're never going to avoid causing problems for ourselves down the road. All that we can do is make sure we're able to respond to those problems. So hopefully we're doing that.
[Todd]: 47:48:24 And every time you mentioned that, and I know we've, I think we've talked about this on Twitter a little bit and maybe somewhere else where every time you mentioned that I think a box border, a box sized
[Miriam]: 49:48:12 Oh yeah.
[Todd]: 49:48:13 border box and how I wish it was in every browser as a default. But there that piece again
[Miriam]: 49:57:09 Yep.
[Todd]: 49:57:10 where everything was built upon all, you know, got built upon and built upon built upon
[Miriam]: 50:05:13 Yep.
[Todd]: 50:05:14 until finally there's nothing, we can really do about it.
[Miriam]: 50:11:21 Yep.
[Todd]: 50:12:16 But it's a nice dream to have, I guess. Yeah, and, and so I have a shortcut so that I can just get that out of the way now that I, you know, I've, I've, I've, I’ve dealt with that and as far as, okay, it’s not going to change Todd, no matter how much you want to wish for it.
So now we might've touched upon this earlier, but I'll ask this because I, this is the last question in my three favorite, part of front-end development or design that you really liked the most that you nerd out about? And I'm pretty sure we've talked about something, but
[Miriam]: 50:59:06 Yeah, I mean, for me, it's, I, I get excited about CSS for sure. And playing with it and I, I do a lot of little experiments. I get really excited by the people doing like CSS art,
[Todd]: 50:12:16 Yes.
[Miriam]: 51:14:13 and really pushing it to the extreme that's, that's so fun. t I think very systems, so like design systems have always been an exciting thing to me and thinking about how do we, how do we use Sass to build better tools for design? How do we improve CSS to make design more systemic?
And I think that's a big part of what CSS has been doing lately is really focusing in on how do we, how do we describe, how do we describe these systems? And, you know, we get logical properties out of that. And they help us respond to writing modes in a more systemic way.
So, all these things are like giving us more powerful to put algorithms in CSS, to figure out what is, what does the design mean? That's sort of what the, all of CSS is at its core, it's like if it's not an imperative language, if it's a cascading language, we have to convey meaning not just what to do, but why, why do we want this?
We want it to be this size because we're, and we're using REMS because we want it to be relative to something. Everything in CSS can be relative to something else that that's systemic. So, I, I get excited about all the things that push us there.
[Todd]: 52:38:18 Yeah, and I do too, because I, as I said earlier, I, I like to peek in and see the conversation, the working group's having. And it's really awesome to see how far CSS has come for me anyways, because I'm at that point in life where I remember there wasn't CSS.
[Miriam]: 53:06:04 Yes.
[Todd]: 53:07:22 And then I remember, you know, having to write it well, not having to, I was as much as everybody else was writing it in the tags as well that we were using to create websites and stuff back way back in the day. So, it's, it's not only fun to see the work being done but just how far it's come for me.
[Miriam]: 53:33:23 Yeah.
[Todd]: 53:34:13 And it's, it's like opposite ends of the spectrum now, as far as night, it’s night and day. It's, it’s all these things like, like you mentioned, CSS art. I saw a couple of things on CodePen that absolutely blew my mind as far as these landscapes in the Baroque paintings, for instance is another one.
[Miriam]: 53:53:03 Yeah, yeah.
[Todd]: 53:54:00 And I'll put that link in the show notes as well. Those are phenomenal. And I’m like I could never, well, I could probably do that, but it would take me a while to do that. So
[Miriam]: 54:07:03 One of the things that I'd really like to see CSS artists playing with and I haven't seen a lot of it, but I think it would be interesting is progressively enhanced CSS art.
[Todd]: 54:17:19 OK
[Miriam]: 54:18:08 So, like CSS art that maybe has some simple, simpler look to it on an older browser, but works. And like, instead of breaking on older browsers, can you make it beautiful on the whole spectrum of browsers and devices? Not just responsive to viewports
[Todd]: 54:38:01 Right
[Miriam]: 54:38:01 but like actively playing with progressive enhancement in CSS art. And I think, you know, I understand why people haven't played with that.
[Todd]: 54:47:01 Yeah
[Miriam]: 54:47:05 It's easier to like, know the art piece you want to make and make it. But I think that would be a really cool way to show off CSS.
[Todd]: 54:55:11 Yeah
[Miriam]: 54:56:01 Like, can you do a Baroque painting that falls back to cubism in a cool way intentionally?
[Todd]: 55:01:07 Right? Yeah, that would be cool. Wow. I didn't even think of that. That would be cool. Now, I want to see that now. I'd love to see that now. So, as we come up on time, I like to close out the podcast with my guests, letting the listeners know what they currently have going on. And where people can find you online if you, if they have questions about CSS or sass or whatever you're doing? So, the floor is yours
[Miriam]: 55:32:10 All right. I'm TerribleMia on Twitter. I'm sure we can provide a link. That's where I'm most active in the community that, and on the GitHub issues for Sass and for CSS. And anybody is welcome to reach out any time. And those are the things that I'm mainly working on now is I'm working on what new features do we need in CSS?
What new features do we need in Sass? And sometimes also with the open UI group I've been working with Brian Cardel and John, John Neil, and Dave Rupert and others on ideas around tabs. What tabs might look like as a component in HTML. So, I get to spend, I feel very lucky that I get to spend a lot of my time thinking about those issues and writing specs for them and coming up with demos and proposals.
[Todd]: 55:32:10 Yeah, that's great. So, thank you Miriam for joining me today. Thank you for your time. It's been a great conversation. And you know, I'll be looking out for all this awesome stuff and that the CSS working group is doing. And definitely, hopefully going to catch you on An Event Apart, any other conferences you got coming up that are, that you'll be presenting at?
[Miriam]: 57:04:12 Modern web conference
[Todd]: 57:06:12 OK
[Miriam]: 57:06:17 is coming up, I think in sometime this summer.
[Todd]: 57:10:04 OK
[Miriam]: 57:11:00 I'll, I'll be there prerecorded. I think those are the only ones that I have lined up right now. So,
[Todd]: 57:19:19 Great. We'll put the, we'll get the links for those and put those in the show notes as well. So again, thank you for joining me today. I appreciate it.
[Miriam]: 57:27:17 Yeah. Thanks for having me. It's been great chatting.
[Todd]: 57:30:10 Yeah it has. So, thank you listeners for tuning into the Front End Nerdery podcast. I'll be back next month with a new guest new conversation about front-end design, development or other topics. If you would please rate this podcast on your podcast device of choice, like subscribe and watch on the Front End Nerdery YouTube channel. Links to transcripts and show notes are there I'm Todd Libby, and this has been a Front End Nerdery podcast. Thank you. And we'll see you next time.