Use Next-gen CSS Today (Post CSS Configs)

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes, Barracuda, Boss, and Scott

CSD.

Welcome to Syntax. On this Monday, hasty treat. We're gonna be talking about post CSS And some of the configs that I have been using lately as law as well as some of the stuff that Wes has been using to use future CSS today And really get to take advantage of some of these amazing new modern CSS features. Right now, we're gonna be talking about exact plug ins And the types of things they enable you to do. My name is Scott Talitsky. I'm a developer from Denver, Colorado. And with me as always is Wes,

The boss. Hey, everybody.

Again, I'm still,

working on my office, so apologies for the echo right off the bat, but We got some good stuff for you today. Yep. And and I I apologize if there's any echo in mind. I took down a couple of my sound panels because I've been it. Moving things around a little bit, so Oh, yeah. Isn't as tuned as it normally is. It sounds pretty good. Yes. It does.

Before we get going, let's talk about 2 amazing sponsors today. One of which is Prismic, and the other is Century. West, you wanna talk about Prismic, and I will talk about Century. Yes. Prismic is a headless CMS, it's a service. So all you have to do is sign on up, and you can get right away to using their UI to create

All of your content types. They say giving Prismic to teams turns websites into growth engines. Why? Because, Prismic makes it really easy for you, the developer, to get set up. You create your content types. You create your relationship types, and then you create these things that are called slices. They're reusable sections on a website.

I always like to correlate slices to components in your application.

It. It's really cool because then your your team can use Prismic, create all the content, put those slices together to form a website. So So it's kinda like a page builder. And then you, the developer, you just have to co correlate components with that. So say, okay. If they give me a movie component, then render out, Earth, they give me a movie slice, then render out the movie component. It's really a really neat way, and it sort of solves that problem of like, I want to build this thing in the tech that is scalable and whatever for our team, but we also need to be able to Let our users edit it and not just edit the content, but edit what type of content and where it goes on the page. So check it out. Prismic. Iosyntax.

Tons of starter files there. Some pretty fun landing page. Thank you, Prismic, for sponsoring.

This episode is also sponsored today by Century. And you know what? West Century has a conference coming up. This is really neat. Century is hosting Dex, Sort the Madness, the conference for every developer to join as we Instigate the movement for better and more reliable developer experiences.

So what is this madness? You might ask. And I I really would ask even though I I know because I see madness all the time in my my code base. It's the never ending need to deploy stable code quickly. Come to decks To engage with developers who will share their epic fails and glorious saves. Sentry can't fix the madness, but we can start sorting it through with you.

Register today to join in San Francisco or virtually on September 28th at century.ioforward/eventsforward/decks, Which is you know you know, pop over to Google and type Century Dex. You'll find it. Let them know that you heard about Dex from us at Syntex.

Alright.

Wes, post CSS.

What's your what's your, usage of post CSS? Do you love it, hate it, rely on it?

Yeah. I love it. I think it's a staple for any project that is not using, like, a full blown system like SASS or Less or, what are the other ones? Sass and Less is is kind of Stylist. Stylist. Yeah. That's it. That's a style. The one I use. Now.

So, The idea behind PostCSS is similar to Babel for JavaScript in that, You can write next generation CSS, whether it's stuff that's been approved and is being implemented, whether it's something that's implemented but you have to back to older browsers or whether it's just simply a proposal and you wanna try it out.

They will take that CSS, transform it, and then out the other end, give you CSS again that is compatible with all the browsers.

It's not a silver bullet because there are things, like, There are things that need to happen in the browser, like, a variable updating.

That's it's not gonna handle that for you, but you can't also you can't get that with any compiled system, out there. I'm a big fan of PostCSS. It's been around for, I don't know, probably 10 years or so, and, it's a fantastic, Fantastic library.

