Writing Good CSS

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here JS Scott Tolinski and Wes Bos. Welcome

to Syntax. This is the podcast with the tastiest web development treats.

Today, we've got a banger of a show for you. We're gonna call it good CSS, and we're just gonna go through we we did I don't know. Maybe 2 years ago, we did a sort of like a roundup of frameworks, tools, scoping CSS, writing maintainable CSS, all these different tools and things that you can use to write good CSS.

And we did it, like, 2 years ago, and we were just like, we should do an update on that show because so much has changed in tooling and frameworks and things like that, so buckle up for that. Today, we are sponsored by LogRocket, which is JavaScript session replay, and Netlify, which is platform for automating the build and and hosting of your websites. They do analytics that can host your React application pretty wicked. I'm using them in my upcoming course. So we'll talk about them partway through the episode.

With me today is mister Scott Tolinski. How are you doing today, Scott? Hey. I'm doing good. Doing good. Good. Good. Good. Good. We're at the combination wildfire and winter snowstorm that is currently going on in Colorado right now. Yeah. We, snow? So I Wes, like, yesterday, I was outside mowing the lawn. It was a 100 degrees out, and we got a winter alert a winter storm alert notification on my phone. Honestly, I do not know if there was any snow. Last night, definitely moisture and flurries.

This morning, it's just kind of rain, but we're like we went from a 100 to you this isn't gonna mean anything to you with your fancy units. But A 100 Fahrenheit is 38 Celsius, which is hot. So we went from that to 32 degrees Fahrenheit, which is

0 Celsius.

Yes. That's freezing. In in just about, I don't know, 12 hours or so. So it was pretty nuts. Although, this morning, definitely not as as wild winter weather as they expect it to be, but let's get out of the weather talk for a little bit, and get into some CSS talk, which is quite a bit more fun and a little bit more interesting. So Yeah. Let let's talk about frameworks first, and then we'll get into some of these new tools

because I think some of these tools are helpful with frameworks. So let's just talk about the different types of frameworks. And then as we go into each category, we'll we'll mention some of the popular ones that are in the area.

Probably since we recorded this, the most popular sorta area that's that's come up is utility frameworks.

And myself included, I think that people initially saw these utility frameworks. And the the way that they work is that you add classes to your HTML, and those classes are for everything for, like, m b forty. And that's that's a class for margin bottom 40 p x, and you just go ahead and and start adding them. And people say like, oh, it's ugly. It's awful. It's what about separations of concerns? But they're becoming super popular, and the the types of people that are are working on them, Tailwinds is probably the biggest ones. There's Taycons, Boma.

I don't think that it's just a trend. I definitely see people try it out and go, oh, this is actually awesome. So utility frameworks are becoming super popular lately. What do you think about that, Scott? Yeah. It used to be like a thing to write your own, like, tons of utility classes and basically end up building your own utility framework.

And now what we're seeing is just the explosion of these different types of ones. You know, I personally I don't love it for a few reasons. I I think they're they're really good for writing really organized actual design. Not not actual CSS because you're not really writing CSS in that regard. You're writing these classes. But, like, the design that it produces is very organized in the sense that, it it follows a specific system. Yeah. And that system Sanity be very powerful, which is one of the reasons why people find them to be so handy JS that you start adding these classes, and it just looks good without a ton of effort. Right? I don't love it because it's almost like learning a language on top of CSS. Right? You have to memorize all of those little utility classes, what exactly there are. Sure. There's a system, but you still have to register that in your brain space Wes if you were just learning CSS and maybe doing your own, yes, you're doing your own. I don't know. I'm I'm I'm Wes I'm turning into one of those people that, that you know, those, like, JavaScript people that are just like, I'm not gonna use a framework. I'll just write write my own JavaScript. You have to know what's going on under the hood. Right. Exactly.

The more I listen to my arguments on this, the more I I'm I'm rolling my eyes at myself. So I I think these things are awesome. I think they're they're fantastic for writing really great CSS or really great styles in a way. But at the same regard, I don't know if I'll find myself using them anytime soon because I just don't love the approach approach.

Yeah. I think I need to redesign my the back end of my course viewer. And I actually built that on Foundation, don't know, maybe 4 or 5 years ago. And the course viewer JS, I think, a perfect use case for something like this because you've got cards, you've got aligned text, you've got your color scheme that you're working with, and being able to just quickly bam, bam, bam, put these classes on your HTML and have it sort of snap together, I think that's a perfect use case for that. But if I think about, like, maybe one of my, like, course websites where I've got tons of gradients and animations and things overlapping each other and and whatnot. I don't think maybe I'm wrong about this. I don't think that would be a a good use case for that. But when I redo my like, the admin, like, if I was building an admin dashboard, I would probably reach for something like this because it seems like it's very efficient. And, also, it seems like if you're not good at design, this gives you a really good base for for cranking out something that looks really good. And then also, like, I I haven't I don't have that same, like, oh, this is another Tailwinds or Bulma CSS site where I did with with Bootstrap. Remember with Bootstrap, you'd be like, oh, this is another Bootstrap site site. So they're obviously doing something right there where not everything looks like, the same site over and over again.

Yeah. And I think you nailed it there. It it does. It makes writing, like, code or design that looks nice really insanely easy. And, again, it is a little bit more personalized or a little bit more unique. There's that telltale sign of the was it the bootstrap button with the hero section? That right there was like you could spot it from a mile away.

And, so that brings us kind of into the next framework type, which would be the foundation or bootstrap type, which is a little bit more heavy handed in terms of, like, what the classes are doing. It's not like these micro utility classes, but more or Wes, like, classes that are bringing on a lot more, intent, like a hero or something like that. Now these are still very popular, but I haven't used I haven't used either of them in a a long, long time. But I'm curious about, like, foundation, specifically, where it's at nowadays.

