In this episode, we ask if Sass is still relevant in 2022 and if it adds any value modern CSS workflows. Vitaly talks to expert Stephanie Eckles to find out.
Show Notes
Stephanie’s personal website
Stephanie on Twitter
Modern CSS
Level-Up With Modern CSS workshop at SmashingConf
Weekly Update
Things I Wish I’d Known Earlier In My Career written by Vitaly Friedman
How To Test Your MVP Within 2 Weeks (Or Less) written by Sergey Krasotin
How To Create A Vanilla JavaScript Gantt Chart: Adding Task Editing Features written by Anna Prenzel
Voice Control Usability Considerations For Partially Visually Hidden Link Names written by Eric Bailey
Demystifying The New Gatsby Framework written by Juan Diego Rodríguez
Transcript
Vitaly Friedman: She’s a software engineer focused on front-end and she creates front-end learning and development resources with an emphasis on CSS, accessibility, and 11ty. She’s a writer, teacher, and consultant. And she also hosts the podcast Word Wrap, where she and Claire Lipskey talk about a bunch of stuff related to what it even means to be a developer in 21st century. She’s also an advocate for accessibility, scalable CSS and Jamstack. And offline, she’s a mom to two girls and a Cava-corgi, and she enjoys baking. So we know she’s an expert in CSS and accessibility, but did you know that she absolutely loves hip-hop and dancing, occasionally, of course. My Smashing friends, please welcome Stephanie Eckles. Hello, Stephanie, how are you today?
Stephanie: I am smashing.
Vitaly: Oh, that’s wonderful to hear. It’s wonderful to see you as well because you’re writing so many articles. You’re writing so many tutorials and courses and tools. Everything is out there. Just really incredible to actually have an opportunity to just talk to you every now and again, this is wonderful. But I always have to ask, I’m just really, really curious at this point. Stephanie, you create so many tools for people out there to use. And I always think about HTML Recipes and Button Buddy and 11ty Rocks, and so many articles in CSS and trainings and workshops, and you have your own podcast and you’re also a mom. Where do you find time for it? Are you super organized? How does it work?
Stephanie: So I’m not super organized, but if anything about becoming a mom, becoming a parent, or any sort of caregiver, is the time that you do have is more precious and also you are sort of forced to be more efficient. So, when you have different goals, it’s just something that’s important to me to include in my day or make time for.
Vitaly: Yeah, that makes sense. It’s actually quite interesting because the less time you have, the better you get around to your time, the more you optimize your time and all. So, that’s incredible to hear that.
Vitaly: Well, Stephanie, today’s an important day. It’s a very important day, isn’t it? Well, do you know what I’m hinting at, by any chance?
Stephanie: I believe there’s a certain milestone for web developers that we’ve been excited about.
Vitaly: Yes. Isn’t it very exciting? Dear listeners, as we’re recording this interview today, it’s June 15th and this is going to be going in the history for calendars designed and created for web developers for, I don’t know, centuries, maybe? Do you think we’ll still be developing websites in a century? Stephanie?
Stephanie: I do believe that actually.
Vitaly: Okay. So then we will probably be celebrating this day because it’s a day when Microsoft officially ends support for the Internet Explorer desktop application. Are we feeling a little bit nostalgic today, Stephanie? Do you remember any quirks and bugs from IE?
Stephanie: Yes. You know, over my all 15 plus year career history, definitely it’s something I’ve had fondness and other feelings about throughout that history. So yeah, it’s a big day. It’s one we’ve, like you said, marked on the calendars, but yeah, I remember particularly staying up late at an advertising agency I worked at. At the time we were on IE 7 and I could not get a border to show up, of all things. I will always remember that day.
Vitaly: Yes, of course. It’s interesting actually thinking back about, let’s say 15 years, you said, maybe you could just share a bit of light. How did you actually fall in love with the web? I hope you didn’t fall in love with Internet Explorer because then it would be very sad day today. But how did you actually even get to the web? Tell us a little bit of your backstory, if you can.
Stephanie: Absolutely. So I started with Flash, Macromedia Flash, not Adobe Flash. Got that at a summer camp that I had gone to as a teenager. And it was sort of my gateway. I wanted to put my “art”, as it were, on the web, very big quotes around art. So I fell in love with the keyframe animation at that time. And that led to figuring out how to get it on the web, that led to learning a little, tiny, tiny bit about HTML. I remember visiting a forum to get all of my HTML and Flash questions answered. And then I found WordPress and WordPress was just getting out the gate. It was a couple years old when I learned about it as a tool. And spent a decade of my career with WordPress, actually. My degree is in advertising, so, huge part of my career was working as a developer in marketing and advertising. And, that’s kind of the base evolution of how I got into it and throughout that time, front-end development has always been my specialty.
Vitaly: Right, right. That’s exciting. That’s incredible. I’m also thinking about all this times back when I was really playing with all this quirks around Internet Explorer and just in general. And it’s one thing that really excites me, I think, about all of this or excited me back then is that you could actually just go ahead and present something to the entire world and the entire world would come and see it. This is how I ended up creating my own football club website for a club that didn’t exist, which was kind of fun, I guess. And I had maybe 44 visitors over a year. That was very exciting for me at the time.
Vitaly: And I think about this now and I feel like sometimes it’s becoming just incredibly difficult for people to be able to do that. And it feels like you need to learn so much to even be able to publish “hello world” on a page. Do you think this is just how things turned out, we just have become more mature? Or do you think it actually has become a bit more easy, maybe, over the last years because we have browser inconsistencies gone. Tooling has never been better. What’s your take on this?
Stephanie: Yeah. So, in my early days, and I’m sure you experienced this plenty of times as well, you did have to worry about the server. You did have to worry about FTP, which might be a lost acronym for some folks these days. Very early, we didn’t have version control or at least it wasn’t something I certainly knew about not having grown up in a highly technological area. And I think that’s an important point here is it really depends how you’re introduced to the web. If you come in straight from a bootcamp, you’re going to have a very different lens and a very different idea of how to get things on the web than maybe if you’re casually looking around having an interest, trying to find whatever resources.
Stephanie: And I think even then it depends what your goals are. So I think it can be very easy and approachable, but it can also seem extremely complicated and definitely more complicated in a lot of ways because of the tooling. The tooling can either help or hinder that process, for sure. That’s kind of why I’m fond of Jamstack. I think that is a lower level, easier way to get introduced and get your first things on the web, if that’s the goal.
Vitaly: Right. And that’s also wonderful because you’ve been publishing so many tutorials around Jamstack and 11ty, and maybe you could tell us where do you see 11ty, for example, being extremely useful? What kind of projects would it be a default, let’s say, where you would say, “Yeah, that’s probably going to be working best with Jamstack and 11ty.” And where would be its boundaries.
Stephanie: Yeah. Great question. So 11ty is a static site generator and the difference about it versus some other ones is there’s no client-side JavaScript required. You can build from truly flat files, HTML as well as several templating languages, the common ones being Markdown or Nunjucks or Liquid, as well as JavaScript as a templating language. And so it’s very approachable again for different mindsets, so that makes it a great tool, I think, to introduce to teams with different backgrounds, different interests in building a website.
Stephanie: But to your question about when would you choose it or where are the boundaries? So it is great for any time that you, as a starting point, when you don’t have any need for dynamic content. Which isn’t to say that you can’t bring it in, you absolutely can. And in fact, that is something they’re actively working on, is stepping into the idea of Islands architecture and things of that nature.
Stephanie: There’s other tools that are built on top of it, where you can easily bring in a framework that you’re comfortable with like Vue. So there are absolutely ways to expand it. That’s actually why I love it is because you can start at a real simple baseline and just build up as you go. I haven’t found a lot of boundaries. In fact, I’m even doing a project that I am sort of working on secretly dealing with user authentication, and that doesn’t sound like something you could do with static. But with the combination of edge functions and serverless functions, which are super easy to incorporate in, I think that the boundaries are being pushed farther and farther out at this point.
Vitaly: Yeah. That’s very exciting to hear just because when were moving from WordPress to Jamstack back in the day, it feels like it was a century ago now, although it was just five years ago, I believe. It was kind of a, “Wow, how do we do this?” Because we have the shop, the membership and well authentication then of course then as well. And so many other moving parts and the comments, all search and so on. And yeah, in fact, I think that, in many ways, Jamstack has been this really good compromise. I remember vividly this excitement that everybody had with fully client-side rendered applications. And that was the time when it felt at least like a revolution, really. And then it was pushed back. Would you say that Jamstack is kind of that push back somewhere to the server? Not too far away from the client. How do you feel about Jamstack? Is it the golden center for the universe of web development?
Stephanie: Yeah. You know, I’m definitely biased at this point. I’ve been working with it for a little over two years now, and so I’ve seen some of that evolution happening. And, again, having that history with WordPress, it’s one of the reasons I really enjoyed 11ty in particular, having that templating ability, but having that static rendered, you don’t have to worry about SSR, it’s just simply static. Your homepage likely is always static. Your marketing website, largely is static.
Stephanie: But, being that center, I really do think it is because you also have… You’re not prevented from incorporating a CMS, for example. You can bring that in. You can still of course add whatever other, as I mentioned, flavor of JavaScript that you need. It doesn’t have to be truly 100% static, but that’s your baseline. And we all know that’s where we put an emphasis on semantics, accessibility, progressive enhancement. And I think that’s another thing you’ll find in the community if you haven’t quite yet gotten into Jamstack and 11ty, in particular, is a focus on returning to that way of building. And I think that’s the part I see a quote unquote “return” to, is caring about those things.
Vitaly: Absolutely. Absolutely. It all fits in nicely then, somehow, with like you mentioned accessibility, of course, and CSS is just something that we both have in common. That we just have an incredible admiration and love and passion for. And every time I read an article that you’re writing, I feel like, “oh, you can do that with CSS now. That’s wonderful to see.”
Vitaly: So maybe you could shed some light on how do you work with CSS? Do you have a particular methodology that you tend to rely on now? Or the way of structuring things? The way of naming things? Of course naming is the hardest part of it all. What seems to be working best for you, for your work, for your projects in terms of building things, in terms of, maybe just to simplify, how do you even start working on a project when it comes to CSS? The folders, the naming, the methodology and stuff like that?
Stephanie: Yeah, absolutely. So I still use Sass. I will continue to use Sass strictly because it allows that organization and I think that’s really critical. I think that’s where a lot of folks begin to have a less than pleasant relationship with CSS, is trying to figure out how to organize. And so Sass for me is that bridge, it’s very critical in my tool belt.
Stephanie: Alongside that, I do tend to use BEM. I’m not always completely strict on it. I don’t always completely rely on even having classes. I think it’s very powerful to focus on the semantics. And I also, I think it’s important to know where I’m coming from. So part of my history involves working on design systems. And so, through that, I’ve become a big proponent of creating components, whether that’s a formal design system or just the way that you’re approaching and organizing and architecting your styles.
Stephanie: I find that to be helpful for me to think of my system as components and to think of my system as having, some folks might know as design tokens, but having like a series of colors and these other, primitive variables, would be another common term, where those are leading into the system. I’m definitely using custom properties. That’s been a huge game changer in how I approach writing styles, both from… Folks might be used to opening up a site, looking at the HTML element and seeing just a whole laundry list of custom properties. I keep mine a little more focused, like I said, colors and really high up global tokens. But an important way that I write my styles and my components is really leaning on custom properties to allow very easy variations of those, very scalable variations of those.
Stephanie: And so, you mentioned my workshop earlier, that’s something we really go into because when you are starting to incorporate those things, you start to… I think it was kind of a light bulb moment for me, learning about these things where my styles became so much more simple, so much more efficient, so much less repetitive, being able to use things like custom properties. So Sass, custom properties, a little sprinkle of BEM, and also, in some cases, relying on particular element selectors that directly hook into accessibility features. So it’s kind of a combination of those things, but it all starts for me at the HTML level. And then I go to my CSS. So, that’s also an important part of my process.
Vitaly: Sure. Of course. Yeah. I also remember vividly that moment when we actually ended up getting custom properties in all the browsers, and I was like, “Wow, you can now do custom kind of variables?” CSS variables, dynamic variables now in the browser. That was incredible.
Vitaly: That also brings me to this notion of… This is a conversation that I keep having with some folks, just thinking about what is the role of Sass today and how is it going to evolve? Just to bring it a little bit more in the context, we now have custom properties for years now. But we also have these proposals for scoping and for nesting, which might be coming up soon. But then on top of that… I’m really excited about that, by the way, just because right now, every time you’re using Sass, we have to produce this humongous chain of classes, if you do nesting, nesting, nesting, nesting.
Vitaly: But if it is actually just written in CSS and just clean and beautiful on how it should be. Plus on top of that, of course, cascade layers, which are already well supported. So I’m wondering at this point, of course, not to mention… I mean, so many things coming up, it’s incredible in CSS, the color mix, color contrast, lighten, darken, all those things that are also coming to native CSS. So I’m wondering just about your take, where do you see now, Sass moving? Is it going to be more for literally processing for things like Mixins, functions, those kind of things? And where would you say this should be in CSS?, and that should be probably staying Sass?
Stephanie: Yeah. So all of those are super valid comparisons to how features and tools such as Sass has informed or helped inform the evolution of CSS as a language. And for sure, I’m excited for those things to come and be native. As I mentioned, organizations is still a huge reason I’ll continue to use Sass to compile my style sheets and still have that separation, like I said, of my components or whatever other parts that are coming together.
Stephanie: Also in a design systems context, or other contexts where you are creating a reusable system and you want to have a little bit better management of your, again, whether you call them tokens or whatever you call those sort of baseline configuration, of how the different customizations enter that style sheet is, I believe still where Sass is going to shine.
Stephanie: And like you said, functions, Mixins. I’m finding myself using less Mixins these days, because, like I said, custom properties gap fills what I was using Mixins for, in some cases. But I still use Sass for functions. Absolutely. So, whether that’s looping through my tokens to spit out automatically different utility styles. To me, that’s still plenty useful enough that I’ll continue to use Sass and that’s functionality that we don’t see in the horizon for CSS.
Stephanie: But yeah, I definitely have changed some of the ways I’ve used Sass. Using :is() and :where(), sometimes those help simplify my selectors in a way that maybe was using Sass for before. So yeah, I’m absolutely a fan of switching over the functionality that should belong in the browser to the browser, but still finding the organization and functions, in particular, to be useful in Sass for me.
Vitaly: Yeah, absolutely. It’s interesting because you mentioned BEM previously and I just recently had a conversation with a few JavaScript developers and the conversation went in a very unusual way for me, because usually I would be comfortable using BEM. I mean, just like you, not the dogmatic traditional the big BEM, but the small BEM. And I do like my hyphens and I do like my underscores, so don’t judge me on that.
Vitaly: But I heard this notion of, BEM, is it still a thing?Isn’t it like from 2017 or ’18 something? Why would you use BEM today, if you have Tailwind and you have CSS and JS if needed? Why do you work so hard to have the naming and have this relationship, which could be potentially just, create user using atomic classes or just writing some CSS and JS.
Vitaly: And I had my arguments about why I would still prefer BEM, but I see that many people feel like, isn’t BEM outdated? And, isn’t Tailwind the thing now? So what are your thoughts on that? And maybe specifically on Tailwind that would be probably quite relevant.
Stephanie: So for me, it’s not the right tool and that has to do with the way that I work, but also the team conventions that I have. And that’s usually what I tell folks, is it depends what kind of project you’re working on. It depends on the makeup of your team, your skillset, your project architecture, just like anytime you choose a tool, all of these things play a part.
Stephanie: As I mentioned, I’m a proponent of components. And so an important thing to remember is that not everybody is using a JavaScript framework. In fact, if we look at global stats, that’s actually a pretty minor part of the web. I know it feels like everybody is using React or whatever other tool, but it’s actually not true in practice. And especially if you’re coming into an established team that is not the latest. A new startup or something. You may not find Tailwind.
Stephanie: And so that’s fine. But the point is that some of these methodologies aren’t as transferable across projects either. So if you’re solely producing one type of project, one application, one product, it’s easier to make a decision towards something like Tailwind, rather than if you’re working on a project that’s intended to be used across multiple outcomes. Maybe I’m using it on my 11ty static site where I’m writing in Nunjucks. But I also need to share it to a back-end application that’s built in React. So my style sheet is going to be a lot more portable if doesn’t rely on CSS and JS, or if it’s not completely wrapped up already in React components. And, teams have found ways to overcome that. And again, your experience is going to heavily weigh into what choice you make here.
Stephanie: Another big one that comes up for folks is the issue of documentation and I absolutely respect that. Where it’s easier sometimes to pick up a tool that has ready-made documentation. So, that’s absolutely consideration in making that decision. I wouldn’t say that BEM is outdated. It’s just a naming convention where I think, as I said, it lends to being a little more portable. The intent of it is to be able to identify what set of styles go together. So we can apply that in multiple locations and have a good idea. I think perhaps in some instances it might be a little more memorable if you don’t have a system where you are able to create and template out components, because again, that’s not every environment that folks are practically working in.
Vitaly: Absolutely. Yeah, of course. It’s also fun to be just talking, thinking about all the things you could do with CSS and moving back to what we talked about briefly before, so many powerful things coming up, it seems like. Just a recent announcement of all the features coming to Safari 16. This is just unbelievable. It’s like Christmas coming in before Christmas. And then of course we have all the wonderful things coming up in Chrome 103 and it’s just all wonderful. Incredible. What are you most excited about of all of those things? Is there anything where you say, “okay, this is life changing for me, this is changing everything that I’m doing with CSS.”
Stephanie: For me, it’s the one, two punch of container queries and :has(). I am excited for both of those to be stable. And again, coming from the design system context in particular, I just think we’re going to be able to create the most robust and scalable components we literally haven’t been able to achieve before. So I’m very excited about that as my top two picks coming up here.
Vitaly: Okay, well maybe we should be expecting some articles from you on them, although maybe you have written them already, who knows? I think you might have. Do you find yourself writing as much as you used to be or do you have a lot of writing coming up in the months to come?
Stephanie: Yeah. So writing’s taken a tiny bit of a backseat just because I’ve been working on a project a little more longer term, that’s a build out of a new side project here. So yeah, it makes it tough because I have a backlog definitely of writing ideas, so, hope to get back to that soon.
Vitaly: I hope we’ll get there as well. Well maybe, quickly a few questions to also slowly wrap up. Do you think you have a dream feature that you would love to CSS to have? Frankly, I don’t know, to be honest, if I had to answer that question, I’d be probably out of ideas because I always wanted the parent selector, well, :has() is much more than that, but we have that. And I always wanted container queries. Well, we have that and I always wanted subgroup, well, we kind of have it coming. What else should I wish for? I don’t know. Do you have any dream features that CSS desperately needs?
Stephanie: I think I’m similar as you, at this point, it’s waiting for certain things to land. A year or two ago. I probably would’ve said color contrast in the browser, but that’s even coming. So yeah, the list is definitely shortening of what, we still are waiting for. Another one for me, would’ve been a more native way to do fluid typography and we are also getting that once container queries hits because of container units, we’ll be able to do that.
Stephanie: So yeah, I think the last thing for me is, we have media queries related to Viewport. We’re going to get the container ones. The last thing for me would be expanding that a bit to a few more contexts, like a user browser zoom context would be useful to me. And I’m sure there’s some other device features, and things in that area might be the remaining area to grow a little bit. Sometimes there’s privacy concerns, hardware limitations, these things that prevent those particular features. But yeah, that’s what I kind of have my eye on.
Vitaly: Excellent. Sounds good. Sounds exciting. I’m just really excited to see what is coming up next. It just always keeps me busy. Sometimes I would find myself just going to something like Chromestatus.com just to see, is there anything new on the horizon? Just because I’m curious. Usually it takes a little bit longer than just a couple of days to see something new showing up though. But yeah, this is how excited I am.
Vitaly: Well, so we’ve been learning a little bit about CSS in this episode today. So what have you been learning about lately, Stephanie? Maybe any podcasts that you can recommend? Any books, any, I don’t know, TV shows, anything that’s really got your interest or attracted your interest over the last few months or so?
Stephanie: Yeah, so an area I unexpectedly found myself enjoying is watching developers on Twitch. So I’ve been learning all kinds of stuff from some fabulous streamers. Folks might already know, but White Panther whose Salma Alam-Naylor is excellent. And also I’ve really enjoyed Alex Trost who runs the Frontend Horse community. So if you’re looking to learn maybe some unexpected things in a little different format, that’s what I encourage folks to do. Kind of shake up where you’re getting your inspiration.
Vitaly: Excellent. Well, if you’d like to learn a bit more from Stephanie, we have an upcoming Smashing workshop, which is going to look into all kind of things CSS. probably also Sass, probably also BEM, and probably also 11ty, if I’m not mistaken. This is taking place on July 11-25th. And of course there are a few tickets left, so please do take a look and join in. And if you, dear listener, would like to hear more from Stephanie altogether in general, you can also find her on Twitter where she’s @5tp3h or Steph and on her website at https, of course, thingdobecreate.com.
Vitaly: Well, thanks for joining us today, Stephanie. Do you have any parting words with the wonderful community? Things that will remain in somebody’s memories centuries after they hear it here today?
Stephanie: Big responsibility. Experiment, play and share what you know.