And inside of PostCSS, there are dozens and dozens and dozens of plug ins. The idea is that every single feature has a plug in, and you can either pick and choose the plug ins that you want or Install what's called a preset, which is a collection of plugins, and generally, that's what most people are doing. Yeah. And it's funny because I I went into, like, the preset e n v stuff

For my post CSS only to find that there it really once you get into it, if you want To really have something specific, some of these features specifically, that installing the individual plug ins is the way to go. It's funny I ran into, like, GitHub issue, and Anna Margol was, like, posting in the GitHub issue being like, hey. I'm hitting this and this with this situation. I was having the exact same thing.

Oh, so I just I just DM ed him on Twitter. I was like, hey. Do you ever get to the bottom of this? And he's like, no. I just installed everything individually, which is honestly what I ended up doing as well. Oh, yeah. Yep.

So, you know, if if you're having issues with some of the plugins, you can always, you know, take it a la carte and do whatever you want. Piecemeal. Yeah. And then you know what what you're getting.

Talk about, like, what are the plug ins that we might wanna use. And this is kind of fun because it's it's both like what plug ins we're using, but also just like here are some kind of cool Things that you might not know about CSS will kind of get into that as well.

Yeah. Cool.

So, here's some plugins, and these are all the ones that I'm using. So I find these to be plugins that help either support my goals of writing next gen CSS or support my goals in terms of, like, getting My code base to feel a little bit more like Sass without, using straight up Sass. We we Hold any CSS preprocessor other than this from my code base. So, one of them that I think is a must have is post CSS hyphen import For importing your code, and and typically, I mean, there are, like, native imports in CSS. I don't know if you've if If those of you out here listening have heard of native imports in CSS, but they've existed for a very long time.

But they're not always I think Here, they technically have, like, a performance hit or something. But either way, what this is is this is a compilation import. So when you import something, it's physically moving things from 1 file to another file the same way that a Sass import would. And and that just is nice and easy, then you don't have to worry about is it Using the less performance CSS imports, but then where you can still break out all of your individual CSS files into smaller reusable chunks or They're not even necessarily reusable, but just smaller chunks.

Do you use importing in post CSS, Wes, or do you use importing in CSS?

Yeah. I I tend to not like, unless it's, like, not a big deal. It's a throwaway project. I'll just use regular CSS importing.

But, like, you don't necessarily wanna import 14 different CSS files, especially like if you are writing your CSS in like modules, like you've got a header CSS and like you've got Files for everything that thing that you do. It's not crazy to have 15, 20, a 100 different CSS files, And you can't possibly load all of those in when you visit the website because that would trigger, what, a 100 different requests over the network. So, It's funny because I don't this one is not like a standard, right? Because the standard is already in the browser, but we want to sort of just Compile it all into 1 sorta like we are minifying years ago with our JavaScript. Yeah. It's almost like an improvement upon the standard, so to say. Right?

Yeah. It's not having to dynamically do that and parse it. Exactly. I like I like this, and I actually do break mine out, fairly Intensely, my my my CSS, I know you said you don't, but we have, like, a single No. I said I do. Oh, you said you you said you don't wanna have, like, 20 imports.

Oh, so I mean, like, you don't wanna have 20 different imports triggering network requests. I do for Oh, okay. A lot of my stuff. Okay. Because you don't want like, I I absolutely hate when you have to scroll a 1000 times or or jump to different parts of the file. Much prefer to, Especially when you're writing component based stuff, just write the component, write the CSS that goes along with that, and generally, I'll have another file for shared stuff amongst all the other ones. Yeah. And not that I'm using, you know, like a single file component system like Svelte or Vue. Right? Now you just write your CSS in line. But it. I I have mine broken out into, like, things like themes and utilities and base and colors and variables, those types of things, headings, forms. Those are the types of Files I have broken out. Alright. Next 1 is gonna be post CSS nested. Now post CSS nested is there's a little bit of, confusion around post CSS nesting plug ins because there's a couple of them, one of which which follows the spec completely and one of which follows more of a Sass like nesting. So if you haven't ever dove into the difference between the nesting spec in the Sass version of nesting.

