Writing Good CSS

specifically, me, 9,000,000

7 years or so until you decide to do an entire 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 slider and the buttons and, and it can figure out what the classes are in your templates.

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

my the back end of my course viewer. And I actually built that on Foundation, was super

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, Just living her life. Living her life.

tough

support, which is kinda cool. And we should say for people who haven't used either of these, 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.

developed.

classes that are bringing on a lot more,

actual design. Not not actual CSS because you're not really writing CSS in that regard. You're writing these classes. But, like,

quite a bit. I actually I think I initially got into Bootstrap because it had 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 and

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.

for building a Flexbox and CSS I want the plug in for nesting. I want the plug in for color functions. I want the plug in for, compile step was initially done in Ruby, meaning that your entire application

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

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,

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,

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.

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.

as in itself, but, like, Foundation went SaaS before,

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

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,

everything that you wanted. But I had a couple

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,

and trying to work with all the margins, padding, and things wouldn't line up perfectly, and you had to use negative margin to

My go to was foundation for sure. I did use Bootstrap Alright. Thank you so much for tuning in. We'll catch you on Monday.

the layout because layout before we had Grid and Flexbox

4.5.

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, regular CSS variables, which is pretty nifty.

And that's probably the reason for the falling out of the the popularity of these things generate CSS, Yeah. I think I need to redesign And, generally, a preprocessor and and the one that seems to be super popular and the one to go with is called purge CSS.

they generally come with a bunch of different components for things like,

writing your CSS and your HTML.

Otherwise, it's just gonna be a mash of whatever is hot at the time. And,

you get cards, you get a slider, and it will swap them out with,

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

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.

devs you think we should do a syntax highlight You grab PostCSS, 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,

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.

I did buy those rollerblade wheels from from last I would say that that that would be

that you would set the properties of to

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.

Go for it.

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 type of feature. Sure. They're variables,

CSS files

gray different gray colors, where you you write your CSS for, Alright. So preprocessors, are dynamic, meaning they can be efficient. And, also, it seems like if you're not good at design,

off.

like, each block and in its own file, and then you use some sort of

And, if you guys have that just takes regular PostCSS 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,

tokens

it's just unreal story. So, it was indentation based. The curly brackets and semicolons and colons were optional.

He is one of one of the very few

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,

And our 1st ever 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.

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,

And a lot of people recommend to learn new languages where it's at nowadays.

Use coupon code syntax for $10 Like you said, to me, that just sounds like variables.

Super cool.

Sick. Peace. Peace.

for any maintainable CSS that's outside of, like, naming and properties,

Rustlings.

super duper easily within Framer Motion and React. So check it out at leveluptutorials.com.

they're just they're just declaring things like small, medium, large font sides, 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, break it down into all of its little bits. And then the plug ins will allow you to transform things that need to be computed 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

z index, box shadow, those types of things.

hit that up. He also posts lots of, like, really nice desk photos. He lives in Lisbon

on his Instagram first.

of course, Gatsby custom hooks, all of that. It's just like building a well rounded website,

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

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 down the pipe, the same site over and over again.

Suck.

It's d h a n I s h you get grids.

essentially does that, builds up devs. He's always shouting out other developers on both on Twitter and Instagram. So, doing for loops, things like that. And that can be very helpful to you can use SugarSS.

like, for real to have, like, a different. I didn't I didn't I didn't feel like I had, like, enough context

So I I I rely on a lot of

it's from HBO Max.

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

like, a maintainable CSS. Have you heard a lot about the concept of design tokens?

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

supportive of of my courses, of of Scott's courses.

your element would be your card header, No. What is that?

styles, selectors, those types of things, for me, has been the use of CSS variables, 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,

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.

So, I don't wanna misrepresent Yeah. Very good.

So I'm not sure how you get that, but,

and, So if you change a variable,

and a modifier would be like card header major projects at the time of their popularity, and all of them went foundation.

Because BEM is the one that you see more often.

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

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.

you should know about.

We sorry. This is where we highlight somebody who is in the community doing really cool stuff that, 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, and it's gonna be available at mastergatsby.com.

attaching

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

So design tokens is definitely more of a,

primary, secondary colors.

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.

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

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

I've known Denish for, I don't know, probably you are probably in that for, check it out. Class Action Park.

Now Rustlings is it's an interactive tutorial.

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, and

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.

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.

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

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, My name is Scott.

Ghajar.

So I I still really like BEM. I I use it in a couple websites, 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 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.

There's Yarn article on CSS tricks,

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.

in programming.

syntax highlight is Denish Shameless plugs, I will shamelessly plug my upcoming Gatsby course. It's gonna have serverless functions and has, like, beautiful photos of the water often.

ESLint. Yeah. So I've been using CSS variables a lot for writing,

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.

to do a lot of things. For instance, like, you could define a variable you know, styled from this other framework rather than styled component. The only difference is that they do support things like auto prefixer essentially, 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.