Yeah. So it looks like Foundation 6 is out, and it still looks like it's, it's being actively developed.

I just haven't heard of a ton of people, using it as of late. I think it's more one of those things where, like, if you make the decision to build on foundation, you are probably in that for, 7 years or so until you decide to do an entire entire site redesign. Right? And that certainly was a very good choice, and it still is. So it's not like if you chose that a couple years ago, you need to rip it out because I I think regardless of of which framework or approach that you choose, it's important that you do choose some way to approach writing your CSS and your HTML.

Otherwise, it's just gonna be a mash of whatever is hot at the time. And, certainly, I've had websites like that as well where I I go from using dashes to camel case. Oh, yeah. Some of it is scope CSS and React, and and it's just like, oh, wow. I just sort of followed the trends for for all these things, and, it's much more important to to pick 1 thing and and go with it. Boot strap is also still pretty popular, but probably not as popular as I as it used to be. What's the latest version of Bootstrap? 4.5.

They have full NPM support, which is kinda cool. And we should say for people who haven't used either of these, they generally come with a bunch of different components for things like, you get cards, you get a slider, you get grids.

And that's probably the reason for the falling out of the the popularity of these things is because we got Flexbox and Grid. Because Yeah. I would say, like, 90% of the people that were using it, myself included, were using it for, a, really good base styles, and, b, the layout because layout before we had Grid and Flexbox was super tough and trying to work with all the margins, padding, and things wouldn't line up perfectly, and you had to use negative margin to boop things over. Like, I don't think that you need a layout framework anymore now that we have CSS Grid and Flexbox. Like, when when Flexbox first came out, there was just, like, this massive race for building a Flexbox framework. Yeah. Yeah. And, like, they never really, like, caught on because most people would go like, oh, I don't actually need that. I just Node it, like, a couple properties, and, you're up and running. So what was your go to? Like, if you if you were tasked with, like, a grid based design and somebody was saying, alright.

Oh, hi, Brooklyn. My daughter saying hi to Wes.

My go to was foundation for sure. I did use Bootstrap quite a bit. I actually I think I initially got into Bootstrap because it had the slider and the buttons and, everything that you wanted. But I had a couple major projects at the time of their popularity, and all of them went foundation.

And that that wasn't just my choice. That was more of a a team choice. So that's kinda where my expertise lies. So for me, I think once, like, SAS Grid frameworks really took off, I I remember, like, Foundation was the 1st one of them to really do not Foundation as in itself, but, like, Foundation went SaaS before, Bootstrap went SaaS. But I was always using SaaS. Maybe that was it. So it was really interesting for me. The 1st grid framework I really, really, really loved besides I think I used, like, Compass and and stuff for doing layout before. But my favorite, favorite layout framework for Sass at the time was called Susie, And, it's it was so good. I I you always used to just say, like I I forget the syntax exactly, but it was just, like, calls and then, like, a function, and you pass it in, like, 2 divided by 12 or whatever. And it just, like, took care of everything. It was just, like, such a Deno nonsense anything. You didn't have to write extraneous classes to do anything. You just got to drop in a little function or whatever from SAS directly into your code, and it just worked, worked, worked, and it was so good. So the next one of these types of frameworks here would be this is like a it's so funny that people are referring to this as, like, a new thing, but it's like classless CSS frameworks.

And classless CSS frameworks is basically just, like, different restarts or resets Wes you can make a nice looking CSS theme by out of the box without adding any classes. So no, like, fancy components, essentially, but, really, just like a different reset.

They're they're meant to be not used as is, but meant to be used as a starting point for a nice design overall. We actually taught when we taught our we taught our our design systems course, we talked a lot about classless CSS and how you should write as, essentially, as much of your CSS in base CSS as possible.

That way, everything just looks nice. Right? You're at a table. It just looks nice. You don't have to do any weird classes on it, whatever.

No 800 classes to do Node thing or something. But, like, you you just do your classes as is or or do your CSS as is, styling all of the elements, and then you have a nice little base. And then you can build on top of that with your classes or your components or whatever your system is. And I I felt that to be really, really nice because then you can just type things without having to worry about if it's going to look nice. It just does look nice as long as you're using any of these HTML elements in context. Yeah. I would do that on I used to have this, like, theme that it would start every single WordPress project, and I called it my, like, 10 hour head start.

And part of that was that I had the base CSS or hit the ground running dot CSS, and it did. It selected all of my articles. It selected all my common classes like wrapper, and I guess that was Scott of utility Bos as well. It would center it. It would put the base font size.

And that was really cool because then you would just, like, start with, like, a really good base. And, also, like, what would happen before I did that is you would style, like, your demo content, but then, like, a a client would throw, like, a block quote in there or a table. And you're like, oh, totally didn't think that you would use a block quote, and then it looks like looks awful. Right? So at the time, there was this, like, HTML

kitchen sink where they would give you, like, one of everything, and you would just dump that into it. And that honestly, that's, like, some good practice still today. We talk about that in our design systems course. Yeah. Just make sure you've got a good base covered. Yeah. Kitchen sink's a big I think that's a a really killer technique still that people don't utilize enough is, like, what can I do before I get into adding any specific, classwork there?

Alright. So preprocessors, they are something where you write your CSS and you you go through a compile step.

And, generally, a preprocessor will give you the ability to use things like functions or mix ins or variables or generate CSS, doing for loops, things like that. And that can be very helpful to generate CSS rather than having to to do it by hand.

Often, I I see people on Twitter. Anytime I'm talking about, like, a new CSS feature, people are like, yeah, but I still like Sass. I'm like, well, that's they're not like like, what was I talking about the other day? CSS clamp.