You have to use a lot more ampersands in the in the spec. Basically, Anytime you're doing a a nesting kind of situation, you're you're tossing ampersands in their left and right. Meaning that if you have Sass and you're you're saying, I don't, Maybe I'm having trouble with keeping SAS up to date or or just I I don't wanna get have SAS in my code base anymore, and you're migrating code from SAS.

It's not going to straight up work even if you go to the nesting spec version of this. So using this plug in allows you to us. Take that style of coding that you maybe are more used to with with a SaaS style of nesting and just have a hashtag just work.

Yeah. Which one do you use? I use the non spec one. I use the SAS style one because our code was in SAS for a long time. Oh, yeah. And I, You know, I pulled SAS out and I didn't want to. I was, like, not using any SAS feature. So I was like, why am I using SAS if the only feature I'm using in it is nesting? The nesting. That's like it. Yeah. Yeah.

The the thing that I miss so much, and the reason why I throw these plug ins on was just, obviously, nesting, but, like, nesting media queries.

Yes.

I much prefer to write the media query inside of the the initial selector than to write a whole bunch of media queries it somewhere else and write the selectors again. It's much easier to be like, alright. Well, I want this span to turn orange when it's on a smaller viewport. Oh, just pop a media query right inside of that selector.

So much easier. Yeah. I greatly prefer that style of media queries.

I have been in my TypeScript course, I reach for the spec one. So anything from scratch, I reach for the spec, it.

Because that's the spec, and that's the way it is. It definitely took me probably half a day of being like, oh, how do you do this In the the spec way. Mhmm. But once you got comfortable writing the ampersands and and whatnot, it was It was sort of a walk in the park, kinda like with CSS variables. Initially, we're like, oh, what is this dash dash? And, like, now it's not a Not a problem for me. Not a not a issue at all. So the name of the plug in for the spec one is PostCSS Nesting, And the name of the Sass one is PostCSS nested.

Yes. So nesting

is the spec. Nested is the more Sass it. Looking one. So especially if you're using BEM,

it makes a lot of sense to use the Sass based one. And I think if I would have been writing anything from scratch, I would have gone with the spec. But since I'm moving a code base over, I didn't wanna have to hunt down through Hundreds of No. I've seen it. Not. Yeah. No. That's not worth your time. It's like, if it works, it works. Right? Yeah. Totally. It. Totally. Totally. Totally. Alright. Next one here is going to be you have variables custom properties in here, but I don't use anything for that. So I'm curious about what you're thinking there. Yeah. I I throw this one on just because so I I should say I generally will reach for a preset called

Post CSS preset env.

And what that does is you just give it a list of which browsers you are supporting, and it will figure out Which plugins need to run and don't need to run.

And at a certain point, custom properties will be supported in all the browsers. I don't even know if it's this one is is being used or not, but it is part of the preset ENV list of plugins.

And that's great because You don't have to go through and reevaluate all of your plug ins. Like, oh, do I need this 1, or is it supported? As you every time you bundle it, it'll say, alright. Well, I'm safari I'm safarting.

I'm supporting

the last,

Safaris, and last 2 Chromes and blah blah blah. I'm supporting these browsers, and it will figure out, okay. Well, We need to to put these plugins in for you. And one of those is, CSS custom properties. So If you are using CSS, I'm gonna call them CSS variables. The proper name for them is CSS custom properties. So if you're using CSS variables And you reach a browser that doesn't support them, then what happens is that the whole thing will break.

But if you were to compile it, let's say at compile time color was blue and then you use some Custom property where you change the color to darker blue for whatever reason. That's not gonna work in the older browsers, but that's okay because what it will do is it'll say color blue, Color primary 1 or whatever you have it.

