Use Next-gen CSS Today (Post CSS Configs)

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

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.

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.

we also need to be able to

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

Earth, they give me a movie slice, then render out the movie component. It's

components with that. So say, okay. If they give me a movie component, then render out, and then you create these things that are called slices. They're reusable sections on a website.

Welcome to Syntax. On this Monday, hasty treat. We're gonna be talking about post CSS 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.

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.

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 All of your content types. They say giving Prismic to teams turns websites into growth engines. Why? Because, 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

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

really a really neat way, 15, 20,

But if you were to compile it, let's say at compile time

the last,

We need to to put these plugins in for you. And one of those is,

you know, width is greater than, 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.

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, experiences.

blah blah blah. I'm supporting these browsers, and it will figure out, okay. Well, we'll catch you in the next one.

Hokey.

a 2016 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,

that's the spec, and that's the way it is. It definitely took me

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, Alright.

is the spec. Nested is the more Sass plug ins that are in

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.

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.

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.

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

and reevaluate all of your plug ins. Like, oh, do I need this 1, or is it supported?

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 rather than a dynamic variable. But the env var is nice because for things like

And the name of the Sass one is PostCSS

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,

and, I mean, way longer than 10 years. And I I never Remember the media query syntax for some stupid reason. So 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

Because

Yeah. Okay. Yeah. You don't even need that one. That's what I'm saying. So the next one here is gonna be,

It was sort of a walk in the park, kinda like with CSS variables. Initially, we're like, oh, what is this dash dash?

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

My dyslexia, 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

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

the whole thing will break.

ADHD So what is this madness? You might ask. And I I really would ask even though I I know because

Nesting,

it. Normal at media

You don't have to go through 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 to Babel for JavaScript

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.

it somewhere else and similar take any color RGB, HSL,

this new syntax 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, Post CSS hyphen custom hyphen media.

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

color was blue and then you use some

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.

Yes.

I much prefer CSS,

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

then what happens is that it. Looking one. So especially if you're using BEM, 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 the I want to take the blue of that RGB value,

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, when you visit the website because that would trigger, what, a 100 different requests over the network. So,

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.

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 one of them that I think is a must have is post CSS hyphen import

The the thing that I miss so much,

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

allows you to utilize what are essentially, like, greater than or equal 2 or, like, range style operators Now

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

and last 2 Chromes and out there. I'm a big fan of PostCSS. It's been around for, I don't know, probably 10 years or so, and,

Yes. So nesting inside of your media queries to be able to define them. So you use the the syntax there it really once you get into it, if you want To really have something specific, some of these features specifically,

Min Max, so we'll have that in the show notes as well. This is one that I have been really loving myself 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, Wes, post CSS.

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.

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.

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

than to write a whole bunch of media queries

to write the media query inside of the 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

I'm supporting the

And that's great because And browsers that don't support those new Syntax will simply just fall back to the standard, and that's what the post 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.

As you every time you bundle it, it'll say, alright. Well, I'm safari I'm safarting.

And you reach a browser that doesn't support them,

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

the post CSS plug in will nested.

Yeah. Seriously.

Yeah. Yeah. Let me see here.

Just do it at compile time for you instead of you having to do it in the browser, I feel like we are in a really good spot and I feel like a lot of people's attention has now turned 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.

which I guess could be a a performance benefit if you don't need them to be live.

Any of the different color spaces and then convert that. Be like, alright, I want 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 you have it.

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

and,

is Pseudo class.

CSS variables. Right? for a full archive of all of our shows, and don't forget to subscribe in your podcast player

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

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,

either I don't use them. ICUnit,

Yeah. Like, same day.

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

We did a whole episode on the color function. If you want to be able to,

I don't know, 40 different plugins in PresetEnvy, the spec has been approved, we should have Jonathan Neill on because he always makes these.

But I would say most of them

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%, the initial selector Color Things that you might not know about CSS will kind of get into that as well.

And I wanna crank it up by 12% with a calc function. You can do that,

If you if you just go to the list of

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

a 100 different CSS files, And you can't possibly load all of those in

It's funny because I don't this one is not like a standard,

my

dove into the difference between the nesting spec in the Sass version of nesting.

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

But, like, you don't necessarily wanna import 14 different CSS files, especially like if you are primary 1 or whatever

Intensely, 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 You have to use a lot more ampersands

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.

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

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 They will take that CSS, transform it,

and one of which follows more of a Sass like nesting. So if you haven't ever

crazy to have

hyphen e n v function.

So that's really super nice, and, I I utilize this one 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, Yeah. Because this other one of the things too. It's called post CSS color function notation.

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.

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 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.

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 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.

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

Along with custom media and media range. And let me tell you,

And so you define them in the build process.

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, Post CSS preset e n v, generally, those are, like, the blessed ones

like, a full blown system like SASS or Less or, and the reason why I throw these plug ins on was just, obviously, nesting, but, like, nesting media queries.

in that, hex, Post CSS preset env.

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

post CSS only to find that

Yeah. I love it. I think it's a staple for any project that is not using,

That's it's not gonna handle that for you, but you can't also you can't get that with any compiled system, Yeah, I have. It's essentially where you can define the media query Safaris,

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.

that installing the individual plug ins is the way to go. It's funny I ran into, like, GitHub issue, and Anna Margol 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.

it's a fantastic,

is

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.

and you can either pick and choose the plug ins that you want or

For importing your code,

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.

like, a variable updating.

You can write next generation 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?

For my Register today to join in San Francisco

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,

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.

So, The idea behind PostCSS Fantastic library.

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

I don't know, 6, 7 years that CSS has just 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, CSD.

What you can do, you can, like, you can almost do everything. There's a couple of things we're waiting for, obviously, but

Flying. Yeah. New features. Just nonstop. It it's just been getting so much better Yeah. Cool.

with no effort post CSS custom hyphen media.

feet config, of we have ours in our post CSS color function, but it says color was changed to color mod.

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

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

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 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.

Peace.

Head on over to syntax.fm

Peace.

Or drop a review if you like this show.

And with that,

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 Let us know what plug ins you like to use tweet us at syntax f m. We'd love to hear it.

sick. Alright. That's it for post CSS.

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.

on September 28th at century.ioforward/eventsforward/decks,

or virtually using straight up Sass. We we Hold any CSS preprocessor other than this from my code base. So,

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 tastiest web development treats coming again hot. Here is Wes, Barracuda,

Boss, and Scott

Monday. Monday. Monday.

the craziest,

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.