I said, oh, yeah. Clamp, you can you can set your min and your max, and you can set your ideal size in between, and it will scale up or down. And a couple people were like, yeah, but it still like SAS better. And I said, like, well, that's not that's not what the replacement is. Sass was just meant for things that need to be computed before the build time.

And then a lot of this new CSS stuff that we're talking about that, like, variables and whatnot, that actually happens in the browser. So you can still use both of those together if you like. So what are the popular ones? Sass or SCSS are probably the 2 most popular ones out there. They allow you to do probably like like, what would you say are the most popular features of SaaS? Like, variables, nesting? Nesting. Yeah.

Those are probably the the 2 that a lot of people use it for. Quite honestly, I had a couple of projects that used used it a little too much, and I always got exhausted when I had to change something because I I didn't realize where I had to change it. And, it's really frustrating to do that. So there's Sass. Stylus is another really good one. It does pretty much all the exact same things, except it was indentation based. The curly brackets and semicolons and colons were optional.

Variables could be overwritten, which is one thing I really liked. So, like, if you have the word yellow, you can just set the word yellow to be your specific yellow. I still write styles on my own website just because, like, that's what my site is built in, and I'm not going to rewrite it for no apparent reason because I'm I'm very good at writing stylus, and I can jump in no problem. So

Yeah. Well, it's it's funny that you mentioned that thing in SaaS where people will use that as a fire off to say, like, well, I still like using SaaS. I get that all the time. I just had somebody in my Instagram Instagram, of all places. I, like, posted something about CSS variables, and they're like, I still like Sass variables. It's like, yo. That's a different feature, and it's like a different type of feature. Sure. They're variables, but, like, they're not the same thing. You can't just say, I like this

instead because it's it's not the same thing. Right? Yeah. And because see, like, we should clarify. Like, CSS variables are dynamic, meaning they can be accessed and updated in the browser.

So if you change a variable, like, via JavaScript, then everything else on the page will update, whereas variables disappear in Sass world. Right?

Yes. Yeah. Totally. And as far as using, like, Sass or whatever goes, I actually personally use Sass for our global CSS instead of CSS just because it's very easy to add to a project in 2020. You know? In 2020, for me, especially even in Meteor because I just do Meteor add SCSS package or whatever, and it just works. But, like, I know it the same thing will go probably in, like, Parcel or any of these other new compilers. It's it's trivial to add Sass. So, you get the the nesting and whatever and, and within that, just for essentially free free of cost for to you. So I I personally always reach for something like Sass or Stylus when I'm starting. You're right. There is Wes, which, gained popularity because it could be added at client Node, client time rather than compile time.

And so, like, adding a build step for a lot of developers was a huge challenge at first. Right? There was this big movement to adding a build step, and all of a sudden, people didn't understand what that even meant with their web code. And sure enough, Wes was just like, oh, just drop this script on your page, and Less just works. So that attracted a lot of people, 1st and foremost. But as things went on, Less kind of saw much less features than SaaS and did not exactly really continue to evolve in the same way. Wes, meanwhile, like, stylus, I always felt like had the most amount of features, but the smallest, maybe, community size. It was because it was so radical without needing the the brackets and all that stuff. Yeah. I always wondered that myself as well. I was like, this is awesome. But but I think also one of the reasons SaaS was so popular is because it sort of came up at the same time as Ruby on Rails.

And the compile step was initially done in Ruby, meaning that your entire application could be done in in Ruby, and and most people had had no JavaScript build stuff at all. That was before Gulp and all that came along. And then when Gulp came along and Node. Js started becoming more popular, then a lot of the tooling moved over to being done in JavaScript. And then a lot of the websites also started to be to be built in JavaScript. Yeah. Even Grunt too. Do you remember Grunt? Oh, yeah. Grunt was way before way before Gulp. Yeah. I just have here just regular CSS. So certainly, one of the options that people are choosing now is not to use any sort of preprocessor, and just going with with regular CSS.

And I don't think it's at a point now where you could you can just write regular CSS if you want, but, I don't think like, the the one thing we're we're really missing right now is nesting, as well as scoping, I guess. So what a lot of people do is they will just write, I'm using air quotes here, regular CSS, and then they'll use the next thing we're gonna talk about, which is post CSS.

And then you sort of pick and choose your features that you wanna add to it. So instead of just saying, like, Sass, it just works. It has all the features.

You grab PostCSS, and then you start adding in, I want the plug in for nesting. I want the plug in for color functions. I want the plug in for, variable fallbacks, things like that.

Yeah. And I've always loved PostCSS.

In fact, that's one of my biggest downsides of styled components, which is a React component based CSS and JS framework that I use on Vercel up tutorials. My biggest bummer about Styled Components is that you can't use post CSS with it very easily or at all because they have their own own thing, which I I forget what it's called off the top of my head. But it doesn't really much matter because, well, PostCSS has such a a large community with all of these plug ins that, man, I would really love to take advantage of some of these. And what I think is cropped up is this really interesting different class of CSS and JS frameworks Wes you have, essentially, the exact same foot, not necessarily like, KB footprint, but the exact same code footprint, essentially, as styled components. You import, you know, styled from this other framework rather than styled component. The only difference is that they do support things like auto prefixer and, well, not just auto prefix or post CSS. Have you seen any of these other ones? I had a little roundup here in the hasty episodes. Did have you seen some of these other ones, Wes? I don't think I have. No. There's one called the Linaria.

Although, just going to their website, which worked a couple days ago, now says this deployment is no longer available because it was on Node version 1 ESLint o. Man, that Now thing. Kill them, docs. Oh, that sucks. Yeah. Let's see. Linaria, CSS and JS, it is very small, and it allows you to use things like post CSS. There's another one called Astroturf.