And browsers that don't support those new Syntax will simply just fall back to the standard, and that's what the post CSS

custom property plug in will do for you, which is really nice. Yeah. Yeah. It's funny because, I mean, CSS variables are supported all the way back to basically everything but IE 11. So Oh, you're probably you fine then. You know, that's it's amazing that

some of these things is just like, oh, we don't really have to worry about that anymore. Well, that's the kinda cool thing about preset ENV in general is that, like,

you you if you don't need it, right, I mean, if you don't need to think Too hard about it. You just enable it, and then you could utilize those things. And, alright, who cares if if we know what the support is because there's gonna be some kind of fallback here.

But, yeah, I don't I don't use it for that reason. I don't Oh, custom properties has been in Safari Ios since

a 2016 Hokey.

Yeah. Okay. Yeah. You don't even need that one. That's what I'm saying. So the next one here is gonna be, here's 1, man. I gotta say, this is one of my new favorite CSS proposals, which is CSS media query ranges. If there's one thing that my My dyslexia, ADHD brain has never remembered in my entire life is the media query syntax. I always have to use a snippet or I I could not tell you. I've been writing media queries for over 10 years now, and, I mean, way longer than 10 years. And I I never Remember the media query syntax for some stupid reason. So this new syntax allows you to utilize what are essentially, like, greater than or equal 2 or, like, range style operators inside of your media queries to be able to define them. So you use the the syntax it. Normal at media whatever. And then in the parentheses, you can just say width greater than 500 pixels. Man, that makes so much tends to be. That makes so much more sense. Or you can put width in between things. So, like, you know, width is greater than, 200 pixels, but less than 700 pixels, then this media query will be in effect. So this is a newer feature in CSS, and the CS. The, PostCSS plug in is PostCSS Media Min Max, so we'll have that in the show notes as well. This is one that I have been really loving myself And just it's one of those new proposals in CSS that I feel like is just makes things way nicer for me to read personally.

Another one along that same lines actually, these next 2 even kinda go along really well with this, which is custom media queries.

Have you dove into custom media queries at all for CSS?

Yeah, I have. It's essentially where you can define the media query

Early on and then just use like, put it in a variable essentially, and then use that variable as a media query. Yeah. Because we it's funny. We've talked on this show about, like, Using CSS variables inside of media queries and how that's a bummer that you can't do that. And then we often hear that e n v vars is the way to go. But e n v vars CS can assist, but also defining custom media queries for me has been the way to go. So you define a custom media query with at custom hyphen media, Then you give it a name just like you do a CSS variable with a double hyphen in front of it, and then you define that media query.

Then anywhere that you're using At media, you just do hyphen hyphen the name of the variable without any other sort of wrapper, and then that's your variable. That's your CSS media query variable. That's what we wanted. This thing is usable today with no effort post CSS custom hyphen media.

Post CSS hyphen custom hyphen media.

It. Again, I'll have the the, names of all these plugins in addition notes. And the last one here is the e n v vars plug in, which to be honest, it. I have no idea what e n var e n v var syntax will end up looking like in the final version of CSS if it comes. However, this one allows you to define your post CSS envvars inside of we have ours in our feet config, Actually, which is where ours live or in our I'm I'm sorry. In our Svelte config. Let me pull that up. And inside of our Svelte config, I've been able to say, Here's our environment variables, and this is inside of the plug in for post CSS env var.

And we've defined our our, environment variables. And what I did is I went through and I defined all of, like, the key breakpoints that I'm gonna be using.

And so you define them in the build process.

And then when your code starts or the code builds, it's basically just replacing those ENV VARs with whatever the variables. It's just sort of like a It's almost like a SaaS variable type of swap deal, but on build rather than a dynamic variable. But the env var is nice because for things like breakpoints that you probably have a set view of that you're not going to change. You just set them once somewhere, and then anywhere you want to use it, instead of doing var Function variable name, you do env hyphen e n v function.

