Drew is a Staff Engineer specialising in Frontend at Snyk as well as being a co-founder of Notist and the small content management system Perch. Prior to this More aboutDrew

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.

Website development

Vitaly Friedman Shes a software engineer focused on front-end and she creates front-end learning and development resources with an emphasis on CSS accessibility and 11ty. Shes 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. Shes also an advocate for accessibility scalable CSS and Jamstack. And offline shes a mom to two girls and a Cava-corgi and she enjoys baking. So we know shes 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

Vitaly Oh thats wonderful to hear. Its wonderful to see you as well because youre writing so many articles. Youre 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 Im 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 youre also a mom. Where do you find time for it Are you super organized How does it work

Stephanie So Im 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 its just something thats important to me to include in my day or make time for.

Wordpress Development Services

Vitaly Yeah that makes sense. Its 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 thats incredible to hear that.

Vitaly Well Stephanie todays an important day. Its a very important day isnt it Well do you know what Im hinting at by any chance

Stephanie I believe theres a certain milestone for web developers that weve been excited about.

Best Web Development Company In Ludhiana

Vitaly Yes. Isnt it very exciting Dear listeners as were recording this interview today its June 15th and this is going to be going in the history for calendars designed and created for web developers for I dont know centuries maybe Do you think well still be developing websites in a century Stephanie

Vitaly Okay. So then we will probably be celebrating this day because its 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 its something Ive had fondness and other feelings about throughout that history. So yeah its a big day. Its one weve 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. Its interesting actually thinking back about lets 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 didnt 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 thats 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. Thats exciting. Thats incredible. Im also thinking about all this times back when I was really playing with all this quirks around Internet Explorer and just in general. And its 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 didnt 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 its 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. Whats your take on this

Stephanie Yeah. So in my early days and Im 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 didnt have version control or at least it wasnt something I certainly knew about not having grown up in a highly technological area. And I think thats an important point here is it really depends how youre introduced to the web. If you come in straight from a bootcamp youre going to have a very different lens and a very different idea of how to get things on the web than maybe if youre 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. Thats kind of why Im fond of Jamstack. I think that is a lower level easier way to get introduced and get your first things on the web if thats the goal.

Vitaly Right. And thats also wonderful because youve 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 lets say where you would say Yeah thats 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 theres 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 its 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 dont have any need for dynamic content. Which isnt to say that you cant bring it in you absolutely can. And in fact that is something theyre actively working on is stepping into the idea of Islands architecture and things of that nature.

Stephanie Theres other tools that are built on top of it where you can easily bring in a framework that youre comfortable with like Vue. So there are absolutely ways to expand it. Thats actually why I love it is because you can start at a real simple baseline and just build up as you go. I havent found a lot of boundaries. In fact Im even doing a project that I am sort of working on secretly dealing with user authentication and that doesnt 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. Thats 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 Im definitely biased at this point. Ive been working with it for a little over two years now and so Ive seen some of that evolution happening. And again having that history with WordPress its one of the reasons I really enjoyed 11ty in particular having that templating ability but having that static rendered you dont have to worry about SSR its 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 Youre 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 doesnt have to be truly 100 static but thats your baseline. And we all know thats where we put an emphasis on semantics accessibility progressive enhancement. And I think thats another thing youll find in the community if you havent quite yet gotten into Jamstack and 11ty in particular is a focus on returning to that way of building. And I think thats 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 youre writing I feel like oh you can do that with CSS now. Thats 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 thats really critical. I think thats 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 its very critical in my tool belt.

Stephanie Alongside that I do tend to use BEM. Im not always completely strict on it. I dont always completely rely on even having classes. I think its very powerful to focus on the semantics. And I also I think its important to know where Im coming from. So part of my history involves working on design systems. And so through that Ive become a big proponent of creating components whether thats a formal design system or just the way that youre 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. Im definitely using custom properties. Thats 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 thats 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 its 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 thats 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 Im really excited about that by the way just because right now every time youre 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 Im wondering at this point of course not to mention I mean so many things coming up its incredible in CSS the color mix color contrast lighten darken all those things that are also coming to native CSS. So Im 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 Im excited for those things to come and be native. As I mentioned organizations is still a huge reason Ill 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. Im 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 thats looping through my tokens to spit out automatically different utility styles. To me thats still plenty useful enough that Ill continue to use Sass and thats functionality that we dont see in the horizon for CSS.

Stephanie But yeah I definitely have changed some of the ways Ive used Sass. Using is and where sometimes those help simplify my selectors in a way that maybe was using Sass for before. So yeah Im 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. Its 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 dont judge me on that.

Vitaly But I heard this notion of BEM is it still a thingIsnt 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 isnt BEM outdated And isnt 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 its not the right tool and that has to do with the way that I work but also the team conventions that I have. And thats usually what I tell folks is it depends what kind of project youre 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 Im 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 thats actually a pretty minor part of the web. I know it feels like everybody is using React or whatever other tool but its actually not true in practice. And especially if youre coming into an established team that is not the latest. A new startup or something. You may not find Tailwind.

Stephanie And so thats fine. But the point is that some of these methodologies arent as transferable across projects either. So if youre solely producing one type of project one application one product its easier to make a decision towards something like Tailwind rather than if youre working on a project thats intended to be used across multiple outcomes. Maybe Im using it on my 11ty static site where Im writing in Nunjucks. But I also need to share it to a back-end application thats built in React. So my style sheet is going to be a lot more portable if doesnt rely on CSS and JS or if its 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 its easier sometimes to pick up a tool that has ready-made documentation. So thats absolutely consideration in making that decision. I wouldnt say that BEM is outdated. Its 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 dont have a system where you are able to create and template out components because again thats not every environment that folks are practically working in.

Vitaly Absolutely. Yeah of course. Its 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. Its like Christmas coming in before Christmas. And then of course we have all the wonderful things coming up in Chrome 103 and its 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 Im doing with CSS.

Stephanie For me its 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 were going to be able to create the most robust and scalable components we literally havent been able to achieve before. So Im 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 writings taken a tiny bit of a backseat just because Ive been working on a project a little more longer term thats 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 well 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 dont know to be honest if I had to answer that question Id 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 dont know. Do you have any dream features that CSS desperately needs

Stephanie I think Im similar as you at this point its waiting for certain things to land. A year or two ago. I probably wouldve said color contrast in the browser but thats even coming. So yeah the list is definitely shortening of what we still are waiting for. Another one for me wouldve been a more native way to do fluid typography and we are also getting that once container queries hits because of container units well be able to do that.

Stephanie So yeah I think the last thing for me is we have media queries related to Viewport. Were 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 Im sure theres some other device features and things in that area might be the remaining area to grow a little bit. Sometimes theres privacy concerns hardware limitations these things that prevent those particular features. But yeah thats what I kind of have my eye on.

Vitaly Excellent. Sounds good. Sounds exciting. Im 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 Im 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 weve 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 dont know TV shows anything thats 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 Ive 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 Ive really enjoyed Alex Trost who runs the Frontend Horse community. So if youre looking to learn maybe some unexpected things in a little different format thats what I encourage folks to do. Kind of shake up where youre getting your inspiration.

Vitaly Excellent. Well if youd 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 Im 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 shes 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 somebodys memories centuries after they hear it here today