There there's a whole bunch coming out that are just sort of basically styled components, smaller bundle size, and allows you to use post CSS. And I'm I'm pretty interested in this little community of of new CSS ones.

I think we said this on the show before, but, like, I I think we'll start seeing people saying, oh, I don't actually need a full blown framework for this. I just essentially need, like, template string so I can use my JavaScript inside of it. Yes.

And and that's User scoping. And a few other little things like that. So I think that's that's one of the benefits of of PostCSS is that because, the whole community is built up into tiny little plugins, very much like Babbel is right now.

You can have people just grab little pieces and build their own thing rather than it it being, like, sometimes to me, that's often very frustrating because I'm like, I don't want to build this thing myself, and we'll talk about solutions to that in a second.

But you see a lot of people just going out and making their making new packages and and testing out ideas and pushing the boundaries, which I really love. I love a good boundary push. Big fan.

And if you are pushing boundaries, you are likely to break your code. So if you would like to push your boundaries, but, not intentionally your error boundaries let's say you just wanna push the the actual the technical boundaries. Yeah. There we go. Then you're gonna wanna need a tool like LogRocket just to be there in case you do accidentally push your error boundaries. What LogRocket does, it allows you to see your errors and exceptions happening in a video scrubbable instant replay. You could think of it as like a video to watch a crime happen and be able to solve that crime a lot easier if you could see exactly how that crime was perpetrated. That'd be the worst TV show ever.

So if you want to try all of this out and more, head on over to log rocket.comforward/ syntax, where you're gonna get 14 days for free, and you're gonna be able to see an instant video replay of all of your errors and exceptions happening along with the network tab, the error console, and all sorts of anything that would you would ever possibly need to use to solve a front end bug. So check it out at logrocket.comforward/syntax.

Cool. So let's get into it.

Yeah. So post CSS, we kinda let that last section bleed into it. That's kinda like Babel for CSS, and it has a whole bunch of of plugins. Probably the most popular plugin that people will know is Auto Prefixer. So the idea is that postCSS will take in your CSS, and then it will break it down into all of its little bits. And then the plug ins will allow you to transform the CSS from what you wrote into what you have. And the simplest version is auto prefixer. So if you write something like I don't know. What what is there's very few things actually have a a prefix anymore.

What's something that does have a prefix? Flexbox.

If you want Flexbox to work in IE 11, you have to use, like, the IE 11 version of Flexbox, which is not totally the finished Vercel, but, like, it's good enough. And in most cases, if you if you ship the dash Wes dash Flexbox prefixes on it, it will it'll look pretty good.

So just you just feed your code through Autoprefixer, and then it'll kick it back to you. And, most of those vendor prefixes are are a thing of the past, but, like, another another good use case is, if you're using, CSS Grid and you are using, like, a grid gap or if you're sorry. The other way around. If you're using gap, which is the new property in both Flexbox and Grid in order to specify gap, some of the older browsers and even some of the current don't know about gap yet. It's grid dash gap.

So what will happen is that it will convert your gap into grid gap, and then and then it will work in all the older of the browsers. So it just takes what you wrote, converts it into what it should be.

Grid gap. Yeah. That's a that's a perfect use case right there. You can use tomorrow's CSS today or, in some cases, today's CSS today because yesterday's browser did not support today's CSS.

There's also, like, placed content in CSS Grid, which is shorthand for aligned content and justify content. Oh. So if you wanna shorthand on both axes, you can with placed content. And, again, that was added after most of the browsers implemented initial Flexbox, so not all of them support it. Right? So you can just you can still write future CSS, and then it will it'll bring it back to what it was. How do you feel about, like,

non real future syntax and, like, act like, some interesting syntax? For instance, let's say a little shorthand I like to have. I used to write in Stylus with their, like, transparent mix ins that you can't really do a whole lot of ways without writing a a post CSS plug in would be something like instead of like, the property would be fixed, and then the values would be their position. So you could say fixed, you know, 0 for top left or fixed yeah. Top left. And then it would automatically add position fixed, top 0, left 0. That's something that I really like, I don't know how it fits in here because it is so personalized. And it almost feels like the kind of thing that your team would hate because nobody would be on the same page with it except for you, and it's not like a standard. I don't know how you feel about those things. It's funny because, like, if that was a mix in, nobody would complain. Right? If you did fixed parentheses and and pass the values, everybody'd be like, oh, yeah. Oh, cool. That's great. If you were to write your own thing but, like, we are gonna be able to write our own with Houdini? Houdini. Yeah.

So I don't know how I feel about that. I've not come across some CSS where I had to dig into it, so I don't know how angry I would have been. But, like, again then again, like, if you're on a team and you build this, like, framework, you say, like, look. We do this a lot, or this makes it really easy to make consistent branded pop ups or consistently branded cards, and it's this, like, weird whole bunch of CSS that we need to add to every single one, then, yeah, maybe maybe stick it in a mixin or stick it in, its own custom CSS property and and see how you feel about that.

Yeah. Totally. I I love stuff like that. But in the same regard, now that I'm working more with other people, I'm getting more and more concerned that my love of things like that is going to have to come to an end because it is it's so easy when you're doing Vercel to do all those things. And and, of course, I was the type of developer who liked wacky class names back when I was first starting. You know, it's all these, like, dumb things that you you learn at some point or, like, a really bad idea. But, like, sometimes sometimes whatever can keep you interested is is really what's up. I don't use any post CSS plugins anymore, but I I really did love a lot of this stuff when I was in post CSS land. I really did like having the ability to use the Babel type of thing where you get to write tomorrow syntax and just not have to worry about it. I mean, that was such a revelation for any of us who whoever wrote prefixes by hand before because it was just such a giant pain in the butt. And so now it's a fantastic non pain in the butt that we never have to think about. Another popular one is post CSS Clamp. So we've talked on the podcast about Clamp before.

