On this episode, we ask if Sass continues to be related in 2022 and if it provides any worth trendy CSS workflows. Vitaly talks to skilled Stephanie Eckles to seek out out.
Present Notes
Stephanie’s private web site
Stephanie on Twitter
Trendy CSS
Degree-Up With Trendy CSS workshop at SmashingConf
Weekly Replace
Issues I Want I’d Recognized Earlier In My Profession written by Vitaly Friedman
How To Take a look at Your MVP Inside 2 Weeks (Or Much less) written by Sergey Krasotin
How To Create A Vanilla JavaScript Gantt Chart: Including Process Modifying Options written by Anna Prenzel
Voice Management Usability Issues For Partially Visually Hidden Hyperlink Names written by Eric Bailey
Demystifying The New Gatsby Framework written by Juan Diego Rodríguez
Transcript
Vitaly Friedman: She’s a software program engineer targeted on front-end and she or he creates front-end studying and improvement assets with an emphasis on CSS, accessibility, and 11ty. She’s a author, instructor, and guide. And he or she additionally hosts the podcast Phrase Wrap, the place she and Claire Lipskey discuss a bunch of stuff associated to what it even means to be a developer in twenty first century. She’s additionally an advocate for accessibility, scalable CSS and Jamstack. And offline, she’s a mother to 2 ladies and a Cava-corgi, and she or he enjoys baking. So we all know she’s an skilled in CSS and accessibility, however do you know that she completely loves hip-hop and dancing, sometimes, after all. My Smashing pals, please welcome Stephanie Eckles. Hiya, Stephanie, how are you as we speak?
Stephanie: I’m smashing.
Vitaly: Oh, that’s fantastic to listen to. It’s fantastic to see you as effectively since you’re writing so many articles. You’re writing so many tutorials and programs and instruments. All the things is on the market. Simply actually unimaginable to truly have a chance to simply speak to you each from time to time, that is fantastic. However I all the time should ask, I’m simply actually, actually curious at this level. Stephanie, you create so many instruments for folks on the market to make use of. And I all the time take into consideration HTML Recipes and Button Buddy and 11ty Rocks, and so many articles in CSS and trainings and workshops, and you’ve got your personal podcast and also you’re additionally a mother. The place do you make time for it? Are you tremendous organized? How does it work?
Stephanie: So I’m not tremendous organized, but when something about changing into a mother, changing into a father or mother, or any form of caregiver, is the time that you simply do have is extra valuable and likewise you’re form of pressured to be extra environment friendly. So, when you may have totally different targets, it’s simply one thing that’s essential to me to incorporate in my day or find time for.
Vitaly: Yeah, that is sensible. It’s truly fairly fascinating as a result of the much less time you may have, the higher you get round to your time, the extra you optimize your time and all. So, that’s unimaginable to listen to that.
Vitaly: Nicely, Stephanie, as we speak’s an essential day. It’s an important day, isn’t it? Nicely, have you learnt what I’m hinting at, by any likelihood?
Stephanie: I imagine there’s a sure milestone for internet builders that we’ve been enthusiastic about.
Vitaly: Sure. Isn’t it very thrilling? Pricey listeners, as we’re recording this interview as we speak, it’s June fifteenth and that is going to be going within the historical past for calendars designed and created for internet builders for, I don’t know, centuries, possibly? Do you assume we’ll nonetheless be creating web sites in a century? Stephanie?
Stephanie: I do imagine that truly.
Vitaly: Okay. So then we are going to most likely be celebrating today as a result of it’s a day when Microsoft formally ends help for the Web Explorer desktop utility. Are we feeling a little bit bit nostalgic as we speak, Stephanie? Do you keep in mind any quirks and bugs from IE?
Stephanie: Sure. , over my all 15 plus 12 months profession historical past, positively it’s one thing I’ve had fondness and different emotions about all through that historical past. So yeah, it’s a giant day. It’s one we’ve, such as you stated, marked on the calendars, however yeah, I keep in mind significantly staying up late at an promoting company I labored at. On the time we had been on IE 7 and I couldn’t get a border to indicate up, of all issues. I’ll all the time keep in mind that day.
Vitaly: Sure, after all. It’s fascinating truly considering again about, let’s say 15 years, you stated, possibly you might simply share a bit of sunshine. How did you truly fall in love with the online? I hope you didn’t fall in love with Web Explorer as a result of then it will be very unhappy day as we speak. However how did you truly even get to the online? Inform us a little bit little bit of your backstory, for those who can.
Stephanie: Completely. So I began with Flash, Macromedia Flash, not Adobe Flash. Bought that at a summer season camp that I had gone to as a young person. And it was form of my gateway. I needed to place my “artwork”, because it had been, on the internet, very large quotes round artwork. So I fell in love with the keyframe animation at the moment. And that led to determining find out how to get it on the internet, that led to studying a little bit, tiny, tiny bit about HTML. I keep in mind visiting a discussion board to get all of my HTML and Flash questions answered. After which I discovered WordPress and WordPress was simply getting out the gate. It was a pair years previous after I discovered about it as a device. And spent a decade of my profession with WordPress, truly. My diploma is in promoting, so, big a part of my profession was working as a developer in advertising and marketing and promoting. And, that’s type of the bottom evolution of how I received into it and all through that point, front-end improvement has all the time been my specialty.
Vitaly: Proper, proper. That’s thrilling. That’s unimaginable. I’m additionally fascinated with all this instances again after I was actually taking part in with all this quirks round Web Explorer and simply basically. And it’s one factor that basically excites me, I feel, about all of this or excited me again then is that you might truly simply go forward and current one thing to the complete world and the complete world would come and see it. That is how I ended up creating my very own soccer membership web site for a membership that didn’t exist, which was type of enjoyable, I suppose. And I had possibly 44 guests over a 12 months. That was very thrilling for me on the time.
Vitaly: And I take into consideration this now and I really feel like generally it’s changing into simply extremely tough for folks to have the ability to do this. And it appears like it’s good to be taught a lot to even be capable of publish “good day world” on a web page. Do you assume that is simply how issues turned out, we simply have change into extra mature? Or do you assume it truly has change into a bit simpler, possibly, over the past years as a result of we’ve browser inconsistencies gone. Tooling has by no means been higher. What’s your tackle this?
Stephanie: Yeah. So, in my early days, and I’m positive you skilled this loads of instances as effectively, you probably did have to fret concerning the server. You probably did have to fret about FTP, which is likely to be a misplaced acronym for some people lately. Very early, we didn’t have model management or a minimum of it wasn’t one thing I definitely knew about not having grown up in a extremely technological space. And I feel that’s an essential level right here is it actually relies upon the way you’re launched to the online. If you happen to are available in straight from a bootcamp, you’re going to have a really totally different lens and a really totally different concept of find out how to get issues on the internet than possibly for those who’re casually wanting round having an curiosity, looking for no matter assets.
Stephanie: And I feel even then it relies upon what your targets are. So I feel it may be very straightforward and approachable, however it could additionally appear extraordinarily difficult and positively extra difficult in lots of methods due to the tooling. The tooling can both assist or hinder that course of, for positive. That’s type of why I’m keen on Jamstack. I feel that could be a decrease stage, simpler strategy to get launched and get your first issues on the internet, if that’s the objective.
Vitaly: Proper. And that’s additionally fantastic since you’ve been publishing so many tutorials round Jamstack and 11ty, and possibly you might inform us the place do you see 11ty, for instance, being extraordinarily helpful? What sort of initiatives would it not be a default, let’s say, the place you’d say, “Yeah, that’s most likely going to be working greatest with Jamstack and 11ty.” And the place could be its boundaries.
Stephanie: Yeah. Nice query. So 11ty is a static website generator and the distinction about it versus another ones is there’s no client-side JavaScript required. You possibly can construct from really flat information, HTML in addition to a number of templating languages, the widespread ones being Markdown or Nunjucks or Liquid, in addition to JavaScript as a templating language. And so it’s very approachable once more for various mindsets, in order that makes it an ideal device, I feel, to introduce to groups with totally different backgrounds, totally different pursuits in constructing an internet site.
Stephanie: However to your query about when would you select it or the place are the boundaries? So it’s nice for any time that you simply, as a place to begin, while you don’t have any want for dynamic content material. Which isn’t to say which you could’t carry it in, you completely can. And in reality, that’s one thing they’re actively engaged on, is moving into the thought of Islands structure and issues of that nature.
Stephanie: There’s different instruments which can be constructed on prime of it, the place you possibly can simply herald a framework that you simply’re snug with like Vue. So there are completely methods to broaden it. That’s truly why I like it is as a result of you can begin at an actual easy baseline and simply construct up as you go. I haven’t discovered lots of boundaries. The truth is, I’m even doing a challenge that I’m form of engaged on secretly coping with person authentication, and that doesn’t sound like one thing you might do with static. However with the mix of edge capabilities and serverless capabilities, that are tremendous straightforward to include in, I feel that the boundaries are being pushed farther and farther out at this level.
Vitaly: Yeah. That’s very thrilling to listen to simply because when had been transferring from WordPress to Jamstack again within the day, it feels prefer it was a century in the past now, though it was simply 5 years in the past, I imagine. It was type of a, “Wow, how will we do that?” As a result of we’ve the store, the membership and effectively authentication then after all then as effectively. And so many different transferring elements and the feedback, all search and so forth. And yeah, actually, I feel that, in some ways, Jamstack has been this actually good compromise. I keep in mind vividly this pleasure that everyone had with absolutely client-side rendered purposes. And that was the time when it felt a minimum of like a revolution, actually. After which it was pushed again. Would you say that Jamstack is type of that push again someplace to the server? Not too distant from the shopper. How do you are feeling about Jamstack? Is it the golden heart for the universe of internet improvement?
Stephanie: Yeah. , I’m positively biased at this level. I’ve been working with it for a little bit over two years now, and so I’ve seen a few of that evolution taking place. And, once more, having that historical past with WordPress, it’s one of many causes I actually loved 11ty specifically, having that templating skill, however having that static rendered, you don’t have to fret about SSR, it’s simply merely static. Your homepage probably is all the time static. Your advertising and marketing web site, largely is static.
Stephanie: However, being that heart, I actually do assume it’s since you even have… You’re not prevented from incorporating a CMS, for instance. You possibly can carry that in. You possibly can nonetheless after all add no matter different, as I discussed, taste of JavaScript that you simply want. It doesn’t should be really 100% static, however that’s your baseline. And everyone knows that’s the place we put an emphasis on semantics, accessibility, progressive enhancement. And I feel that’s one other factor you’ll discover in the neighborhood for those who haven’t fairly but gotten into Jamstack and 11ty, specifically, is a give attention to returning to that manner of constructing. And I feel that’s the half I see a quote unquote “return” to, is caring about these issues.
Vitaly: Completely. Completely. All of it matches in properly then, in some way, with such as you talked about accessibility, after all, and CSS is simply one thing that we each have in widespread. That we simply have an unimaginable admiration and love and keenness for. And each time I learn an article that you simply’re writing, I really feel like, “oh, you are able to do that with CSS now. That’s fantastic to see.”
Vitaly: So possibly you might shed some mild on how do you’re employed with CSS? Do you may have a specific methodology that you simply are likely to depend on now? Or the way in which of structuring issues? The best way of naming issues? After all naming is the toughest a part of all of it. What appears to be working greatest for you, in your work, in your initiatives by way of constructing issues, by way of, possibly simply to simplify, how do you even begin engaged on a challenge on the subject of CSS? The folders, the naming, the methodology and stuff like that?
Stephanie: Yeah, completely. So I nonetheless use Sass. I’ll proceed to make use of Sass strictly as a result of it permits that group and I feel that’s actually vital. I feel that’s the place lots of people start to have a lower than nice relationship with CSS, is making an attempt to determine find out how to manage. And so Sass for me is that bridge, it’s very vital in my device belt.
Stephanie: Alongside that, I do have a tendency to make use of BEM. I’m not all the time utterly strict on it. I don’t all the time utterly depend on even having lessons. I feel it’s very highly effective to give attention to the semantics. And I additionally, I feel it’s essential to know the place I’m coming from. So a part of my historical past includes engaged on design methods. And so, by means of that, I’ve change into a giant proponent of making elements, whether or not that’s a proper design system or simply the way in which that you simply’re approaching and organizing and architecting your types.
Stephanie: I discover that to be useful for me to think about my system as elements and to think about my system as having, some people would possibly know as design tokens, however having like a collection of colours and these different, primitive variables, could be one other widespread time period, the place these are main into the system. I’m positively utilizing customized properties. That’s been an enormous sport changer in how I strategy writing types, each from… Of us is likely to be used to opening up a website, wanting on the HTML factor and seeing only a entire laundry listing of customized properties. I preserve mine a little bit extra targeted, like I stated, colours and actually excessive up international tokens. However an essential manner that I write my types and my elements is actually leaning on customized properties to permit very straightforward variations of these, very scalable variations of these.
Stephanie: And so, you talked about my workshop earlier, that’s one thing we actually go into as a result of if you find yourself beginning to incorporate these issues, you begin to… I feel it was type of a lightweight bulb second for me, studying about this stuff the place my types turned a lot extra easy, a lot extra environment friendly, a lot much less repetitive, having the ability to use issues like customized properties. So Sass, customized properties, a little bit sprinkle of BEM, and likewise, in some circumstances, counting on explicit factor selectors that instantly hook into accessibility options. So it’s type of a mixture of these issues, but it surely all begins for me on the HTML stage. After which I’m going to my CSS. So, that’s additionally an essential a part of my course of.
Vitaly: Certain. After all. Yeah. I additionally keep in mind vividly that second after we truly ended up getting customized properties in all of the browsers, and I used to be like, “Wow, now you can do customized type of variables?” CSS variables, dynamic variables now within the browser. That was unimaginable.
Vitaly: That additionally brings me to this notion of… This can be a dialog that I preserve having with some people, simply fascinated with what’s the function of Sass as we speak and the way is it going to evolve? Simply to carry it a little bit bit extra within the context, we now have customized properties for years now. However we even have these proposals for scoping and for nesting, which is likely to be arising quickly. However then on prime of that… I’m actually enthusiastic about that, by the way in which, simply because proper now, each time you’re utilizing Sass, we’ve to supply this humongous chain of lessons, for those who do nesting, nesting, nesting, nesting.
Vitaly: However whether it is truly simply written in CSS and simply clear and delightful on the way it must be. Plus on prime of that, after all, cascade layers, that are already effectively supported. So I’m questioning at this level, after all, to not point out… I imply, so many issues arising, it’s unimaginable in CSS, the colour combine, coloration distinction, lighten, darken, all these issues which can be additionally coming to native CSS. So I’m questioning nearly your take, the place do you see now, Sass transferring? Is it going to be extra for actually processing for issues like Mixins, capabilities, these type of issues? And the place would you say this must be in CSS?, and that must be most likely staying Sass?
Stephanie: Yeah. So all of these are tremendous legitimate comparisons to how options and instruments resembling Sass has knowledgeable or helped inform the evolution of CSS as a language. And for positive, I’m excited for these issues to come back and be native. As I discussed, organizations continues to be an enormous purpose I’ll proceed to make use of Sass to compile my type sheets and nonetheless have that separation, like I stated, of my elements or no matter different elements which can be coming collectively.
Stephanie: Additionally in a design methods context, or different contexts the place you’re making a reusable system and also you wish to have a little bit bit higher administration of your, once more, whether or not you name them tokens or no matter you name these form of baseline configuration, of how the totally different customizations enter that type sheet is, I imagine nonetheless the place Sass goes to shine.
Stephanie: And such as you stated, capabilities, Mixins. I’m discovering myself utilizing much less Mixins lately, as a result of, like I stated, customized properties hole fills what I used to be utilizing Mixins for, in some circumstances. However I nonetheless use Sass for capabilities. Completely. So, whether or not that’s looping by means of my tokens to spit out routinely totally different utility types. To me, that’s nonetheless lots helpful sufficient that I’ll proceed to make use of Sass and that’s performance that we don’t see within the horizon for CSS.
Stephanie: However yeah, I positively have modified among the methods I’ve used Sass. Utilizing :is() and :the place(), generally these assist simplify my selectors in a manner that possibly was utilizing Sass for earlier than. So yeah, I’m completely a fan of switching over the performance that ought to belong within the browser to the browser, however nonetheless discovering the group and capabilities, specifically, to be helpful in Sass for me.
Vitaly: Yeah, completely. It’s fascinating since you talked about BEM beforehand and I only recently had a dialog with a number of JavaScript builders and the dialog went in a really uncommon manner for me, as a result of often I might be snug utilizing BEM. I imply, identical to you, not the dogmatic conventional the large BEM, however the small BEM. And I do like my hyphens and I do like my underscores, so don’t choose me on that.
Vitaly: However I heard this notion of, BEM, is it nonetheless a factor?Isn’t it like from 2017 or ’18 one thing? Why would you utilize BEM as we speak, if in case you have Tailwind and you’ve got CSS and JS if wanted? Why do you’re employed so laborious to have the naming and have this relationship, which could possibly be doubtlessly simply, create person utilizing atomic lessons or simply writing some CSS and JS.
Vitaly: And I had my arguments about why I might nonetheless want BEM, however I see that many individuals really feel like, isn’t BEM outdated? And, isn’t Tailwind the factor now? So what are your ideas on that? And possibly particularly on Tailwind that will be most likely fairly related.
Stephanie: So for me, it’s not the correct device and that has to do with the way in which that I work, but in addition the workforce conventions that I’ve. And that’s often what I inform people, is it relies upon what sort of challenge you’re engaged on. It depends upon the make-up of your workforce, your skillset, your challenge structure, identical to anytime you select a device, all of this stuff play a component.
Stephanie: As I discussed, I’m a proponent of elements. And so an essential factor to recollect is that not all people is utilizing a JavaScript framework. The truth is, if we have a look at international stats, that’s truly a fairly minor a part of the online. I do know it appears like all people is utilizing React or no matter different device, but it surely’s truly not true in follow. And particularly for those who’re coming into a longtime workforce that’s not the most recent. A brand new startup or one thing. You could not discover Tailwind.
Stephanie: And in order that’s fantastic. However the level is that a few of these methodologies aren’t as transferable throughout initiatives both. So for those who’re solely producing one sort of challenge, one utility, one product, it’s simpler to decide in direction of one thing like Tailwind, slightly than for those who’re engaged on a challenge that’s meant for use throughout a number of outcomes. Perhaps I’m utilizing it on my 11ty static website the place I’m writing in Nunjucks. However I additionally must share it to a back-end utility that’s inbuilt React. So my type sheet goes to be much more transportable if doesn’t depend on CSS and JS, or if it’s not utterly wrapped up already in React elements. And, groups have discovered methods to beat that. And once more, your expertise goes to closely weigh into what alternative you make right here.
Stephanie: One other large one which comes up for people is the problem of documentation and I completely respect that. The place it’s simpler generally to choose up a device that has ready-made documentation. So, that’s completely consideration in making that call. I wouldn’t say that BEM is outdated. It’s only a naming conference the place I feel, as I stated, it lends to being a little bit extra transportable. The intent of it’s to have the ability to establish what set of types go collectively. So we are able to apply that in a number of places and have a good suggestion. I feel maybe in some cases it is likely to be a little bit extra memorable for those who don’t have a system the place you’ll be able to create and template out elements, as a result of once more, that’s not each surroundings that folk are virtually working in.
Vitaly: Completely. Yeah, after all. It’s additionally enjoyable to be simply speaking, fascinated with all of the issues you might do with CSS and transferring again to what we talked about briefly earlier than, so many highly effective issues arising, it looks as if. Only a current announcement of all of the options coming to Safari 16. That is simply unbelievable. It’s like Christmas coming in earlier than Christmas. After which after all we’ve all of the fantastic issues arising in Chrome 103 and it’s simply all fantastic. Unbelievable. What are you most enthusiastic about of all of these issues? Is there something the place you say, “okay, that is life altering for me, that is altering every part that I’m doing with CSS.”
Stephanie: For me, it’s the one, two punch of container queries and :has(). I’m excited for each of these to be secure. And once more, coming from the design system context specifically, I simply assume we’re going to have the ability to create essentially the most sturdy and scalable elements we actually haven’t been capable of obtain earlier than. So I’m very enthusiastic about that as my prime two picks arising right here.
Vitaly: Okay, effectively possibly we must be anticipating some articles from you on them, though possibly you may have written them already, who is aware of? I feel you might need. Do you end up writing as a lot as you was once or do you may have lots of writing arising within the months to come back?
Stephanie: Yeah. So writing’s taken a tiny little bit of a backseat simply because I’ve been engaged on a challenge a little bit extra long term, that’s a construct out of a brand new aspect challenge right here. So yeah, it makes it powerful as a result of I’ve a backlog positively of writing concepts, so, hope to get again to that quickly.
Vitaly: I hope we’ll get there as effectively. Nicely possibly, shortly a number of inquiries to additionally slowly wrap up. Do you assume you may have a dream characteristic that you’d like to CSS to have? Frankly, I don’t know, to be sincere, if I needed to reply that query, I’d be most likely out of concepts as a result of I all the time needed the father or mother selector, effectively, :has() is rather more than that, however we’ve that. And I all the time needed container queries. Nicely, we’ve that and I all the time needed subgroup, effectively, we type of have it coming. What else ought to I want for? I don’t know. Do you may have any dream options that CSS desperately wants?
Stephanie: I feel I’m related as you, at this level, it’s ready for sure issues to land. A 12 months or two in the past. I most likely would’ve stated coloration distinction within the browser, however that’s even coming. So yeah, the listing is certainly shortening of what, we nonetheless are ready for. One other one for me, would’ve been a extra native strategy to do fluid typography and we’re additionally getting that when container queries hits due to container items, we’ll be capable of do this.
Stephanie: So yeah, I feel the very last thing for me is, we’ve media queries associated to Viewport. We’re going to get the container ones. The very last thing for me could be increasing {that a} bit to some extra contexts, like a person browser zoom context could be helpful to me. And I’m positive there’s another machine options, and issues in that space is likely to be the remaining space to develop a little bit bit. Generally there’s privateness considerations, {hardware} limitations, this stuff that forestall these explicit options. However yeah, that’s what I type of have my eye on.
Vitaly: Wonderful. Sounds good. Sounds thrilling. I’m simply actually excited to see what’s arising subsequent. It simply all the time retains me busy. Generally I might discover myself simply going to one thing like Chromestatus.com simply to see, is there something new on the horizon? Simply because I’m curious. Normally it takes a little bit bit longer than simply a few days to see one thing new displaying up although. However yeah, that is how excited I’m.
Vitaly: Nicely, so we’ve been studying a little bit bit about CSS on this episode as we speak. So what have you ever been studying about these days, Stephanie? Perhaps any podcasts which you could suggest? Any books, any, I don’t know, TV reveals, something that’s actually received your curiosity or attracted your curiosity over the previous few months or so?
Stephanie: Yeah, so an space I unexpectedly discovered myself having fun with is watching builders on Twitch. So I’ve been studying every kind of stuff from some fabulous streamers. Of us would possibly already know, however White Panther whose Salma Alam-Naylor is great. And in addition I’ve actually loved Alex Trost who runs the Frontend Horse group. So for those who’re seeking to be taught possibly some surprising issues in a little bit totally different format, that’s what I encourage people to do. Sort of shake up the place you’re getting your inspiration.
Vitaly: Wonderful. Nicely, for those who’d wish to be taught a bit extra from Stephanie, we’ve an upcoming Smashing workshop, which goes to look into all type of issues CSS. most likely additionally Sass, most likely additionally BEM, and doubtless additionally 11ty, if I’m not mistaken. That is happening on July 11-Twenty fifth. And naturally there are a number of tickets left, so please do have a look and take part. And for those who, expensive listener, wish to hear extra from Stephanie altogether basically, it’s also possible to discover her on Twitter the place she’s @5tp3h or Steph and on her web site at https, after all, thingdobecreate.com.
Vitaly: Nicely, thanks for becoming a member of us as we speak, Stephanie. Do you may have any parting phrases with the fantastic group? Issues that can stay in any person’s reminiscences centuries after they hear it right here as we speak?
Stephanie: Massive duty. Experiment, play and share what .
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!