CSS. Have you seen any of these other ones? I had a little

the CSS from what you wrote into what you have. And and then it will 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 that will then be fed through

You can have people just grab

it allows you to use things like post CSS. There's another one called Astroturf.

some of the older browsers and even some of the current don't know about gap yet. It's grid dash gap.

which is a React component

the whole community is built up into tiny little plugins, very much like Babbel is right now.

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

KB footprint, but the exact same code footprint, essentially, as styled components. You import, Yeah. And I've always loved PostCSS.

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.

different class of CSS and JS frameworks Wes you have,

a full blown framework for this. I just essentially need, like, template string so I can use my JavaScript inside of it. Yes.

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

So if you want to try all of this out and more, head on over to log rocket.comforward/ 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,

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 and we ran into a weird Firefox bug.

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

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.

And if you are pushing boundaries, you are likely to break your code. So if you would like to push your boundaries, but,

little pieces and build their own thing rather than it it being, like, sometimes to me, that's often very frustrating You can, 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.

Cool. So let's get into it.

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 It's or Those are probably the the 2 that a lot of people use it for. Quite honestly, I had a couple of projects that used

and, well, not just auto prefix or post

In fact, that's one of my biggest downsides of styled components,

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.

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.

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, a framework, whether it's Bootstrap or Foundation or something, a utility framework, the Tailwinds, is that, generally, Tailwinds would ship 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 the ability to use things like functions or mix ins or variables a little bit different. So you have just your regular dot CSS files, and I'd imagine you can use 0 Celsius.

and

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, whatever their color was, or it'll it'll fall back to. So you could say, like, color var dash dash red, on the server. So check it out for your next Jamstack based website, Netlify.com.

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, but, like, they're not the same thing. You can't just say, I like this And it can work with styled components. So

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.

based CSS organized

because I'm like, I don't want to build this thing myself, and we'll talk about solutions to that in a second.

in both Flexbox and Grid in order to specify gap, h two, or before we got a lot of these tools,

your HTML, some way to approach 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, And, like, people would get, like, super hurt on all these rides, and 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.

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

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, 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, and scoping CSS.

Yep.

to writing maintainable CSS.

And more recently, there's been a component

I've previously recommended Purify CSS, but

fantastic. So it's a little bit more about what Netlify JS doing. Here's Wes.

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 So your block would be your card, So shout out to Denish.

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,

and then it looks at your CSS, it looks at your HTML, and it will remove all of the unused selectors,

Yes. So Netlify is a Jamstack hosting platform. And I guess, like, over time, even since they've started 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, selector

really simple

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

Probably it. Turbo Tolinski.

and get rid of the other 100 because they're not using it.

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.

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

kind of tough, 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.

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

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

So last Yarn of here is talking all about writing maintainable,

Netlify.

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

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

on everything that you have, but they also do the builds of your website. So

JS well as hosting your code anywhere really simple.

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, after

Netlify. Netlify.

things about using a,

solutions that are all sort of geared towards people using front end frameworks.

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.

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

generates

in my,

from that. So that might be a little bit to get up and running if you have lots of dynamic pages.

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 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 gratuitous to sick pick something you did in the very last episode.

and they make that really easy both locally and, other, Boma.

one of the

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 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 Yes. That's freezing. In in just about,

in tooling and frameworks and things like that, so buckle up for that. Today, we are sponsored by LogRocket, which is JavaScript session replay, 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

on my phone. Honestly, I do not know if there was any snow. Last night, definitely moisture and flurries.

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

sorta area that's that's come up is utility

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

scoping CSS, writing maintainable CSS,

that is currently going on in Colorado right now. Yeah. We, snow?

I Wes, like, yesterday,

I was outside mowing the lawn. It was a 100 degrees out, and we got a winter alert 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 deploying via your build process you can make a nice looking CSS theme by out of the box without adding any classes. So no, like, fancy components, essentially,

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, They have full NPM if you're using,

So 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,

Today, we've got a banger of a show for you. We're gonna call it good CSS, 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.

frameworks.

and Netlify, which is platform for automating the build and and hosting of your websites. They do analytics that can host your React application your min, your flex value, and your max value, you can just use

wildfire and winter snowstorm

all these different tools and things that you can use to write good CSS.

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

because I think some of these tools are 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, and then, like, one of the very final videos was we were just, like, making it responsive,

and Wes Bos. Welcome

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

your stylist loving ways behind, 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.

Edge case nightmare.

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.

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

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.

and converts them to 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.

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

There's actually 2 different StyleLint.

I don't see this outputting to Yarn anywhere, do you? Oh, is it just it just outputs to

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

ability.

Oh, Brooklyn, how much trouble can you be?

or sorry. That takes regular CSS custom properties CSS. So I wonder

this weird combo of max, 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 Probably since we recorded this, the most popular

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