Although, I think we need to do, like, a dedicated show to Clamp because Clamp. Yeah. Everybody every time I tweet it, everyone's like, wait. What? And one thing about Clamp is that it doesn't work on all the browsers, but min max functions are very well supported on all the browsers.

So if instead of using CLAMP, your min, your flex value, and your max value, you can just use this weird combo of max, and you pass it your min, and then you pass it min. It's super confusing to me to read it. That's why they came up with a clamp function, but that is well supported, min and max function. So, you can essentially make clamp work with min and max functions. So instead of having to figure out what the syntax is in the min max equivalent, just write a CLAMP function, and the post CSS clamp will convert it to the equivalent in min max.

Clamp is one of those things that I have not used in any real capacity,

and then, like, one of the very final videos was we were just, like, making it responsive, and we ran into a weird Firefox bug.

It was working on Safari, which it wasn't at, like, the start of the course, but it wasn't working in Firefox. It it supported, but there was, like, a weird, like, thing where you resized it, and it didn't trigger a reflow.

So we had to end up taking it out, but I think it's gonna be a bit before we can use it in, like, actual client websites and not just Real real. Developer only websites. Yeah. That's Node people ask me that all the time. They're anytime I tweet something that's neat, they're like, oh, but, like, what do you do about older browsers? I'm like, well, a 100% of my audience is people on the latest browser, so I can use it, and you get to use it in, like, 2 years. Yeah. Right. Exactly.

The we'll we'll put a list of all the different plugins for PostCSS in there because it's kind of fun just to to look at them. There's PostCSS Simple Variables.

So you can just use the dollar sign variable like you're used to in Sass, and it will swap them out with, regular CSS variables, which is pretty nifty.

I'm kind of used to CSS variables now, but I would like to go back at some point to just using the dollar sign variables in CSS. What about you? For me, as long as they

get output to a CSS variable that functions the same way, then I'm in. If they don't I don't know. I don't see it in their documentation.

I don't see this outputting to Yarn anywhere, do you? Oh, is it just it just outputs to text? I think it just outputs to text, which would be a huge bummer because I've gotten so used to the dynamic ability.

There's another plug in called PostCSS custom properties, but that just that just takes regular PostCSS or sorry. That takes regular CSS custom properties and converts them to whatever their color was, or it'll it'll fall back to. So you could say, like, color var dash dash red,

and then it will both give you the the dynamic variable, but also provide you a fallback to red. That's nice. I think I would I would like that. I was thinking that there could be some situations you have to be careful about, but to be honest, I think as long as it provides that fallback. Because the way CSS variables work, if you don't know, if you have a CSS variable defined and then you have, essentially, the fallback behind it, whatever bar the the same exact thing, just duplicating the property, The way the browser reads that, if it hits that CSS variable, it doesn't understand the CSS variable, so it just moves up. And the next one is going to be the next definition, anyways. So you can do any kind of CSS variable sort of on ramping that way, and it's usually a giant pain in the butt because that means you would to type anytime you did a color property, you'd have to type the the CSS line twice.

Oh, Brooklyn, how much trouble can you be?

Next one we have here is called Sugar CSS.

Sugar SS is a plug in that allows you to write CSS as if it were indentation based. So if you just for whatever reason, if you can't leave your stylist loving ways behind, you can use SugarSS.

Oh, that's fun. Yeah. It's kinda cool because you can still use all the other post CSS stuff with it, but then you can still use your indentation based CSS. So I wonder if it's pnpm Sanity with with stylus. Like, I wonder if I could feed my Just recreate stylus with post CSS? That sounds like a fun fun, project. That sounds like edge case nightmare.

Edge case nightmare.

That's a good name for a pad, actually. Yeah. That is a great name for a pad. Edge case nightmare.

Last 1 we have here is post CSS preset ENV. So, yeah, you might know if if you're using Babel, you don't need to go figure out what plug ins you need in Babel. You just use 1 plug in. It's called preset ENV, and you tell it what environments you're supporting. So if you're supporting Node or if you're supporting IE 6 or you're only supporting the latest 2 browsers, there is the same thing for CSS. It's called post CSS preset ENV. So at a certain point, you'll tell it, oh, I'm I'm supporting these browsers, and it will say, okay. Those all support custom variables, so we don't need to transform them or fall them back because we're you we know that your all of your browsers are supported, and we'll no longer use that. So it will look up via Can I Use what things are supported, and then it will load the plug ins that it needs dynamically, which is great?

Cool. Yeah. I have it man, I've been so out of this this world because I've just been in the style of components land. Now I I I really wanna move to one of these frameworks. I don't know which of them will actually have a community that lasts or grows because there's so Yeah. So many little ones. But, if it was, like, if it was as simple as replacing the import styled from blank and having, you know, server side rendered CSS and everything, but you also get auto prefixer, well, maybe I should look into if that is actually a thing or if that's just me, swapping out the deck chairs again to waste a little bit of time. Yeah. That's that's how they go.

That's good. Yeah. So another tool along these, maybe not necessarily these lines, but that you may have heard of or maybe not have heard of, in some Sanity, JS called ESLint.

There's actually 2 different StyleLint.

One is for stylus, and Node is stylelint.i0.

And the other 1 is, like, you know, Scott s t y lint. You know? So this is StyleLint, s StyleLint.

And what it JS, it's basically a linter for CSS, but it's capable of doing a lot of really interesting things.

And I haven't used this before, but I was just talking with a friend who works on a large team, and they were saying that they do some really interesting things with Style. Lint.

For instance, if you are adding CSS to a specific group of files and you are not using a CSS variable to do a color definition as in you you've defined a hex value or an RGBA value somewhere, it will actually not allow your code to be merged because it says, hey. You didn't follow our our coding guidelines within CSS.

