 Hello everyone and welcome back to The State of the Web. My guest is Yuna Kravitz. When she's not podcasting tech tools or doodling web dev concepts, she's the director of product design at BDG Media. And today we're talking about the state of CSS. Let's get started. So Yuna, thank you for being here. I want to start by addressing the elephant in the room, which is the meme of Peter Griffin fighting with the blind, simply captioning CSS. So how did it get the reputation of being so hard to work with? I think there's actually a combination of a few things. The first thing is the cascade. So having developers really understand how affecting one class or one piece of CSS could really affect a lot of other things in their projects. And then also I think it's still this sort of workflow problem with design and development where there's not always a communication from the beginning. So designers sort of create this website that they envision their heads and then developers sometimes have a hard time building that. And they don't have all of the tools to build it in the browser that they would like to have. I think that CSS has evolved a lot. But in the early days, it was definitely hard to create these sort of abstract designs on a web page. And how about some of the technical challenges that people have? What is it about CSS that has been difficult to work with? For example, some of the APIs might not have been well-matured by the time? Yeah, I think that layout is a great example of what has gotten a lot better over time. It was a lot harder to create these dynamic layouts in the past where all you really had were floats and you sort of had to hack around them with clear fixes and making rows really align. How you want them to was a problem. But that's definitely evolved. Now we have Flexbox and Grid and a lot more capability on the web. So it's a really exciting time to be a CSS developer. So I feel like the way that we used to lay out web pages was largely dependent on the devices that our users were on. And now fast forward to today where we have such a divergence of screen sizes from pocket-sized phones or even watches to wall-sized TVs and widescreen monitors. So how has that affected the way that developers actually style the web? Well, browsers are everywhere. So you could access the browser on your refrigerator at home if you wanted to. And so now that we have that capability to put the web on various devices, we have these tools like media queries in CSS that allow for us to design for these devices. And it's not just media queries. There's also device queries where you can query if you're on a projector. You have media queries for printing things out. So you can print things out in a nice, neat way if it was a text-based website. You have a lot of different tools now in CSS instead of moving forward to think about layout. So you mentioned watches. What about round-device layout? So that could be a thing that we're seeing in the future. I want to ask you about preprocessors and style resets. What are they and how do they help address some of the challenges of working with CSS? So style resets, I think, sort of came out as a tool to help to even the playing field with different browsers. Sometimes browsers display items on a website in slightly different ways, so basic components. And so when you're writing CSS, you often want a unified style across those browsers. And so using things like a normalize or a reset can sort of clear that. Second part of that question was preprocessors. So CSS preprocessors became really popular a couple of years ago. And so less SAS stylists, these are all examples of these preprocessors. And they gave developers these tools that really allowed for them to write functional code to export as CSS and styling. So a few examples are variables, mix-ins. They sort of work as functions that let you input arguments and have outputs sort of built out. You can use maps and loop through those maps to write dynamic code. If you had a list of icons, you could just loop through a map and have sort of maybe like a social platform with a color type together and have that automatically be generated. So they gave developers a lot of capabilities that they needed to create these styles for more complex websites and also for websites that were bigger and needed unification. Are they still being used today or was that mostly just to address the shortcomings back in the day? Well, I think that a lot of people still use preprocessors. But as a community, I think that we're seeing a lot of movement solely away from that because CSS is giving us a lot of those tools. Variables are now saying that you can write natively in the browser, but they're also dynamic. So those are called CSS custom properties. Also, we have things like post-CSS, which allow for a lot of the transforms that a program like SAS allowed for, but they allow for a piece-by-piece transform instead of having to install this entire preprocessor and change your workflow to work with a preprocessor. It definitely depends on a build environment for that developer, but we're also seeing people start to write CSS and JavaScript and sort of evolve that into more modern ways to work with a component-based development system. Earlier, you mentioned Grid and Flexbox. According to the HTTP archive, Grid is actually used on 1% of websites tested, and Flexbox is on 50%. Can you explain more about what they are and how they address the layout problems? Yeah, those are interesting numbers. So Grid came out last year in March, and essentially what Grid allowed us to do was create layouts that were both horizontal and vertical. So you have this layout space that you can then define and place components within. You can overlap those components. Flexbox came out before that, and it was creating this solution to the problem of laying out horizontal components. Flexbox also fixed this issue of vertically centering things. That was really hard to do in the past, and it's become a lot easier since we've had Flexbox. I think going back to that meme, that was one of the things that people would just struggle with, and it became sort of a joke in the community. So Flexbox gives you that power, and it really gives a lot of control for if you want responsive images to sort of grow or shrink within a space. You can write dynamic code to allow that to happen. With Grid also, you have these functions that allow for minimum maximum sizes and just automatic placement of components. So it's just changed the entire way that we can write layout for the web, which is I think one of the biggest struggles that people have with CSS. So as an educator of web dev concepts, what are some of the things that you've seen people struggling with still today? I think that file structure is one of the biggest pain points for designers when they're learning how to code in general. And so oftentimes, you see designers learning CSS and HTML as an entry point into more programming. And so something that SAS sort of solved for us or helped us with was the ability to import files into CSS directories and have sort of a structure for how you create your entire project. There are a lot of different ways to structure your CSS projects. There's a concept called IT-CSS, which stands for Inverted Triangle CSS. And that whole idea stems from this starting very global and then getting more and more specific per component. So you never have these specific overrides where you're using important to override and things like that. So having a really base understanding of this structure also helps to this issue of figuring out how to make the CSS work. And how about things like text truncation? Is this still a problem that people are fighting with? So weirdly, for some reason, things like truncation, things like forum styling are still not something that we have a lot of control over in the browser. They work in some instances like text truncation on a single line and certain browsers works. Then you also have this issue of browser support when we do get new CSS properties. So that's definitely still a challenge. I think styling forms and different core browser elements is going to be a challenge for a while moving forward because we have to figure out how to ensure accessibility for those things while giving developers more control. But the problem with that is that right now you have to hack around these elements, create fake elements, and then give all those elements those core properties again to get a specific aesthetic. And then when you have designers sort of creating a layout that you as a developer need to implement, there's still a little bit of friction there when it's not so smooth to develop that concept in CSS. Right, and when you're having to do things manually like that, you introduce accessibility issues possibly if you don't keep things in sync, use semantic elements. And then when you're using frameworks, that's also just its own JavaScript bubble. So you have to make sure that you're injecting all of the right keys, all of the right navigability that way. Also, like you mentioned, accessibility for screen readers, and it becomes a much more complex load for a website in general and also for a user. So if we had the ability to do this native CSS that really improves the workflow process there and makes it easier to create accessible components. So I've heard a lot about Houdini, but I'm not really sure what it is. Could you help explain? So I'm really excited at Houdini. It's essentially a set of browser APIs that gives developers a lot of control over how they want the browser to read and parse CSS. So an example of that is a Properties and Values API. This is sort of seen now as CSS Custom Properties, which allow for you to create these dynamic CSS variables, but it's also a lot more than that. It allows you to specify new types of values and then give those a syntax to read from and then also set default syntaxes. So that's really exciting for things like design systems where you can create these default values for colors and other variables and then be able to override those where you need them. There's also things like the Paint API, which allows for developers to write a canvas basically. It's a canvas like syntax to define how they want that to be rendered on the page from the CSS. So those can be functions that accept arguments. It's really sort of broad right now. You can kind of create anything that you want within that canvas and then have it sort of appear on the page through the CSS as a background that you're painting. And there's like the Layout API. There's a few different ones. I think there's six right now. And it's all sort of intended for every browser to implement so that when developers want to be able to use CSS in a certain way, they don't have to wait for the browsers to write it into the code of the browser itself. They can write a CSS polyfill that can speak to the CSS object model and then be able to have the browser read that and output it as CSS. So it's really exciting. Is this currently available to developers or do they have to wait for it to materialize more? I think it's behind a flag right now in Chrome. It might not be for the Paint API, but the various APIs are at different stages of completion. So they are very, very experimental and it's definitely a do not use in production but feel free to kind of play around with it sort of situation right now. So are there any other APIs that are currently available or soon to be available that excite you in CSS? Well, other than Houdini, I think it's gonna change whether we write CSS. There's also a variable typography that's sort of emerging still, which allows for you to load one font file and then be able to apply different transforms to it. So the width of that or maybe different terminals to that typography. So you're saving space on the server from the font that you're sending to your user, but you have all this control that's dynamic and animatable for how that font appears to the user. So it's really exciting too. Finally, would you recommend any resources to developers who wanna learn more about these things in CSS? There's a lot of really good blogs out there. I'd recommend CSS tricks, Sashing Magazine. I follow a lot of developers on Twitter. That's sort of where I get the bulk of my information. So I retweet a lot. If you're wanting to follow me, it's at Yuna on Twitter at UNA. I also have a podcast called Tools Day where we do a mix of JavaScript and CSS content and we do dive deep into sort of what's new and coming out in sort of those two technologies. Well, Yuna, thank you again for being here. I think we put the Peter Griffin meme to rest. What do you think? I hope so. We just have so many tools now in CSS that we didn't have 10 years ago. That makes it a really dynamic field to be involved in. So I'm looking forward to seeing what happens in the future even. Definitely. So if you'd like to learn more about everything we talked about, check out the links in the description. Thanks for watching and we'll see you next time.