Copy of Miriam Suzanne - Is Sass dead? === [00:00:00] Noel: Hello and welcome to Pod Rocket Web Development Podcast, brought to you by Log Rocket. I'm Noel, and today I am joined once again by Miriam Suzanne, co-founder of Odd Bird, here to ~cover,~ go into some topics,~ uh,~ relating to her recent talk. Is SaaS dead yet? Welcome back, Miriam. How's it going? Miriam: ~Uh, right. Uh, ~Uh, it's nice to be here. Thanks for having me back. Noel: ~Of course, ~of course. ~Uh, ~you're always a pleasure to talk to a wealth of knowledge.~ I feel like you are,~ you know, a lot and are good at presenting it. And I, ~it's always, it's always just, ~it's always a pleasure ~to, ~to dig in and pick your brain a little bit. ~So,~ Miriam: Oh, ~well ~thank you. Always lovely to be here. Noel: ~Of course, of course. Um, I guess, yeah, like, kind of kind of to, to set this up to,~ to frame this a little bit,~ um,~ I know you've ~kind of ~been iterating on ~a couple of, ~a couple of topics that this talk kind of centers around ~is what, ~what's been your goal as you've ~kind of ~gone out and, ~you know, ~and in this recent,~ uh, you know, um, ~run of talks and stuff you've been giving, what have you been trying to convey? Miriam: Yeah, I think for me the big question. ~Uh, ~is that ~there's, ~there's a few of these,~ um,~ weird quirks. ~Uh, ~that exists behind the scenes in CSS,~ um,~ that are things people run into, I think all the time. ~Um, ~like when I get questions, the question [00:01:00] seems simple, but the answer has to do with something like inval at computed value time, or understanding how the value resolution process actually works with properties in CSS. And it's just the sort of thing that for a long time wasn't really taught. Because, ~you know, ~CSS you can say background pink and you get a pink background. Like, why do you have to learn value resolution? It's pretty direct, right? But as soon as we start adding in variables,~ uh,~ we start to get these problems,~ uh,~ except that people avoided a lot of them by only setting variables on the root. And then everything is just inherited and everything works the same way. But as soon as you start to get more complicated in that value resolution has a lot to say. ~Um, ~and it's the process that the browser uses to actually figure out what styles to apply and how to apply them. ~Um, ~so I've been trying to figure out ways to teach that. ~Um, ~and those problems become even more exposed,~ uh,~ when we're [00:02:00] talking about functions and mixings. ~So, uh, ~CSS day invited me to talk about functions and mix-ins,~ um,~ and I ~sort of ~presented the basics of how those work and then pivoted into. Really for, to be ready for functions and mix-ins, you have to start learning how value resolution works. So that's been ~the, ~the big overall thrust of this, these talks. Noel: Yeah, that makes sense. ~Um, I, ~I, sorry, ~I'm not, ~I'm not trying to sound like tired. ~I, ~I think there is something, there's something to like, I think like declarative languages in general seem to have this problem maybe, or this ~like, um, ~thing where that the pattern of user comes in. ~It's like, it's so, ~the language is ~so, um.~ Specific to the domain in which it operates and it can do so much that it's kind of like, I don't really need to worry about most of what it's doing under the hood. 'cause I ~kind of ~just do the thing and it works. But then I think it leads to this like ~misunderstanding or maybe just like not, not even misunderstanding, just~ lack of understanding of ~like, ~what's going on. ~Do you, ~do you feel that there's something unique? To CSS or like a way in which the, I don't know, we could be presenting this [00:03:00] to devs that aren't in the CSS Headspace all the time to ~like, ~make this less painful and scary. ~Like ~what's the, ~you know, what's your, ~what's your kind of framing there? Miriam: ~Well, um, ~my answer to the first part of the question doesn't get to the second part. ~Uh, I have, ~I have less of an answer on like, how do we solve this with devs who aren't thinking about it? ~Um, ~although I would like to, I would like your answer, but ~on the, ~on the first part, I think there is definitely something,~ um,~ special about CSS in having this problem, which is that, ~uh. It, ~it has two,~ um,~ extremely competing goals right from the start. So like right from the first proposals coming out for how we might style the web and styles on the web are coming out several years after the web has already started to become popular. ~Um, ~and at that point, it's not that the web is un styled, you can't render text without. Giving it a color, giving it a font. ~You know, like, ~like there's styles, you need something. ~Um, ~but the styles are only coming from the [00:04:00] browser. ~So, uh, ~your website looks different in every browser, but,~ uh,~ the same as every other website in that browser. ~Um, so. Uh, ~the big problem and the reason there weren't styles at the beginning is because,~ uh,~ this is supposed to be a medium that works everywhere, and it says that in the first website it says,~ um,~ this is supposed to be,~ uh,~ available across all platforms, and that means no control over fonts or colors because fonts and colors are device specific, Noel: ~Right. ~It's information delivery, not visual arrangement of information is like,~ like,~ Miriam: So fundamentally, CSS has a problem ~when it's, ~when it's proposed,~ um,~ and the cascade sort of solves that problem,~ um,~ by basically saying,~ uh,~ users can override you and browsers can ignore you. And ~that's, ~that's how we'll make it,~ uh,~ work where it works, but disappear where it doesn't work. ~And, ~and we still have a cross platform thing. So we've got this problem where CSS is trying to handle. The entirety of visual presentation and animation ~and, ~and graphic design and [00:05:00] typography, like everything you can imagine wanting to do visually, Noel: Yeah. Like scaling size, like some accessibility stuff. Yeah. ~Yeah,~ Miriam: right? You're also dealing with hovers and interactions ~and, ~and you're trying to do that across all possible devices, which have different interfaces. They've got different languages. ~Right. ~This is ~sort of ~an absurdly complex problem, like Figma would never, Noel: ~Right? Yeah, yeah, yeah, yeah,~ Miriam: this is too big of a problem to solve. ~Um, ~and CSS is doing it,~ um, and, ~and doing it, I think fairly well considering how difficult that problem is. And at the same time, there's a goal in CSS of ~like, ~this should be simple and approachable. Noel: Yeah. Yeah. Miriam: you can see how those are, those,~ like,~ those are problematic when you put them together. ~Um, ~and I think again, CSS does it pretty well. Like you can, you really can start by just saying, this is the font I want, these are the colors I want. Gimme a website. Noel: Yeah. Miriam: and building on it from there. But it means that the learning curve or ~like.~ If you want to, if you want to [00:06:00] really ~sort of ~master this thing, ~there's a, ~there's a steep drop off there where like now you're dealing with some real complexity,~ um,~ that the browser's just been handling for you behind the scenes because it's a complex problem space. ~Uh, ~and to make it simple for you to start means the browser's doing a lot. ~So, ~yeah, I think CSS sort of has this unique problem. ~Um, ~maybe more than other languages, but Noel: Yeah, and ~I, I mean, ~I think it's compounded too 'cause ~I, I, ~I agree with your point that I think CSS is doing a good job. I think it does a lot better job now than it used to do. But I think we still need to support a lot of those legacy things. So ~like ~that also adds a lot of friction. 'cause it's like you can do the,~ like,~ air ~I, ~I'm air quoting like wrong, like the old thing that probably you probably don't really wanna be doing. ~Like ~there's probably a better alternative. But the old thing. Still around because we still need to support it. So it ~kind of ~has it just ~kind of ~limps so long,~ um,~ Miriam: ~Well, ~and I think a lot of the old things are still useful. Just not for Noel: what they're, yeah. Yeah. Yeah. Miriam: so like floats. [00:07:00] Floats are pretty cool. Floats are pretty cool actually. ~Um, ~the only reason we hate them is because we were trying to use them for layout and they were never meant for layout. ~Like ~that was a hack. ~Uh, ~but Noel: There. There wasn't better alternatives at the time. We didn't have all the stuff we had Miriam: ~right. ~Yeah. Noel: Yeah. ~Um,~ Miriam: are maybe some cases where it's ~like, ~oh, we shouldn't have even had that property ~that ~that was a mistake, but Noel: ~Yeah, yeah, ~yeah. ~Like, you know, it's, ~it's hard. It's such a, again, it's such a huge domain and ~it's, ~it's easy to ~like ~look back with the knowledge of now and be Miriam: Right. Noel: a, have,~ like,~ oh, we've learned all this stuff. ~Um, ~but I guess, yeah,~ let's, let's, ~let's rail, like reign this in a little bit or we're gonna, we're gonna go completely off the,~ so, um, ~I guess ~is, is, ~is value resolution like the, like ~a, ~a good starting point here? Do you think that's what we should ~kind of ~jump Miriam: Yeah,~ Yeah, ~yeah. Let's do it. Noel: Cool. ~Um, so. ~I don't think this is a thing that most devs even, ~I guess, ~unless they're front end first and that's, they ~kind of ~had ~like ~a pretty rigorous training, even ~like, you know, ~bootcamp stuff where you're like doing a lot of front end. I don't think most people are touching on the resolution process. Miriam: No, I Noel: you think we should be? What should we keep in mind? Miriam: Yeah, I've been working on that because [00:08:00] I'm writing a course about it. ~Um, ~so I've been really trying to figure out that curriculum, but I think,~ um,~ there's interesting things happening at each stage of the process. One of the things that I keep coming back to is it's a program that runs without us. So every website in order to render runs through this process. Whether or not we attach any CSS, Noel: Oh, okay. Miriam: in fact, properties exist on elements whether we provide a value or not. All of them have a default. And there's something like, depending on ~how, ~how you count, there's something like 650 CSS properties. ~Um, ~that's not including the shorthands because the shorthands really aren't their own properties. On elements. Shorthands are a way of setting several. ~Um, ~which is one of the steps in the value resolution process is like one of the first steps is you've gotta parse it and you've gotta split apart the shorthands into their long hands. ~Um, ~stuff like that. ~Uh, ~and so understanding ~that ~that [00:09:00] happens first and that the, that's before the cascade. And so after the shorthand splits, then each of those longhand will cascade. To resolve conflicts,~ um,~ like where do things happen? Another sort of problem that people run into is a confusion about the timing of cascading and inheritance and understanding that like the cascade is narrowing us down when we have multiple values, and inheritance is filling in when we're missing a value. Noel: ~Right?~ Miriam: And they happen in that order. So first things cascade, and then if there's still an empty spot, things inherit into that. ~Um, ~and that Noel: ~of ~think of those as like up and down. ~Is that, ~is that your mental model Miriam: oh, that's an interesting way to think of it. Yeah. ~I mean, ~I think of it, I think of it as a filtering and then an expanding or a filtering and then a filling in. ~Um. ~But yeah. And then some of the weird complexities we get into is the new stuff. We'll have to like [00:10:00] it. So first we have what's literally called filtering in the value resolution process,~ uh,~ which is ~sort of ~the parsing step. Things split apart and we get rid of anything that's not relevant. ~Um, ~and that's often where we get rid of things that are like the wrong type. ~Like ~if you say,~ um,~ back or you say margin teal. ~Um, ~teal is a color, not,~ uh,~ length, so it doesn't work in margin. CSS is strictly typed. ~Um, ~and so like you can only use colors some places and you can only use length some places. So we can get rid of some stuff there that we're like, oh, this doesn't make sense. ~Um, ~the types are wrong. ~Uh, ~so we're ~sort of ~throwing an error,~ um,~ and, but silently and getting rid of it. And then we get to cascading, which is taking where we've got conflicts and trying to get ourselves down to a single value for each property. ~Um, ~but some of them are empty 'cause we're not going in and setting 650 properties Noel: ~Right.~ Miriam: like that would be. ~I mean, ~that would be wild, Noel: I was surprised when you threw that number, but my guess would've been like, I don't know, 250 or [00:11:00] something. ~Like, ~it's one of those where ~like, I know, ~I know I'm gonna guess low, so I'm already patting it. And even then, I guess ~like ~two 50, like Miriam: I think the point too, when I look at it is ~like, I, ~I haven't even learned all of those and I don't need to. Noel: most people don't, right? ~Like ~there's no way. Yeah. Miriam: I think some people would say,~ well,~ then is CSS uploaded mess? And to me I'm like,~ well,~ no, I'm not doing animation. Noel: ~Right. ~Yeah. ~Yeah,~ Miriam: like Josh Cuomo is doing animation. Like I think those, it's great that those properties exist. ~Um, ~even though I'm not using them on a daily basis, like we don't all have to use every word in the dictionary. Those words are still useful. Noel: ~Right, ~exactly. Yeah. Given domains and given contexts and all these things, it's ~like, ~oh, it's nice to have, I need this one for this thing. I'll use it here. Miriam: Yeah. And like ~we're, ~we're working for different companies. We're solving different problems. Noel: Yeah. Miriam: ~Uh, ~it's great that we, ~uh. ~We have this language that is trying to attach ~the whole, ~the whole problem space. So yeah, we're not writing 650 properties [00:12:00] on every,~ um,~ on every element. And that's how the browser think of it. The browser is going through the dom and looking at every single element,~ uh,~ and then saying, I need one value for every property on this element. There's 650 properties. I have to go find all the styles that. Might apply. So that's the filtering. Find all the styles that might apply, and then I have to get down to a single value. ~Um, ~so if I've got multiple values on any of those properties, I have to cascade them to find a winner. So the cascade is resolving conflicts Noel: Yeah. Miriam: and then I have to fill in any that are missing. ~Um, ~and some properties will inherit to do that. And it's generally the like, text-based ones where it wouldn't make sense. ~Like, I mean, ~if you put a span inside of a paragraph and it changes font by default, that's bad, right? And if it changes color by default, that's bad. ~Um, ~so those have to inherit. But you wouldn't wanna inherit box things. You wouldn't wanna inherit a border. Noel: Margins and [00:13:00] borders Miriam: Yeah, because Noel: that'd It'd be weird. That'd be Miriam: that would,~ right,~ so basically you can think of it as ~like, ~if I inserted a span here, what would it be weird if it did appear? And what would be weird if it didn't appear? Noel: ~Right,~ Miriam: ~Um, ~and so those are the properties that inherit or don't inherit,~ um,~ for the most part. Noel: Do you think that lack of,~ uh, that, that, ~that, because like ~I, I, ~I feel like I don't, in my head, I'm not really,~ um,~ conscious of ~like, ~which of these properties will inherit and which won't. ~I think, ~I think it's like a muscle memory. I've learned just through having done it, but I don't,~ like,~ I don't think I've ever gone in and really inspected it. ~Like, like, ~thought about ~what, ~what does and what doesn't. Do you think. That, that, that may in particular be like a pain point that is a thing that like ends up making this so difficult or do you think ~that ~that is like the defaults are so good that most people's experience is ~kind of ~what I'm describing where and like it doesn't really hurt me most of the time. Miriam: ~Well, ~I think, yeah, I think the defaults are so good. It doesn't hurt you most of the time. And like I also don't explicitly think about which things are going to inherit and which aren't [00:14:00] most of the time. But I think it's useful to understand, oh, some things will and some things won't, and I need to think about them slightly different. Like when I run into problems, I need to understand that as a place to look. ~Um, ~and so that's what I ~sort of ~want out of teaching. ~Uh, ~value resolution is not like you have to think through the value resolution every time you write a property. ~Um, ~and you have to know which ones behave in which ways. It's more like you should understand that these are the steps and that this program is running, and we're ~sort of, ~I think of it like we're providing config, right? ~Like, like ~there's this program that runs and it has its default config, and we can go in and we can adjust the config. That's all we can do. We can't change how the program runs. The program's already written. It's a browser engine. It runs, it applies. It applies these properties to elements. And in fact, like at the point where it's rendering the page, all of our code has already been cascaded and inherited. And now the [00:15:00] browser looks at how those properties relate to each other and tries to figure out how should these interact. And there's lots of weird interactions there and ~like. ~There's timings between them. ~You know, ~if you ~apply, ~apply a rotation and a transform, Noel: ~Mm-hmm.~ Miriam: ~uh, you, ~you or ~a, ~a translation,~ a,~ a movement of a, you apply, rotate, and translate Noel: ~Mm-hmm.~ Miriam: the order of those matters. If you rotate first and then translate, you're moving a different direction. Then if you translate Noel: Yeah. Miriam: ~right, ~and if you translate and then rotate, you're doing something else. And if we're doing all of that inside of the transform, fun or transform property, we can set up ~the order, ~the order of our functions, Noel: Yep. Miriam: but we now have these individual properties. ~Right. Uh, ~translate, rotate, and scale. And scale also impacts the other ones. ~Uh, um, ~'cause ~do you, ~do you move twice as far if you've scaled first? Yeah. ~Um, ~so with the properties. We don't define the order of properties. Properties are applied. The way the browser applies, properties that is defined outside of us, that's part of the [00:16:00] program that's running and we're only applying config. So we can learn things like,~ uh,~ it does it in the order where they don't impact each other. It does the transform, it does the translation first. So that the rotation and scale don't impact it. ~Uh, ~and there's a lot of other things like that where ~like ~one property happens before another,~ uh,~ and we can just run into those edge cases and most of the time we don't have to think about it. 'cause ~it's, ~it's the defaults Noel: It does the thing. Yeah. Yep. ~Mm-hmm.~ Miriam: But understanding that we don't control the program, we only provide config. We only provide. New values for these properties and then the program runs applying those values, I think that's a useful, I don't know, sort of separation. Mental separation. Yeah. That,~ um,~ that doesn't really change most of how I write CSS day-to-day, but it changes how I understand debugging CSS ~and, ~and what I do when I run into problems. Noel: Yeah. Yeah. ~I like, ~I like that a lot. I feel like it's,~ um,~ I feel [00:17:00] like,~ well,~ I can tell you've thought about this a lot because ~like, not, not, not just, ~not just having done it, but thought about how to con ~like, um, kind of ~convey that to other people to ~like ~get them kind of thinking about this. 'cause I think you're right. ~Like ~if. Engineers that are ~kind of, ~or whatever, people writing CSS that are ~kind of ~doing this for the first time or exploring if they, I think if they were presented with it in this mode where it's ~like, ~okay, there every, everything has all of these,~ um, you know, ~like variables, all these properties. Be set, and now you have an engine with which you can set them ~like,~ Miriam: Yes, Noel: there's a, there's ~like, ~that's ~like, ~okay,~ then,~ then I think that leads to this kind of, you're just thinking about it differently than just, I'm just writing this declarative magic and it's like blasting colors and spacing onto the page in a magical way. I don't totally understand. Miriam: ~Totally, ~totally. Noel: Yeah. So ~that's, ~that's very cool. Miriam: Yeah. And then, ~you know, ~this talk was ~sort of ~getting into the, like, where are the weird edge cases, because there's a thing with like variables. Okay. You're allowed to put anything inside of a custom property. So we can say,~ um,~ let's just name the [00:18:00] property. Miriam,~ uh,~ we've got Dash, dash, Miriam, and Miriam is allowed to be teal. So we put, we can put a color in there. That's fine. Noel: Yeah. Miriam: And it's also legal syntax to say that the margin is the custom property. Miriam, both of those are legal, right? ~Uh, ~so at that point, when we run the parser, and we haven't, oh, we can also say that Miriam is three pixels. Okay? And we can say that somewhere else, right? ~Um, ~and maybe they apply to the same element. So we're not gonna know which one of those applies until we run the cascade. Noel: Yeah. Miriam: We're trying to filter at the beginning based on type. ~Uh, ~so then we've got this problem where the browser says, okay, ~well ~I don't know whether Miriam is a color, in which case we should discard this or a length, in Noel: ~I need to, ~I need to execute to see what happens here. Yeah. Miriam: right. So we have this problem where as soon as we start using variables, we lose ~the, ~the type checking. Noel: Yeah. ~Mm-hmm.~ Miriam: ~Um, ~[00:19:00] and then we run into this. What is called invalid computed value time, where we get to the end of the process and find out that Miriam was teal Noel: Yep. Miriam: and that we can't apply teal to the margin and we've already discarded everything else in the cascade, Noel: Yeah. We can't fall back to whatever we should be, ~you know, ~inheriting or what, whatever it may be, because ~we, ~we've already said it to this other value. Miriam: now we have to drop back to the initial value, which is just. ~Sort of a, ~a random thing, Noel: Yeah. For depending on the property,~ who,~ who knows? Yeah. Yep. Miriam: Yeah. ~Uh, ~so for margin, that's gonna be zero for color, that's gonna be canvas text. Noel: ~Yeah, ~yeah, Miriam: yeah, ~like there's, ~there's all these different initial values and we just fall back to one of them, ~and then, ~and then we get confused because we're like, but I, why don't, yeah. Noel: yeah. We broken the mental model. Yeah. Yeah. ~Mm-hmm.~ Miriam: And,~ um, the, ~the fallback in a variable doesn't work at that point. ~Um, ~we, the fallback is something that we only get,~ uh,~ if ~the, ~the custom property is not set. ~Uh, ~we don't get [00:20:00] it if the custom property is set but wrong. Noel: Error. Yeah. Type error. Yeah. Yeah. Miriam: so this is a common error that people run into and have trouble debugging. ~Um, ~but if we understand how the process is working and that there is such a thing as invalid at computed value time, and that we're gonna have it more and more. Mix ins and functions both trigger, invalidate, computed value, time, behavior, anywhere they're used the same way that variables trigger it anywhere they're used. And so more and more of our code is getting this sort of late validation,~ um,~ that's gonna mess us up,~ uh,~ and we better have an eye for it. Noel: Yeah. Yeah. ~Because, ~because it's inherently happening at compute time. Like ~the, ~the execution time is when the air occurs versus this ~pre ~pre-building of the tree compilation step that Miriam: And so ~it's, ~it's harder to recover from it. Noel: ~Yeah, ~yeah. ~Um, ~so I guess, yeah. Is this ~like, uh, ~it, this feels like one of those problems where it's ~kind of, you know, ~just gonna be ~a little bit, ~a little bit tricky. ~Do, ~do you feel like, is there. How to frame this? ~Like ~is this one of those [00:21:00] things where it's ~you, you kind of, ~you ~kind of ~need an understanding of this before you're really using functions, mix in stuff like that. ~Like is this, ~is this kind ~of the cost ~of the cost of these new tools? Miriam: Yeah, ~I mean, ~I don't know. ~I mean, ~I guess it's ~like, uh, ~the same way that people have been using variables without understanding it. ~Uh, you can, ~you can do it just fine. I think ~you'll, ~you'll be able to just. Pick it up and play with it. The question is, and I, ~you know, um, ~having been around the web ~for, ~for a while, we see this over and over where,~ uh,~ devs are doing pretty well with CSS and then they run into a thing and they just add more code. And it's ~sort of ~the opposite of what works in css. ~Um, uh, ~there's ~like, ~CSS is setting constraints. ~Um. ~So say you've got a box and you set that it has a constraint, that it has to be, I don't know,~ um,~ 10 pixels from the edge. You also set a constraint that it has to be a hundred percent wide and you also set a constraint that it has to be,~ uh,~ a hundred percent from the other edge or something, right? You can set up constraints. That conflict, Noel: make sense. Like they're inherently impossible.[00:22:00] Miriam: They're inherently impossible. ~Um, ~and so the browser has to do something with those too. ~Right? ~And that's a different sort of problem solving that it's doing in the rendering process where it gets to it and says ~like, ~oh, these values don't actually add up. I have to prioritize some over others. That's where we run into things like text, just honking right out of the box with the Cs, s's awesome meme or whatever. ~Like ~that's, we set too many constraints, a large font inability to break words. Noel: Yeah. Miriam: A small box,~ um,~ that's on us, right? And the browser just has to do something. ~Um, ~so there's a lot of problems that come up there, and when we just throw more constraints at it, if we think of every property as a constraint, we're throwing at the browser. Throwing more constraints at that problem makes it worse. It doesn't make it better. Noel: ~Mm-hmm.~ Miriam: And this is also what LLMs do is they throw more properties Noel: I was about to ask,~ like, I feel like, ~I feel like LLMs are bad at exercises and minimalism. ~Like they, ~like they, they're terrible at it. Miriam: right. [00:23:00] So we run into some problem that we don't understand, we throw more constraints at it, then maybe ask a chat bot and it throws more constraints at it. And here we are digging our hole deeper. Noel: And maybe it works specific. It's one of those ~like, ~I feel like when I'm in this pit, I like fix my specific fit problem and then like I move something, it's like I've broken everything else. ~Like ~there's, yeah. Yeah. Miriam: exactly. So that's where I think it becomes a problem. And I don't know, ~you know, ~to me there's a little bit of a question of how do you convince authors that you need to learn the thing that's gonna get you out of that hole? not the thing that you're gonna need. ~Uh, ~when you're trying to set the color, like you're gonna be fine. You're gonna be fine, you're gonna be fine. Applying most mix-ins, you're gonna be fine. Applying most functions, you're gonna be fine using variables. But when you run into these problems, if you don't understand the mental model, you're gonna dig your whole deeper when you need to be finding your way out. Noel: [00:24:00] Yeah. Miriam: ~Um, ~and,~ uh,~ I hope we can help with that. Noel: Yeah. Miriam: hope authors are interested in that. Noel: Yeah, so you, I guess again,~ the, the, ~the title of the talk was,~ is,~ is SaaS Dead yet, do you think,~ like,~ I guess ~we can, ~we can dig into ~why that, ~why that specifically, but ~like, do you, ~do you think, Miriam: Because Noel: are there tools in general. Yeah. Yeah. ~Like are there tools, ~are there tools that make this worse and tools that make this better? ~Like is there, ~is there frameworks or ~kind of ~mental,~ um, you know, ~projections that people are using through some abstraction that ~like, ~make this more or less a problem that you've really observed? ~Or, ~or do you think it's ~kind of ~that there's some,~ um, like,~ Miriam: in some ways, to me it's ~the, ~the tools that claim to hide the problem from you are the most dangerous to me. ~Um, ~and maybe I'll throw LLMs into that. Noel: Yeah. Miriam: ~like, you don't, ~you don't need to know it. ~Somebody, ~somebody else will fix it for you, ~but you know. Like ~anything that's based on,~ um, uh, sort of ~abstinence only approaches to CSS. Never use importance, never use multiple,~ uh,~ selectors. Never use, never do this, never do that. ~Um, ~where you're trying to just always avoid the [00:25:00] problems. ~Uh, ~I find those,~ like,~ I don't know, maybe they're helping somebody avoid the problem for a while, but like it means. ~You, ~you think you can sidestep it? And I don't believe you can sidestep it. Like I think this is another point of ~like, ~the program running without us is ~like, ~cascade happens. ~Like, you, ~you are not avoiding the cascade. Cascade is happening. ~Um, ~and it's happening with user styles and with browser styles and with,~ uh, you know, ~anything that we do, right? Whether we did it through,~ uh,~ tailwind or not. ~Whether we used, ~whether we used bem shaped selectors or not, the cascade is happening. ~Um, ~and we have to deal with it. ~Uh, ~and just pretending it isn't there. Yeah. So to me that's less about the tools and more about the mental model that the tools encourage. ~Which is, ~which is ~a, ~a, yes. You can avoid it. Noel: Yeah. ~Right, right,~ Miriam: model. Yes. You never have to learn this. ~Um, I, ~I also, I prefer tools that allow me to access the [00:26:00] language. ~So, uh, you know, ~I'll talk about cascade layers and for me, in my work, cascade layers have made specificity, conflicts irrelevant. I don't need, I don't need them. Selectors, what are we talking about? What are we doing here? ~Um, ~like this is a problem of 10 years ago. ~Like, ~let's just write good CSS again. ~Um, ~but then ~I'll, ~I'll give a talk on cascade layers and somebody will say,~ well,~ I'm using this tool that doesn't support that yet. What do I do? And I'm like, I don't know. Get a different tool. Noel: ~yeah, ~yeah. Yeah. Miriam: why isn't your tool? So I like tools more like sas. Noel: ~Mm-hmm.~ Miriam: Try to stay outta the way and try to say ~like, ~yeah, if I don't understand something, I'm just gonna let you do it. 'cause ~it's probably, ~it's probably new CSS. That should probably be allowed. Noel: Yeah. Yeah. ~I mean, I, I think, ~I think SaaS kinda lives ~into, ~into the whole, ~you know, um, it's, ~it's mantra where it's like ~an, ~an extension. Like ~it doesn't, ~it doesn't feel like there's kind of magic going on most of the time. ~Um,~ Miriam: And there were some, maybe some early mistakes where ~like, you know, ~SaaS has an AT if, and that means that if CSS creates an at, [00:27:00] if,~ uh,~ there's gonna be a lot of problems. ~Um, ~but yeah, early syntax mistakes, but mostly has tried to stay out of the way. Noel: ~Mm-hmm. ~Yeah. ~You mentioned, ~you mentioned Tailwind as well. ~Uh, do, ~do you feel Tailwind is ~kind of, you know, ~over,~ um,~ over obfuscating some of this stuff? A little bit. I feel like that's ~the, ~the obvious one. Miriam: Yeah, ~I mean, uh, ~I would say there's a couple things. Tailwind is ~sort of ~multiple tools at Noel: That's true. People use it for very different things. Like I, when I'm reaching forward, I'm just like, I just want this to ~like ~look good enough out of the box and I'm Miriam: Yeah, you're using it like a bootstrap or whatever, or a foundation or something ~as a, ~as a pre-built design system. And I get why people want pre-built design systems. ~Uh, ~I get tired of every website looking like the same pre-built design system, but that's not Noel: internal tools or something for yourself,~ like,~ I need, I'm, I get buttons on the page that don't look terrible and ~like ~do the thing. It's ~like,~ Miriam: Yeah. Also, your job is not to make me happy, so go for it. ~Um, uh, ~yeah,~ I,~ I get that. I think,~ um,~ using it [00:28:00] as a way to avoid learning the language is gonna get you caught. You're gonna get trapped because it's a leaky abstraction. It doesn't. Noel: Yeah. Miriam: ~Uh, ~you still have to learn the language. It's still, it still is cascading. It still is inheriting, it's still, you have to learn the flex model ~and the, ~and the grid model. And,~ um,~ and the reason that like inline. That like margins don't apply to inline boxes,~ uh,~ or width doesn't apply to an inline box, right? All of that stuff still affects you. ~Um, ~so if you're approaching it as a way of sidestepping the language, you're just gonna, you're just gonna run into problems you don't understand. Noel: Yeah. Miriam: ~Um, ~so yeah, I don't think it, I don't think it solves the problem that they sometimes sell, which is the like. Best practices don't actually work. We're gonna, we're gonna solve it for you, and there's just not a tool that's gonna solve it for you. ~Um, if you want, ~if you want the garden not to have weeds, you have to weed the garden. ~Like there's no, ~there's no magic solution here. Noel: ~Right, right. ~Yeah. ~Like, so, ~[00:29:00] so I guess maybe to,~ to, to answer, ~to answer this kind of, is. Is SaaS dead yet? Question before ~I have, ~I have some more, Miriam: Yeah. Yeah. You. Noel: of line I wanna explore, but like the, it sounds like ~you're, ~you're saying no if you have like specific use cases, you think ~like ~there's still some utility there kinda Miriam: Yeah. ~Well, ~and part of what I point out is that each of these features that we bring over from SAS and other pre-processor, they change when they move into a declarative language because these pre-process are all imperative. So you are writing the program,~ um,~ and that's different from the program running without you. ~Right. Um, ~and so variables work differently. Mix-ins work slightly differently. Functions work differently. ~Uh, ~and so if you have the use cases that you can handle on the server, I think of it like,~ well,~ making JavaScript better in the browser didn't replace node. ~Um, ~there's still reasons to do things on the server,~ uh,~ even if you've got the same functionality both places. Noel: Yeah. Miriam: ~if you can, ~if you can not make the browser, deal with it, don't make the browser deal with [00:30:00] it. ~Uh, ~but if you need that sort of dynamic rendering, give it to the browser. The browser can do that. ~Uh, ~so to, in my mind, they solve different problems. And if the problem that you have is solved better in the browser, yes, SaaS is dead for you. Get rid of it, like getting rid of tools in your stack. Excellent. ~Um. ~But if you still have server side style problems, I think especially with design systems, that's where I mostly feel like I still pick it up. ~Uh, ~it can do a lot of ~sort of like ~giving me my colors,~ uh,~ or whatever. And then I can set variables. I can set CSS variables from those and use them in dynamic ways, but it can handle ~sort of a higher level, ~a higher level tooling problem if I need,~ um, uh,~ Noel: Yeah. No,~ I, I, I, I, ~I agree. ~I, ~I think I agree with the,~ like,~ j the, ~you know, ~JavaScript client side node. ~Um, ~juxtaposition there, but ~it, ~it largely, but ~it does, ~it does feel a little different because it's like,~ well,~ we're like, there are some things where ~like, ~we need to compute this in a server. 'cause there's ~like, you know, ~for whatever reason versus ~like, ~the SaaS thing is ~like, well ~we're still like spitting out the thing for the browser to [00:31:00] do the thing, ~you know, ~like to, ~you know, ~render however we want. So ~like, it, it, ~it's, I guess that's true. Yeah. ~There's other, ~there's other use cases probably that are not just ~like.~ Miriam: ~Right. ~I think one of them is that ~like, because, ~because CSS doesn't have,~ uh,~ doesn't have control, flow isn't an imperative language, right? We're never gonna get loops. Like maybe we'll get something where we can do. Enough sibling index stuff to get to, to ~like, ~feel like we've achieved something loop like,~ um,~ but we're never gonna get loops. ~So, ~okay, if I have to loop over something Noel: Yeah. Miriam: that's a SaaS problem, but I also think of it a little bit the other way around where ~like, ~if I don't have to make the browser do this, then let's just solve it on the server and not make the browser do it. Noel: Yeah. Yeah. That's true. Yeah. ~Like,~ Miriam: But ~that's a, ~that's a,~ like,~ okay, if I haven't set up SaaS already and it's a small problem, sure, I'll just pass it off to the browser. I'm not gonna set up SaaS for it. But if I've got a lot of these situations, I'm dealing with ~a, ~a big design system, I've got a lot of logic happening that I don't have to make the browser deal with because I get a static [00:32:00] answer. ~Um, ~and that static answer is fine. ~Um, ~I'll just do it on the server so I'm not passing extra. ~Uh, ~logic ~up to the, ~up to the browser, Noel: If there's ~like, ~if the decision tree is complex and there's like enough like in ~whatever, ~whatever that may be, and there's enough possible end states where it's just ~like, ~I can't afford, I'm, Miriam: Yeah. Complex but not dynamic like what the browser can handle is, this has to change depending on things related to the client side. ~Uh.~ Noel: Dark mode. Light Miriam: Yeah, exactly right. ~Um, ~that SaaS can't handle, so if it's that sort of thing, yeah, give it to the browser. But if it's the sort of thing where, yeah, I'm just, I don't know, generating one color from another in a pretty static way as part of my design system, browsers don't need to know about that. Noel: Yeah. Yeah, exactly. ~Or, ~or there's ~like ~some kind of, ~you know, ~variable state that's easier. I don't want Miriam: ~Right. Yeah, ~yeah. Noel: do ~all this, ~all this stuff. That's if it's ~server, ~server controlled anyway. Yeah, that makes sense. But ~I, ~I think that's probably a good way to think about it. ~A good, ~a good way to think about it as well is just like the,~ they're,~ they're solving different problems now, I think probably more so than they were historically. ~Like, ~it feels like [00:33:00] SaaS was doing more of the client side kind of smoothing, where now it's more ~like, ~oh, we'll do the, ~you~ Miriam: Yeah. Yeah. Noel: server stuff. Miriam: Yeah. ~Uh, ~computers didn't kill books, but they sure changed what books ~had ~had to accomplish in the world. Noel: ~Yeah, yeah, yeah, yeah,~ Miriam: ~know, ~like I think it's, I think it's that, and I think it does mean ~like, ~yeah, maybe for you, you can get rid of SaaS, and if that's true, that's great. ~I, ~I have a little bit of a problem with people being so excited to get rid of an old tool. They just end up picking up a new one that does it slightly worse. And I see people like basically rewriting parts of SaaS and JavaScript or something, and I'm like, okay, now look, Noel: Yeah. Yeah. Miriam: there's already a tool that does that pretty well across an ecosystem where you bring somebody new onto the team, they probably already know how to do it. You just rewrote it in a way that they don't know how to do, and now you've made your onboarding costs higher, your maintenance costs higher. ~Like, ~what are you, I don't know what we're doing at that point. ~Um, ~this problem is solved. Just go use a tool that solves it. [00:34:00] You're, you'll be fine. Noel: Yeah, totally. ~Do you, ~do you think this ~actually, ~actually ~kind of, this, this circles, ~this circles back a little bit nicely. ~Do, ~do you think ~like, ~now that we're getting functions and mix-ins ~and, ~and this kind of stuff, there's ~like. Like, ~because ~it, ~it feels like a lot of those problems are also ~kind of ~in that domain as well. Like one, one could reach for those kinds of, those tools too, that feels less ~like, you know, ~less bad. 'cause it's ~like, well ~we're using a thing that's part of the language, but it still introduces this problem we were talking about before of ~like ~what is known,~ um,~ at compute time versus what's not. ~Like do, ~do you how like. How do you make those kinds of decisions? Like ~when, ~when does it feel reasonable to reach for a function versus ~like, ~and maybe we should be doing this on the Miriam: ~Well, ~if you've gotta do calculation complex calculations with CSS variables, SaaS can't do them for you. ~Um, ~so like SaaS can spit out ~the, ~the SaaS could spit out the calc function, ~I guess, ~so it could simplify the syntax for you. ~Um, ~so basically those are gonna be about like, how much am I sending over the [00:35:00] wire? ~Uh, ~because they basically let you say, here's a chunk that's gonna be reused a lot. Noel: ~Hmm.~ Miriam: I'm only gonna send it over the wire once and then let the browser. ~Uh, ~put it into all the places it's needed. ~Um, ~so they're gonna be slightly different because, ~you know, ~a function well, a function in CSS can have ~like, um, ~media queries inside of it. And that feels wild, right? Like you can, Noel: Responding to the client's state in real time is wild. Yeah. Yeah. Miriam: can you imagine being able to, inside of the margin property. Put a media query, that's what you can do with a CSS function. And you can't do that with,~ uh,~ with a SaaS Noel: Yeah. Yeah. Miriam: ~Um, ~so they're gonna have these places where they do not overlap. And similarly, you can do loops in a SaaS function, and you won't be able to do loops in a CSS function. So there'll, there will be parts of the Venn diagram that don't overlap, but then the parts in the middle, I don't know, it's ~sort of ~your call. ~Um, ~if they can both do it. If you've already got SAS set up, maybe [00:36:00] lean on SAS so you're not making extra work for the browser. Or if you're saving a lot down the wire by changing it to CSS, great. But ~like, ~yeah, Noel: Yeah. Yeah. ~I, I don't, ~I don't really know. I imagine like performance implications are probably not too bad either way. I like CSS functions I feel like are probably pretty fast. ~Like, ~unless you're doing some really weird stuff, Miriam: Yeah. And part of the thing, when you talk about browser performance, there's this weird cycle that happens where like somebody will find a bug in browser performance, and that's how browsers think of it. Like when you find something that performs badly, they think of it as a bug and they fix it as quick as they can. So somebody will find a bug, they'll write an article about it, and then everybody will be like, never do that. It's bad for performance. And the browsers are like, we fixed that two weeks later. Noel: Yeah. Miriam: Like it's not, Noel: ~Not that, ~not that bad anymore. Miriam: we don't have to just file a bug. Don't write the article. Just file the bug. We'll fix it, and then everybody can move on and we can [00:37:00] stop like trying to remember all of the. ~You know? ~Yeah. There's still lots of rules about which selectors perform faster than which selectors, and most of it is 10 years old, and you're like, no,~ stop,~ stop worrying about selector performance. Noel: Use whatever works. Yeah. Yeah. Miriam: yeah. It's like the least of your problems in the browser. They are optimizing that,~ uh,~ just as so well,~ um,~ yeah. Noel: Yeah. Yeah. Cool. ~Well, ~I guess again, we kind, we've ~kind of, ~we've ~kind of ~covered a lot here. Is there anything in particular that's on your wishlist for CSS that you think could ~kind of ~do,~ like,~ make it even better at chipping away at some of these decision points of ~like, ~eh, should this be, should I be using sas like function? Like ~what's your, ~what's your Miriam: Yeah. Oh, ~that's a, ~that's a good question. ~I mean, ~I think there's a lot of issues that sort of need loop, like solutions ~or, ~or indexing Noel: Gimme an example just so I have ~like ~a Miriam: ~well, ~I think ~they really, ~they really become clear in animations. I think there's other places where they're useful. Like in an animation where ~you're, ~you're animating a bunch of stuff in and you want each one delayed slightly from [00:38:00] the previous one, or you want them staggered. ~Right. Um, ~and that's a place where sibling index,~ uh,~ which is ~a, ~a new function probably solves it. 'cause you take ~your, ~your delay times your sibling index. Noel: off the base are Miriam: ~Right. ~And that's the sort of thing that you would have to do in a loop. ~Um, ~and I'd ~sort of ~be interested in looking at other places. And I think the one that's really hard is when you want selectors that need to be ~sort of ~based on a loop. ~I mean, ~I guess that's where you have nth child, right? Noel: Yeah, that's what I was about Miriam: or,~ and,~ and,~ uh,~ we actually now for a while we've had nth of type,~ uh,~ Noel: ~Mm.~ Miriam: ~not, ~not,~ uh,~ not the full ~like. ~Nth child where you say ~like ~two n ~of, ~of a selector. Noel: Oh, Miriam: ~Um,~ and that's what nth of type is a shorthand for. But now you can put any selector in there. ~Um, ~and it's pretty powerful. So we're getting these things that are ~sort of ~addressing the loop problems. I'd be curious how close we are to, like, how many of the loop problems can we solve? ~Um.~ Noel: Yeah, it's hard. It's hard to 'cause and is, it feels like, it's ~like, ~okay, ~well we, ~we've solved everything that's ~like, like, um, ~indexed based [00:39:00] offsetting ~like, ~or if all I'd be doing was looping and then adding my index to a thing, like whatever that is, that feels like those. And maybe that's all we should be, like, ~you know, ~all we want CSS in charge of, I dunno, like it's hard to, Miriam: another problem that there's proposed solutions for that I'm excited about is we don't, we haven't had typecasting, so we've had this problem where like you can set up a counter, but you can't use that counter. For anything other than,~ um, uh, ~setting a, creating a marker on a list, right? That's a like about all you can do with it. But what if you could just use that as a number and you could use that as your index. ~Um, ~and so we're starting to get some type casting functions that will like, let you say, parse this as a parse this string as a number. ~Um. ~Which I think ~will, ~will be pretty powerful. Noel: Yeah. Miriam: But in the weeds, ~I mean like ~that is in the weeds Noel: That's down Miriam: and ~you know, ~like grid lanes are gonna be much more on the front lines for people. ~Uh,~ Noel: ~Right. ~Yeah. Much [00:40:00] more utility versus these little things that's ~like, ~there's 10 developers. They're like, yes, this fixes my Miriam: exactly. Noel: Yeah. Like Miriam: Yeah. And I think we need both ends of that. Sometimes, ~you know, uh, ~we gotta have the ways to solve the weird little problems, and we also have to have,~ uh,~ sort of high level. ~I mean, it's, ~it's interesting to me that CSS has both things like, ~I mean, ~now casting,~ um,~ and also things like,~ uh, uh, ~text wrap, pretty ~like, ~like what is. What is pretty, pretty, I don't know, Noel: ~Mm-hmm. ~Yeah. Yeah. Look good. Miriam: does some things. Yeah, exactly. And I think ~both, ~both ends of that are useful, Noel: Yep. Yeah,~ it's,~ it's a, again, ~kind of ~to back to like our very, the very first point ~we were, ~we were speaking to of ~like, ~this thing is doing so many different things for so many people. It's like ~the, ~the problem space is daunting. The way it's been used now is daunting. ~Like, it's, ~it's, there's,~ it's,~ it's ~a huge, ~a huge thing. But again,~ like, I think, ~I think it is, it's better now. I think there's,~ um,~ like a. Kind of a mechanics problem, a little bit of figuring out how to get people to think about these things and not feel overwhelmed. But again, I feel your work has [00:41:00] been very good in ~like, like ~every time we talk, I feel like I walk away and I'm like, oh yeah, this is,~ like,~ I feel I've got a better understanding of this now, just Miriam: Oh, good. Noel: talking to,~ uh,~ talking to Marion for an hour. ~So,~ Miriam: Yeah. ~Well, ~and I feel like the main takeaways that I want people to have are like, yeah, the program runs without us. There's all these properties. We get to set some of them. ~Um, ~and when we're running into a problem, we maybe wanna look at how the program works, ~not at, ~not at what we did, but also we're probably gonna solve the problem better by removing things rather than adding things. ~Uh, start, ~start by removing things. Think through exactly what constraints you want. Are you really concerned about the width or are you concerned about how it aligns with something? ~Can we, ~can we define the alignment instead of the width? Noel: Yeah. Miriam: how do we express exactly what constraint we're looking for? If you've ever used CAD programs, they like visualize this in an interesting way. ~Um, ~but most people haven't used CAD programs, so I don't know that it's a great metaphor, but Noel: Yeah. Miriam: yeah, you want to ~like ~minimize your constraints. ~Um. ~So that's [00:42:00] my debugging advice. Learn the program and remove things instead of adding things. Noel: Yeah. Yeah. Nice. Cool. I feel like they, ~that's a, ~that's a great note to end on. Is there anything else, or ~is that your, ~is that Miriam: That's it. That's Noel: closing statement. Cool. Miriam: That's my closing statement. Noel: I appreciate it. ~Nice, ~nice. ~Well, ~thank you for coming and chatting with me, Miriam, again. I feel like I, ~I get, ~I get so much outta these talks that,~ uh,~ Miriam: Oh, great. Same. Noel: a pleasure. Miriam: It's always lovely chatting with you, so thank you. Noel: of course. Of course.