And they were telling me about a whole bunch of really interesting little rules they had set up, And they were fairly complex rules to be able to say, alright. You can do this, but you can't do this within your CSS. You could add this to your continuous integration pipeline. You could probably add this to your editor fairly well. I'm gonna start checking it out in a bit more of a way because it seems like it's really interesting. There's a handful of plug ins and everything. It it seems to work really well. There's formatters, plug ins, processors, system tests.

So, hey, Styleint sounds very fantastic. A lot of, like, really interesting people working on it, and there is a a big Sanity. And it seems like yeah. Look at this. Downloads per month, seven point 9,000,000 downloads per month. That's a lot. So a lot of people are using this thing, and I'm not not using it right now. And I've never used it, but I've heard of it before. So I've I'm gonna have my eye on it, just to check it out to see what kind of, like, cool stuffs you can do out of the box without having to get into the weeds of writing your own just because, you know, I don't have the time to do that. But I wanna I wanna check it out regardless because it seems really fantastic.

Yeah. I like that. It's little things like that. Like, I at first, I never liked using ESLint because it I felt it was too picky. But overusing it over the years, it's made me become a much better JavaScript developer.

So I bet that that would do the same thing for my CSS.

And it can work with styled components. So

Oh, I'm in.

Next one we have here is just like removing unwanted CSS, and the one that seems to be super popular and the one to go with is called purge CSS.

I've previously recommended Purify CSS, but one of the things about using a, a framework, whether it's Bootstrap or Foundation or something, a utility framework, the Tailwinds, is that, generally, Tailwinds would ship all every single possible CSS thing, every single CSS selector and properties along with it. And you might only be using, like, 5 or 10% of the things that are in that library. So what you do is you you feed you use something like purge CSS, you feed it your your HTML, and then it looks at your CSS, it looks at your HTML, and it will remove all of the unused selectors, from that. So that might be a little bit to get up and running if you have lots of dynamic pages.

I've not used it myself, but I know that, it's pretty popular in those worlds because you you certainly can't ship. I don't know how big these libraries are, but you can't ship 300 k of CSS down the pipe,

for for what you need. I wonder how that works with, like, a scoped CSS and JS land with, like, code splitting.

Like, for instance, we have CSS code that is shipped with specific code split bundles. So, like, how can it determine if that code is used or not? Yeah. That that's a good question. I don't don't know the answer to that. I would imagine that would be

kind of tough, But you could probably also actually, I I probably, I bet the way that it works is that you don't give it your, like, output at HTML. You give it your your templates, and it can figure out what the classes are in your templates.

And then probably anywhere where you're dynamically generating a template, that will probably get a little bit hairy. Like, sorry. Anywhere you're dynamically generating a class Node, I bet that Wes where it gets hairy. Mhmm.

But in most cases, you're just slapping regular class names on it. So if it sees m b 40, it knows, oh, I should keep the margin bottom 40 selector and get rid of the other 100 because they're not using it.

Yeah. That seems to me like it it would not work with my setup, but it's another one of those things I would love to use. And, I don't know. You know? Getting that getting those feelings of, oh, is this the right thing that I'm on? Which are just, you know, really bad feelings to have. So you typically want to, not only just add these things to your your process, but also your build process. And a tool that makes deploying via your build process really simple JS well as hosting your code anywhere really simple.

This is not not my best not my best work, but I'm talking about Netlify. Netlify is the modern hosting platform that allows you to very easily, quickly get up and running with your code on the web in no time at all. And on top of that, makes working on all of your projects fantastic. So it's a little bit more about what Netlify JS doing. Here's Wes.

Yes. So Netlify is a Jamstack hosting platform. And I guess, like, over time, even since they've started sponsoring this podcast, what they offer has continued to grow. So, obviously, you can host your your Jamstack based website on them. So if you've got a Gatsby or a Next site or React or or something like that, you can host that up on Netlify. They have this really cool edge network where they make it super fast on everything that you have, but they also do the builds of your website. So in my, upcoming Gatsby course, they didn't sponsor my Gatsby course. This is just I just it was the best, use case for hosting the thing. We just hook it up to our GitHub git repo, and it finds the Gatsby website. It can go ahead and build the sucker for you. It does all of our serverless functions. So a bunch of the parts of the the course that I'm working on there is, like, we need to send email and things like that. And if you need that, you need to dip into serverless functions because there is no real back end, and they make that really easy both locally and, on the server. So check it out for your next Jamstack based website, Netlify.com.

It's Netlify.

Somebody was saying that Scott says Nullify, but I've never heard you say that. Never. Say Netlify. Once. Netlify.

Netlify. Netlify.

Maybe you're listening to me at at turbo speed, and I'm gonna no. No. No. No. No. No. No. No. No. No. No. No. No. No. No. No. No. No.

Probably it. Turbo Tolinski.

Slow slow me down a little bit. Slow me down. Here's Netlify.

Yep.

There's no race. Cool. Thanks so much to Netlify for sponsoring.

So last Yarn of here is talking all about writing maintainable, and scoping CSS.

So a lot of the history of writing good CSS has been about how do you how do you write things in a way that's going to allow you to scope them when you want to be scoped and not scoped when you don't want them to be scoped is really just the the crux of every major CSS argument besides various syntax things. But in terms of, like, writing and organizing your CSS, there are several different ways that people have really solved this solution to writing maintainable CSS.

And more recently, there's been a component based CSS solutions that are all sort of geared towards people using front end frameworks.