So that's really super nice, and, I I utilize this one Along with custom media and media range. And let me tell you, I fell I fell back in love with media queries I'm doing this because media queries to me have really bummed me out that they're not element queries. Every time I look at media queries, I'm like, man, you could be doing so much more if you are on the element level.

Now now the syntax has been improved so much. I'm like, yeah. He's pretty sweet now. Okay. It's pretty sweet. Another, syntax that is up and coming is the color functions.

We did a whole episode on the color function. If you want to be able to, take any color RGB, HSL, hex, Any of the different color spaces and then convert that. Be like, alright, I want the I want to take the blue of that RGB value, And I wanna crank it up by 12% with a calc function. You can do that, and, the post CSS plug in will Just do it at compile time for you instead of you having to do it in the browser, which I guess could be a a performance benefit if you don't need them to be live.

So that that I'm really excited about that. Or the most basic one is I have this hex value. I want to make it 50% transparent.

How do I how do I do that without having to figure it out myself? You know? And I I don't wanna, like, just duplicate the value. I just wanna take it and say 50%, and color functions are going to do that. We did a whole show on that. You go back and listen to it as well. So I'm trying to find the right plug in for this. So I found one from Jonathan Neil,

post CSS color function, but it says color was changed to color mod.

And and then it says color mod was removed from color module level 4 spec. And so it says this is deprecated. So do you know what a good color function plug in for this is? I'm looking for 1 probably that works with CSS variables. Right?

Yeah. Yeah. Let me see here.

Yeah. Because this other one of the things too. It's called post CSS color function notation.

Oh, color function notation. I put a link to it in the show notes here.

If you if you just go to the list of plug ins that are in the Post CSS preset e n v, generally, those are, like, the blessed ones that are, like, okay. You know, like, these are the legit ones. Those are kept Kept up to date, especially, like, if you start using this stuff before the spec has been approved, we should have Jonathan Neill on because he always makes these.

Yeah. Oh, here's a new spec. Now allow me to create a post CSS plug in for immediately. Yeah.

Yeah. Like, same day.

Yeah. Seriously.

Yeah. He's, he's one of those people who who just kind of does magic all the time. Yeah. Yeah.

I think that is it. There's it it's Honestly amazing. I'm just going through a list of all of the things here, and there's there's probably, I don't know, 40 different plugins in PresetEnvy, But I would say most of them either I don't use them. ICUnit, is Pseudo class.

CS. Mhmm. Mhmm. Nested calc is an interesting one.

That's not one I wouldn't use, but they seemed a lot of them seem to already be supported, which is, like, Shout out to browsers. Can we talk about that? Yeah. I know I know we don't have we've been going here for a little bit, but, man, you know, you wanna talk about something that's been

It kind of just felt like it was it was not dead or anything. But until CSS 3 dropped, CSS was kind of stagnant for a long time. And then CSS 3 dropped. We got a whole bunch of new stuff. And then it was just kind of alright. That's The latest version of CSS, but then it's it really feels like in the past, I don't know, 6, 7 years that CSS has just been Flying. Yeah. New features. Just nonstop. It it's just been getting so much better all the time. And I've never been a CSS hater, But it feels like it's just like a whole new language now in so many positive ways. Yeah. It's unreal.

What you can do, you can, like, you can almost do everything. There's a couple of things we're waiting for, obviously, but I feel like we are in a really good spot and I feel like a lot of people's attention has now turned From how do I do this to, like, what's the best approach? How do I write modular CSS? How do I Make sure that this is performant. How do I share this amongst a team of a 1000 other developers who also write CSS? Right? Like, those are the problems that people are Trying to sit solve now. Totally sick. Alright. That's it for post CSS.

Let us know what plug ins you like to use tweet us at syntax f m. We'd love to hear it.

And with that, we'll catch you in the next one.

Peace.

Peace.

Head on over to syntax.fm 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.