and you tell it what environments you're supporting. So if you're supporting Node or if you're supporting

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

I don't know. I don't see it in their documentation.

Clamp is one of those things that I have not used in any real capacity, 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

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,

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,

swapping out the deck chairs again to waste a little bit of time. Yeah. That's that's how they go.

I think it's gonna be a bit before we can use it in, like,

text? I think it just outputs to text, which would be a huge bummer because I've gotten so used to the dynamic

Next one we have here is called 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.

IE 6 or you're only supporting the latest 2 browsers, there is the same thing What's something that does have a prefix? Flexbox.

well, maybe I should look into if that is actually a thing or if that's just So a lot of the history of writing good CSS has been about

So we had to end up taking it out, but 4 years or so, and he's the type of guy who has always been very supportive of the Sanity. So 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 and it finds the Gatsby website. It can go ahead and build the sucker for you. It does all of our serverless functions. So Oh, I'm in.

There's another plug in called PostCSS custom properties, but that just 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.

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

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

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,

accessed

instead because it's it's not the same thing. Right? Yeah. And because see, like, we should clarify. Like, CSS variables

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

and updated in the browser.

fire off to say, like, well, I still like using SaaS. I get that all the time. I just had somebody

Yeah. Well, it's it's funny that you mentioned that thing in SaaS where people will use that as a Like, for instance, we have

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

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

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

So I don't know how I feel about that. I've 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 pretty wicked. I'm using them in my upcoming course. So we'll talk about them partway through the episode.

pop ups or consistently branded cards, and it's this, like, weird

on both axes,

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.

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.

s StyleLint.

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

And the other 1 is, like, you know, Scott s t y lint. You know? So this is StyleLint, You run the command, and it says, alright.

processors, system tests.

And they were telling me about a whole bunch of really interesting

stylelint.i0.

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

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.

One is for stylus, and Node is

plug ins,

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.

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

So, hey, Styleint

JavaScript developer.

For instance,

a Uniquifier,

We also have been very popular for a long time, I've not used it myself, but I know that, g a j j a r. We'll link it up in the show notes.

you can just say, like,

just to 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? every single CSS you need to dip into serverless functions because there is no real back end, 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.

all of your post CSS stuff in it. And then at the end of the day, you have, like, classes, like Scott card,

to do your scoping of CSS. So, 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 So if instead of using CLAMP, prefixes on it, it will it'll look pretty good.

BEM is a pretty popular one. It stands for block element modifier.

It's scoped. I love it.

style component approach or the

writing something like styled components is that 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 Next one we have here is just like removing unwanted CSS, 300 k of CSS It was working on Safari, not come across He has this thing called build up devs Wes he

what the class names are going to be for everything. But one thing I really like about post CSS or some sort of Gulp tool to to build it all together.

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

and then it will give you a class like Scott card 49h7 So you can just use the dollar sign variable like you're used to in Sass, your HTML 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

and then you apply that class name

the Svelte approach Wes you just write the CSS in the same file, 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.

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.

use the

and it just works rather than having to figure out underlined.

and then you can say dot card space h two and and things like that. And what you do is

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, I just haven't heard of a ton of people, 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, which it wasn't at, like, the start of the course,

Yeah. CSS modules are

will give you

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 classless CSS frameworks is basically just, like, different restarts Oh, really? Action park. Yeah. The because they Johnny Knoxville even made a movie about it.

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

but, really, just like a different reset.

classwork there? 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.

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.

Often, I I see people on Twitter. Anytime I'm talking about, like, a new CSS feature, 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 most of the browsers implemented initial Flexbox,

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.

generate CSS rather than having to to do it by hand.

they are something where you write your CSS and you you go through a compile step.

Wes

And the you can with placed content. And, again, that was added

way before Gulp. Yeah. I just have here just regular CSS. So certainly,

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

just because it's 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 Yeah. And I think you nailed it there. It it does. It makes writing, Again, there is definitely, like, a larger component to this. Like, the CSS variables calls and then, like, a function, and you pass it in, like, 2 divided by

like, via JavaScript, then everything else on the page will update, whereas variables disappear in Sass world. Right? 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 all every single possible CSS thing, and this is still a really good approach, is just use a naming convention 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,

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

and just going with with regular CSS.

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

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

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, Last 1 we have here is post CSS preset ENV. So, yeah, you might know if if you're using Babel,

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 to Syntax. This is the podcast with the tastiest web development treats.

and, and within that, just for essentially a winter storm alert notification the exact same foot, not necessarily like, 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.

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, not built by engineers, but just by some wealthy guy who had fake liability insurance.

one of the options that people are choosing now is not to use any sort of preprocessor,

and then you start adding in,

and then they'll use the next thing we're gonna talk about, which is post CSS.

variable fallbacks, things like that.

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.

gained popularity because it could be added at client Node, client time rather than compile time.

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, before the build time.

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