And, specifically, we use something called styled components, which is basically just a you create a styled component, which is essentially just a a container for classes, and it automatically generates a class name for you. That way, there's going to be no collisions. You get scoping where you need it, and then you can use normal classes in Jupyterbase CSS where you don't. So you get that that scoping where you need it, base where you don't. And that's why I really like this approach. But at any time I'm getting into this, I I feel like more and more, my brain goes towards just any sort of ability to turn on scoping or turn it off is really the solution that I want. I wanna be able to say, when did this Wes is this scoped and when it's not? In fact, Svelte approaches this in a very different way where everything is scoped by default as if it's written in the component. And if you want to make it global, you just there's this little global wrapper that you put around it.

So there's definitely a lot of different approaches in here. I don't know exactly what's popular in the Angular world of things, but there is CSS modules. Do you wanna give a little bit of talk about those?

Yeah. CSS modules are a little bit different. So you have just your regular dot CSS files, and I'd imagine you can use all of your post CSS stuff in it. And then at the end of the day, you have, like, classes, like Scott card, and then you can say dot card space h two and and things like that. And what you do is that will then be fed through a Uniquifier, and then it will give you a class like Scott card 49h7 four, and you take that unique class. And and, generally, if you're using a JavaScript framework, you just import it directly from your CSS file, and then you apply that class name to your div or whatever it is that you want. And and that will give you a unique class on your wrapper, and then it will also target all of your child selectors that are inside of that. So that's I I found that all to be a little bit clunky. I much prefer just to use the style component approach or the the Svelte approach Wes you just write the CSS in the same file, and it just works rather than having to figure out what the class names are going to be for everything. But one thing I really like about writing something like styled components is that you can just say, like, h two, or you can give things classes, or you can just grab an image. You don't have to, like, think of a class for absolutely everything. It just Yeah. Right. It just selects it. And, the the sort of the no no of before, which was don't just select elements and style them, becomes the, oh, this is easy. I just have to grab the h two off of something. And there's no other h twos in this component, so it will style it accordingly.

It's scoped. I love it.

We also have been very popular for a long time, before we got a lot of these tools, and this is still a really good approach, is just use a naming convention to do your scoping of CSS. So, BEM is a pretty popular one. It stands for block element modifier.

So your block would be your card, your element would be your card header, and a modifier would be like card header big or card header red or or something like that. Like, oh, yeah. It's I already have this element, but I want it to be a little bit different, and I wanna I wanna bump up the font size or or card header underlined.

So I I still really like BEM. I I use it in a couple websites, that have been going on for a couple Yarn, and every time I jump back into it, I'm like, yeah, this was this was nice and simple. Generally, people pair that with CSS files where you you write your CSS for, like, each block and in its own file, and then you use some sort of post CSS or some sort of Gulp tool to to build it all together.

Smacks is another popular one. I never use Smacks, have you? I haven't. I well, I don't wanna say never because I feel like I've the Smacks website has been around since I started developing pretty much. So, like, I feel like this Jonathan Snook.

Yeah. I feel like I have used it at some ESLint, but I I pretty much reach for BEM because BEM is the one that you see. Oh, Brooklyn.

Because BEM is the one that you see more often.

And, I I do I do like BEM, but I've never really liked the flow of the hyphens and the underscores. I don't know what it is. To me, these some of these newer tools solve scoping in a way that's a little bit nicer for me. So I do reach for it when I'm running straight up CSS, but I almost never never do any anymore anyways. One of the things that I've been, yeah, really relying on for for any maintainable CSS that's outside of, like, naming and properties, attaching styles, selectors, those types of things, for me, has been the use of CSS variables, to do a lot of things. For instance, like, you could define a variable at the root of a particular element. Let's say, you would say this thing has a width of or you maybe you give this element a size. Right? You're making a a a circle. You could say size is equal to Wes, and then you could say height is equal to 25. Width is equal to or height is equal to size. Width is equal to size, and the border radius is equal to, you know, the size divided by 2 or something like that if you wanted to do Love that. Brooklyn is, she's got a it's a train, and she just slam it in into the ground over here.

Just living her life. Living her life.

ESLint. Yeah. So I've been using CSS variables a lot for writing, like, a maintainable CSS. Have you heard a lot about the concept of design tokens?

No. What is that?

So, I don't wanna misrepresent it here because people have very specific ideas about what design tokens are and how they can be used. So forgive me if if this is not the the perfect thing to say here, but you could think of design tokens as basically tokens that you would set the properties of to style everything on a particular aspect of your site or the entire thing. So if you're writing, like, a a framework, you could imagine you could have a single variable to say, alright. This is the large one, the small one, whatever, instead of having to deal with pixel sizes or those types of things.

So I I I rely on a lot of design token like things within my application so that you can write essentially tokens to style things. This is this color. This is this size. I I do that specifically with my elevations, z index, box shadow, those types of things.

Again, there is definitely, like, a larger component to this. Like, the CSS variables does not equal design tokens. They're they're not necessarily the same thing, but you can use them to do a design token like thing.

So design tokens is definitely more of a, like, a strategy and a a thought process than a it's not like a technology specifically. Oh, it's like, I'm just looking at this thing from Amazon called style dictionary.

There's Yarn article on CSS tricks, and they're just they're just declaring things like small, medium, large font sides, gray different gray colors, primary, secondary colors.

Like you said, to me, that just sounds like variables.

There is a distinction there, because people get angry when you say that they're just variables. Cool. I'll have to take a look a little bit more into that. Nick d It's an interesting concept, and it's something that I really like because I've always been a fan of, like, smart defaults, you know, smart defaults, things that just work. And then instead of having you fish around with syntax and whatever to just dive in and say, alright. This is the color or whatever. And I guess utility classes, in a a way, to bring us all the way back around to the front of the episode, I think utility classes, in a way, are almost like micro design tokens in a in a sort of way. I don't know Node if that's like a educated outlook on this. But if you think about it, you're just adding these little tiny tokens to style the whole thing. I don't I don't know if either camp would be happy with me saying that, so I'm I'll I'll leave that as just like a pontificating thing and not like a actual hard point.

One day, we will have a syntax where Scott and I love utilities frameworks. Love it. It's gonna be the one that I write. That's that's the whole thing. Oh, I love this thing. I wrote it. I know what it does.

Scott, you've been talking about how you didn't like that for the longest time.

It's any anytime we mention that stuff, people are like, why don't you like it? It's not that I don't like it. It's that it I I don't have a super good use case. It's not for me. It's not that it's not good, or or I think it's fantastic, and I think it's good for a lot of people. It's just not for me. I I don't know. I I I'm gonna reach for other tools. Whether or not I could be more productive with it or not, it's not a great argument. But

Alright. We're getting into a new section of syntax called the syntax highlight. This is where we text highlight.

Yeah. We need, a bumper for it. Yeah. Syntax.

Suck.

We sorry. This is where we highlight somebody who is in the community doing really cool stuff that, you should know about.

And our 1st ever syntax highlight is Denish Ghajar.

I've known Denish for, I don't know, probably 4 years or so, and he's the type of guy who has always been very supportive of the Sanity. So supportive of of my courses, of of Scott's courses.

He is one of one of the very few good devs on Instagram. Developer Instagram is very bizarre because it's a lot of people holding laptops in odd locations where you would never write code.

He has this thing called build up devs Wes he essentially does that, builds up devs. He's always shouting out other developers on both on Twitter and Instagram. So, just just a good vibes to the community from from Denish. So big fan of him. You can check him out. I would probably check him out on, on his Instagram first.

It's d h a n I s h g a j j a r. We'll link it up in the show notes.

You can, hit that up. He also posts lots of, like, really nice desk photos. He lives in Lisbon and has, like, beautiful photos of the water often.

So shout out to Denish.

And, if you guys have other, devs you think we should do a syntax highlight on, shout us out on Twitter at syntax f m, because we're gonna be doing one of these every single week. Alright. Let's move into some sick picks. You got a sick pick for me today? Maybe rollerblade worthy? Yeah.

I did buy those rollerblade wheels from from last I would say that that that would be gratuitous to sick pick something you did in the very last episode.

Go for it.

No. No. No. I've been learning Rust lately. It's a programming language, a systems programming language. I decided that I don't know enough programming languages, like, for real to have, like, a different. I didn't I didn't I didn't feel like I had, like, enough context in programming.

And a lot of people recommend to learn new languages frequently to understand just sort of how things are done in different worlds. So I felt like, hey. You know, it'd be a good opportunity for me to learn something new. So I picked up Rust, and I wanna shout out to Rustlings.

Now Rustlings is it's an interactive tutorial.

So it's not a video. It's not whatever. And it's just in code. You clone the repo.

You run the command, and it says, alright.

Error is found on this particular file. You go to the file.

You know, it starts very easy. You don't have to know any Rust, and they're all, like, attached to sections Wes, essentially, Rust documentation.

So if you want to go and research these things, you can go and research them. They have hints, wonderful things. But, again, if you are used to, you know, video tutorials or whatever tutorials, give Rustlings a try if you are interested in learning Rust as a supplement to other learnings because I found this thing to just be absolutely fantastic in terms of getting me engaged. You complete the tasks that co that, you know, pass the tests and whatever.

It tells you which line. Like, okay. Solve this, but don't change this line at all. Whatever. And so I've I've been so into it because it it really gives me a good sense of drive to say, oh, I Scott get this next one. I'm 1 more. Just 1 more, mom. I'm gonna be there soon. One second. You Node, that kind of thing. So I I love I love Rustlings. I've been a big fan of this. So check it out. I'll have the, it's it's in the official Rustling repo. I'll have this link in the description of this podcast. I'm gonna sick pick, a documentary called Class Action Park. Oh, yes. It's so good. Have you watched it? Oh, yeah. You bet.

So it's a documentary on about this, amusement park in New Jersey, I believe. That that park is is pretty well known at this point in the States.

Oh, really? Action park. Yeah. The because they Johnny Knoxville even made a movie about it.

Oh, man. I've I had never heard of it, but, basically, it was this amusement park with these water slides and things like that that were, like, not built by engineers, but just by some wealthy guy who had fake liability insurance.

And, like, people would get, like, super hurt on all these rides, and it's just unreal story. So, it's from HBO Max.

So I'm not sure how you get that, but, check it out. Class Action Park.

Yeah. Very good.

Very interesting. And I had already seen, like, little features on this park, and I was, like, very into it. So, I thought this was super cool, somebody who's not from that area.

Super cool.

Shameless plugs, I will shamelessly plug my upcoming Gatsby course. It's gonna have serverless functions and CSS and, of course, Gatsby custom hooks, all of that. It's just like building a well rounded website, and it's gonna be available at mastergatsby.com.

Use coupon code syntax for $10 off.

Sick. Sick. Sick. I am going to shamelessly plug my latest course on advanced animating React with Framer Motion. We do a lot of gestural stuff as well as, dive into the new layout prop quite a bit. The gestural stuff is really fantastic because we build the types of interfaces you used to on mobile Wes you have, like, a a swipe up drawer that you can swipe down or you can scroll within or you could, you know, have, like, a little bit of a a feedback in terms of, like, oh, did I swipe down hard enough? But it's not just like a a trigger event pnpm swipe. It's like full on gesture support, the type of stuff that you see all over the place on native applications. And now it's available to you super duper easily within Framer Motion and React. So check it out at leveluptutorials.com.

Alright. Thank you so much for tuning in. We'll catch you on Monday.

Sick. Peace. Peace.

Head on over to syntax.f m for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show.