Modern CSS with Chris Coyier
Chris Coyier joins JSJam to unpack modern CSS techniques while sharing insights on CodePen’s future and the evolving developer landscape
Episode Description
Chris Coyier joins JavaScript Jam live at Render to discuss modern CSS features, the state of CSS Tricks, CodePen's rewrite, and Tailwind debates.
Episode Summary
Chris Coyier sits down with Scott Steinlage and Anthony Campolo at the Render conference for a wide-ranging conversation that starts with his background running CSS Tricks, which was acquired by DigitalOcean and has since seen staff layoffs, and his ongoing work on CodePen. The discussion shifts to his upcoming keynote on modern CSS in real life, where he explains his approach of connecting new CSS features to actual public websites rather than presenting syntax in isolation. He walks through several modern CSS topics including CSS Grid's surprisingly low 12% adoption rate compared to Flexbox's 89%, the promise of subgrid for inheriting parent grid lines, container queries, and the somewhat underwhelming AT Scope specification. A lively tangent on Tailwind CSS reveals Chris's nuanced stance — rejecting both extreme love and hate for it while noting that hot module reloading is essentially a prerequisite for a good Tailwind workflow. The conversation also touches on styling approaches in React, the limitations of styled components as CSS evolves, and wraps up with a preview of CodePen's upcoming rewrite, which aims to support modern file-system-based development workflows without disrupting the existing product.
Chapters
00:00:00 - Introductions and Chris Coyier's Background
The episode kicks off with Scott, Anthony, and guest Chris Coyier recording live and in person at the Render conference, joking about their high-rise venue and audio setup. Chris introduces himself, sharing that he's best known for CSS Tricks, the long-running web development blog he sold to DigitalOcean over a year prior.
Anthony and Chris discuss how CSS Tricks evolved beyond its name to cover all aspects of web development, and Chris reflects on the site's current state after DigitalOcean's layoffs affected the editorial team. He notes that while new publishing has stalled, the existing content and URLs remain live, preserving SEO value for all past contributors. Chris also mentions CodePen as his primary focus, describing it as a larger operation with seven full-time employees.
00:04:32 - CodePen Origins and the Web Development Journey
Anthony shares his personal story of using CodePen when his local development environment was completely broken, relying entirely on online editors to build projects that he'd export to GitHub and deploy on Netlify. Chris appreciates the story as a testament to developer resourcefulness, coining the phrase "code will find a way."
The conversation touches on Anthony's history listening to Shop Talk, Chris's podcast with Dave Rupert, and some lighthearted banter about the show's name attracting confused Car Talk listeners with auto repair questions. This segment highlights the personal connections and community that web development podcasts and tools have fostered over the years.
00:07:04 - Modern CSS in Real Life: The Conference Talk
Chris previews his Render keynote, explaining that rather than presenting CSS syntax in isolation, he connects every feature to a real public website. He opens with an art-directed CNN article, examining its CSS and showing how newer features could improve it. The discussion moves to CSS Grid adoption data from the Web Almanac project, revealing that only about 12% of websites use Grid compared to 89% for Flexbox.
They explore why adoption numbers are skewed — template-driven platforms like WordPress, Shopify, and Wix account for massive portions of the web, meaning the data reflects template choices more than individual developer preferences. Chris argues it would be more interesting to analyze GitHub repositories for handwritten code rather than crawling deployed sites, since that would better represent intentional developer choices.
00:15:32 - Subgrid, Container Queries, and AT Scope
Chris explains subgrid, a Grid feature that lets a nested grid element inherit its parent's grid lines rather than redeclaring them. He describes it as tremendously useful for alignment, though it still lacks full cross-browser support with Chrome being the last holdout. The conversation briefly touches on container queries as a transformative addition to CSS.
The discussion takes a spicier turn with AT Scope, a new CSS specification Chris finds disappointing. He explains that despite its name suggesting scoped styles similar to CSS Modules, it doesn't actually prevent selector name collisions. Instead it offers a "donut scope" feature that limits how far down styles cascade — a capability Chris considers clever but rarely needed in practice. He contrasts this with the real scoping problem that CSS Modules already solve.
00:21:38 - Styling in React, Tailwind, and the CSS Abstraction Problem
The conversation pivots to CSS-in-JS approaches in React, with Anthony expressing his dislike for styled components as an unnecessary dependency. Chris raises a deeper concern: libraries that use JavaScript object syntax for CSS have effectively signed up to support every new CSS feature forever, which their creators likely won't do. He notes that template literal syntax offers a saving grace by allowing actual CSS to be written directly.
Tailwind CSS dominates the discussion, with Chris offering a nuanced take — any extreme position on Tailwind is wrong because the topic is too complex for hot takes. He makes an interesting observation that enjoying Tailwind essentially requires hot module reloading, meaning WordPress developers working with PHP templates face a degraded experience. The group agrees that what feels normal in web development is simply whatever you learned at the time.
00:28:54 - CodePen's Rewrite and the Future
Chris carefully previews CodePen's upcoming rewrite, explaining that the original product was built in an era when code processing meant simple input-output transformations like Sass or CoffeeScript. Modern front-end development operates at the file system level with CLIs processing entire project directories, and CodePen needs to evolve to match those expectations.
While being cautious not to announce specific features, Chris emphasizes that the rewrite aims to support any front-end technology while preserving everything users already love about the platform. He highlights CodePen's role as a place for code artists, job seekers, and developers finding inspiration — drawing a parallel to Dribbble's heyday for designers. The episode wraps with Chris sharing his contact info and a fun tangent about his email obsession and the site emailisgood.com.
Transcript
00:00:00 - Scott Steinlage
Yo, yo, yo, yo, yo, yo. What's up, everybody?
00:00:02 - Chris Coyier
Welcome to JavaScript Jam.
00:00:06 - Scott Steinlage
We're here with myself, Scott Steinlage. I'm technical community manager at Edgio.
00:00:12 - Anthony Campolo
And then we have Anthony Campolo, developer advocate at Edgio. And we have with us Mr. Chris.
00:00:21 - Chris Coyier
Hey, thanks for having me, fellas. Yeah, really pleasant. Yeah, good, good. This is just the coolest audio setup. Just for those of you at home...
00:00:30 - Scott Steinlage
We're in person, though.
00:00:31 - Chris Coyier
Yeah, in person, which is [unclear], really. I don't know, just extra challenging, and I'm in awe. I'm in awe. Good job.
00:00:39 - Anthony Campolo
Well, that means a lot coming from someone who has podcasted for as long as you have.
00:00:42 - Chris Coyier
Right. I have the equipment. I try to buy my way out of problems, but I don't actually know anything, you know? So I just... It's just fun. Yeah, it is just fun. Anyway, yeah, yeah, thanks for having me. We're sitting here just super high off planet Earth. We gotta be at least 700 feet up. People would be surprised how far off the crust of the Earth we are.
00:01:01 - Anthony Campolo
If we jumped out the window, we would definitely die.
00:01:05 - Scott Steinlage
Immediately.
00:01:06 - Anthony Campolo
We don't have to hit the ground.
00:01:07 - Chris Coyier
We could go down 90% of the way and we would still die.
00:01:11 - Anthony Campolo
Heart attack.
00:01:12 - Scott Steinlage
Easily.
00:01:13 - Chris Coyier
Yeah. I'd die just from the amount of pee that I peed.
00:01:19 - Anthony Campolo
Go ahead and introduce yourself. Some of our listeners will know who you are, but feel free to.
00:01:23 - Chris Coyier
Yeah, right on. Because I wonder if, you know, if Edgio is new to me, but apparently you all are just rolling in it over there. I don't know. It's always described to me as Netlify and Cloudflare combined. Really? I don't know. I'm impressed, and I'm jealous of businesses that have a bunch of enterprise clients. Yeah, yeah. But like, good ones, you know, like big-check kind of customers.
00:01:47 - Anthony Campolo
Yeah, no, we have the customers where I can never be sure whether we're allowed to say they're a customer.
00:01:51 - Scott Steinlage
So true.
00:01:53 - Anthony Campolo
NDAs everywhere. We're not that kind of customer. We just pay you. You can't tell people.
00:01:57 - Chris Coyier
I'll just say it's Nike, Google. Let's say, he says, let's say. That's good. I have no idea. Yeah, but if you're a... You know, I'm not big in the edge world, let's say. I don't think you'd know me. And if anybody knows me, it's because I, for a long time, blogged about CSS. CSS-Tricks used to be my site. It was acquired by DigitalOcean a little over a year ago, so that's not mine anymore, but it's still my legacy, you might say.
00:02:25 - Scott Steinlage
Been there several times.
00:02:26 - Chris Coyier
Sure.
00:02:27 - Anthony Campolo
And there was lots of JavaScript stuff on there, even though it was called CSS.
00:02:31 - Chris Coyier
Truly there was.
00:02:32 - Anthony Campolo
I wrote a whole RedwoodJS tutorial once with very little CSS, and actually no CSS whatsoever was in that tutorial.
00:02:40 - Chris Coyier
I was done. Not done. I would happily write about CSS anytime, but I wanted to write about whatever I wanted to write about and have guests like you write about anything they wanted to write about. And that's what it was for the last 10 years of its life. It was just about websites. The name thus was horrible.
00:02:59 - Anthony Campolo
Yeah. And we don't have to, we don't have to hit on this too much, but I'd be curious now that it's been about a year since you kind of let it go. How do you feel about that and seeing how it's continued on without you?
00:03:08 - Chris Coyier
Well, it continued on without me for a while just fine. You know, my lead editor Jeff stayed on at DigitalOcean, which was the company that bought it, and continued publishing stuff, and it lived on just fine. Then they had a round of layoffs just recently, which Jeff was caught up in, as well as I think every single other person that dealt with community content.
00:03:30 - Anthony Campolo
So it's just a shell of a name then, because...
00:03:31 - Chris Coyier
Right. But you know what's positive about it is that anybody who ever wrote for it, the URL is live. Their byline is on the post. They're getting just as much, including me, SEO juice. So if it's online, I'm happy. You know, of course I'd prefer to see it more thriving or whatever.
00:03:49 - Anthony Campolo
So are they still publishing new articles at all? I don't know.
00:03:55 - Chris Coyier
I know that they haven't in about six weeks, but that doesn't mean they're done forever. I don't know. And I literally have no inside knowledge. I have no idea what they're doing.
00:04:03 - Anthony Campolo
A passive observer, like all of us.
00:04:05 - Chris Coyier
But I wouldn't call it a side project for me — it was always way less than half-time for me because I work on CodePen as well, and that's a much bigger enterprise because it has seven full-time employees. That's just larger in scope than CSS-Tricks ever was. We only ever had part-time people, and it was just me and stuff. CodePen is like, it's an actual business.
00:04:32 - Anthony Campolo
And I made good use of CodePen when I was first learning to code. I've told this story a couple times where I had a developer machine that was so old and jacked up, and I'd been trying to learn to code before I actually had any business doing it, to where I had nuked my local development environment so badly that no one could figure out how to run an application on it at all. So I had to use these online editors like CodePen or CodeSandbox, and I would actually write the applications in those, export them to a GitHub repo, and then deploy them on Netlify. Then that's how I would show my projects.
00:05:08 - Chris Coyier
Wow, you had a total online life.
00:05:11 - Anthony Campolo
Yeah, it was the web, 100% online. I had no local development whatsoever.
00:05:14 - Chris Coyier
I actually love that story because it proves the tenacity of somebody who needs to use certain tools and has to figure
00:05:22 - Anthony Campolo
out how to make it work.
00:05:23 - Chris Coyier
Code will find a way.
00:05:25 - Anthony Campolo
And I've also listened to Shop Talk. So it's like you've been someone who, in my web journey, has been very present, and I've learned a lot from you. So it's great to have you here, and I very much appreciate all the work.
00:05:35 - Chris Coyier
Absolutely. My pleasure. Just remind me how old I am.
00:05:40 - Anthony Campolo
That's my favorite thing to do as a very young person. I'm not that young. Mid-30s.
00:05:45 - Scott Steinlage
I'm like a very young person trying to make you feel older.
00:05:48 - Chris Coyier
That's true. I do have a podcast with my friend Dave, and we do this same kind of thing.
00:05:52 - Anthony Campolo
Does Dave ever come to conferences?
00:05:54 - Chris Coyier
Oh yeah, all the time.
00:05:55 - Scott Steinlage
And your podcast?
00:05:56 - Chris Coyier
Yeah, we try to go to them together when we can. I think he had his eye on this one, but it didn't pan out, you know.
00:06:03 - Anthony Campolo
And that podcast is Shop Talk.
00:06:04 - Scott Steinlage
There you go.
00:06:05 - Chris Coyier
That's right. Another name that I... websites. It's fun. I mean, I love, you know, the logo's cool and everything, but it's one of those names where, long term, you look back and I'm like, that's the term that literally every industry uses when they sit around and talk shop. You know what I mean? Nurses sit around and talk shop about... you know what I mean? So the name is unremarkable for that. I don't know about nurses. That was a weird example. Yeah, that was great, though.
00:06:29 - Scott Steinlage
I appreciated it. It was good.
00:06:32 - Chris Coyier
We do still occasionally get questions from Car Talk, you know, the famous NPR show that is over now. But yeah, three or four over the years of somebody that had a really specific question for the Car Talk guys that came to us because they just, in their mind, landed on our website or whatever. We have a question-and-answer form. But it was like, you know, how do I change my oil in my '89 Toyota Corolla or whatever? I was like, yes, we got another one. That's so funny. All right, so what's going on? I mean, we're live and in person...
00:07:04 - Anthony Campolo
And we're here at Render. I'd be curious. Your talk is Modern CSS in Real Life.
00:07:10 - Chris Coyier
In real life.
00:07:11 - Anthony Campolo
So we got to talk about what is modern CSS and what is real life.
00:07:14 - Chris Coyier
Well, I just thought my angle on it was that it's potentially easy to talk about technologies in isolation, a little bit like, here's the syntax, this is how it works. And especially with some of this new CSS stuff, when you're first introduced to it, the temptation is, let's look at the syntax together and talk about what it does. That's fine. I wouldn't write a blog post like that, perhaps, but I thought for a conference, and I was asked to keynote it too, which has a tiny bit of responsibility, or...
00:07:47 - Anthony Campolo
something to make it a good talk.
00:07:49 - Chris Coyier
Yeah, do a good job and make it kind of more globally applicable. So I think there'll probably be some people in the room who maybe don't super care about CSS because this conference is pretty broad and, you know, there's a lot of leadership stuff, for example.
00:08:02 - Scott Steinlage
Yeah.
00:08:02 - Chris Coyier
So I thought what I would do is I won't talk about anything unless I can connect it to a real-world situation, like an actual public website that we can look at, or I can paint a picture that's like, see this situation, which you can imagine.
00:08:18 - Anthony Campolo
So what are some of the websites or situations that you're gonna hit on?
00:08:21 - Chris Coyier
It actually opens up with a media website. It's an article on CNN.com about Black women and non-binary surfers. It's just a cool post.
00:08:32 - Anthony Campolo
It also fits well with the diversity theme.
00:08:34 - Chris Coyier
Yeah, well, yeah, accidentally perhaps, but I'm glad I can check it out. It's one of those articles that... You know what I mean when I say an art-directed article? It's like a fancy article.
00:08:45 - Anthony Campolo
That one where, like, you scroll down and a bunch of stuff flies on screen, possibly.
00:08:50 - Chris Coyier
Right. But it's, yeah, like, it was intentionally put that way. You know what I mean? It just isn't the normal template that that media outlet uses to publish an article. It's probably less covered in ads. In this particular example, the first thing you see is one giant photograph, and that covers the exact height of the browser window. And then the title of the article is kind of tucked away on the bottom left of it. And it's meant to be like, look, you're entering an art gallery. That's kind of how it's evoked. And so then I start looking at the CSS that they use to build it, and it's not to poke fun, like, look, they did a bad job. Actually, I think they did kind of a good job. But I'm like, here's some new CSS stuff that we could tweak in this real-world article that has some, I think, real-world benefits. So we change some of the CSS on that real-world website to yield some of the benefits. So that's kind of the point.
00:09:49 - Anthony Campolo
And then my next question would be, so when I was learning CSS, quote unquote, new modern CSS was like Grid. So I'm assuming we're far beyond that at this point. You're talking about other newer things, kind of.
00:10:00 - Chris Coyier
But grid makes an appearance in there. Grid isn't that old, really. In fact, there's a chart that I bring up really briefly. There's a kind of project called the Web Almanac that is published each year where they do research into actual usage.
00:10:15 - Anthony Campolo
Yeah. Okay.
00:10:15 - Chris Coyier
Yeah, that's good, because you'd think that would be one of the harder things to measure, right? Like, how do you know?
00:10:20 - Anthony Campolo
Yeah, exactly.
00:10:21 - Chris Coyier
Yeah, yeah. You know when a website's WordPress because they jam in a meta tag that's like WordPress, so it's easy to check. But Jamstack might be hard, but maybe it was more than that. I'm just rambling now, but they can measure stuff like how popular a certain feature is because they can just look at the CSS and parse it and check. And it looks like something like 12% in the last year that was measured of websites were using grid in some way. Is that a big number? I'd say no. For such a core layout mechanism in CSS, I would think that's a pretty low number, actually, despite it being new. But then right next to it is a chart for Flexbox, which is just popping up like 89%.
00:11:05 - Anthony Campolo
Well, this is funny, actually, because when I was in my boot camp, they wouldn't teach us grid. They taught us Flexbox as the newest thing. And they're like, we're not gonna teach you grid. That's too new. And at the time, it had already been around for a couple years. I was kind of salty about that at the time. Like, I wanna learn grid, though.
00:11:20 - Chris Coyier
Yeah. Well, the real answer is probably, like, we just haven't updated our curriculum. Yeah, right, exactly. We can't do that.
00:11:26 - Anthony Campolo
Yeah. Like, we just spent the last month getting the new React Router in, so sorry.
00:11:31 - Chris Coyier
Holy cow. Yeah, some of that stuff blows my mind because you're like, I have a bad perspective because I think about CSS a lot and don't find it particularly challenging, I guess. But it's probably through long exposure to it. But I'm like, you can just look up the syntax real quick and then now you know it. Yeah, you know, or like, go on...
00:11:51 - Anthony Campolo
CodePen for one second if you already know. Like, when you're starting totally from scratch, you don't even know what code is.
00:12:00 - Chris Coyier
Yeah, sure.
00:12:01 - Scott Steinlage
I don't know. I got into CSS pretty quick, and I really appreciated some of the advanced features just because I love little things like that. For example, when I first created my profile, I had little social links on the side.
00:12:15 - Chris Coyier
Sure. Yep.
00:12:16 - Scott Steinlage
And then each one, when you would hover over it, it would spin out at you. It was super cool.
00:12:22 - Chris Coyier
I'm sure. Keyframes, baby.
00:12:24 - Scott Steinlage
Yeah, yeah.
00:12:25 - Chris Coyier
Rotation. But a lot of layout, I think, in CSS isn't particularly complicated. I think a huge amount of layout is, I want to put something on the left and, wait for it, the right. Yeah.
00:12:40 - Anthony Campolo
So at the same time.
00:12:41 - Scott Steinlage
Yeah, no, for real. And, you know, if you're using percentages, like, you know, I don't know.
00:12:47 - Chris Coyier
There's a lot of ways to do that. For a long, long time, you would float one thing to the left, float one thing to the right. But then you had to think about, like, oh, but what about when there's a little margin, or I want to control the gap? And it was a little quirky and hacky and weird, and you're thinking about...
00:13:01 - Anthony Campolo
steering the flow. As you added in things like Flexbox and Grid and all, now there's three ways to do everything. So that's what really tripped me up.
00:13:09 - Chris Coyier
Sure. And I think that's fair. And then Flexbox came along and said, oh, you want to do that? You want to do the left-and-the-right thing. You want two columns.
00:13:16 - Anthony Campolo
[unclear].
00:13:17 - Chris Coyier
And the children, perhaps, which is, I guess, a testament to Flexbox not being as good, like the fact that that guideline was so big for us.
00:13:28 - Anthony Campolo
Yeah, you couldn't remember it.
00:13:30 - Chris Coyier
People couldn't remember it. But the way, you know, just to cover it, the way that you probably did it was on the parent you say display: flex; on the children you say flex: 1. One on each would mean take up as much room as you can. Now these days you can say gap. For a long time you couldn't do that in Flexbox. But if I want a little gap between the left and the right, you can just say gap: 1rem or something and get that gap in between it. That's pretty good. But I would argue that the syntax for grid is better. It's just display: grid, grid-template-columns. I'm going to define the columns right on the parent, how many there should be and what the gaps are, and then let the elements just fall into those columns. I think that mental model is better. I think it's more generally useful. I think it's easier to understand. And it's just, to me, a little sad that the usage is so low, though. I think when you write a program that crawls the web for a zillion websites and figures out what features they're going to use, they are skewed heavily by the way older and WYSIWYG kinds of tools do things.
00:14:35 - Anthony Campolo
Ah, so yeah, not necessarily how people coded them, but because so many websites are WordPress or Wix or a thing where no one even touched it in the first place.
00:14:44 - Chris Coyier
I think there's a zillion Shopify, Squarespace, Wix, WordPress templates, and somebody just used Flexbox on them. Well, I think that's like, no developer worked on it.
00:14:53 - Anthony Campolo
I think the majority of React sites are actually Wix sites because of that same reason, perhaps.
00:14:58 - Chris Coyier
Yeah. And which is fine. It just means that, like, what are those charts then? If I'm like 80% of it, in a way, it just invalidates all that data. It's like, not that interesting.
00:15:09 - Anthony Campolo
I'd also be more curious to know, like, what's the percentage of the top 100 sites, thousand sites, 10,000, instead of the entire sum of the Internet. Like, that's...
00:15:17 - Chris Coyier
Well, that's what it is. I think it is top sites. But it would almost be more interesting to troll GitHub than it would be to do deployed sites, because GitHub is like handcrafted code, theoretically. Yeah.
00:15:31 - Anthony Campolo
Actual code that people wrote.
00:15:32 - Chris Coyier
Right. That's, I don't know, just more interesting. But the reason grid is in the talk isn't because it's new necessarily, but there's a feature of grid called subgrid that's in two browsers. Chrome is last, which is a little unusual.
00:15:45 - Anthony Campolo
But that was the Firefox thing. I think I remember they had some super sweet subgrid dev tools.
00:15:50 - Chris Coyier
They may have been first.
00:15:51 - Anthony Campolo
I remember hearing about that a while ago.
00:15:54 - Chris Coyier
Yeah.
00:15:54 - Anthony Campolo
Mostly I hear about this stuff through listening to Shop Talk. The first time I learned about container queries was because you would talk about it all the time. Is that going to be in the talk?
00:16:03 - Chris Coyier
It is a little bit. It's pretty brief, but, you know, the point is to connect it to real-world websites. So I'm showing a couple websites that use grid, and I was like, look, if subgrid was available across browsers, I bet these websites would do it because it's kind of nice. It's a tiny thing. It's not some groundbreaking feature. But the idea is you have an element, it's placed on an existing grid. Fine, you can do that now, and then there's no reason that that element that you placed there can't also be display: grid.
00:16:34 - Anthony Campolo
all the way down.
00:16:34 - Chris Coyier
Yeah, that could be display: flex, it could be... I mean, I don't know if they wrote it actually. Probably not. But let's say I do want it to be a grid. Do I need to redeclare the grid lines on it? Yeah, you do. If it's display: grid, you need to put some new grid lines in there for that to be relevant. And what subgrid says is, or you can just have it inherit the ones from its parent. Just, I want all the grid lines that, you know, let's say it took three columns and four rows or something, give me those as my grid lines. That's all it is. That's the only feature it does. It just saves you a little time and allows you to line stuff up inside that element that lines up with the grid around it. And I think that's tremendously useful.
00:17:15 - Scott Steinlage
If only the world worked that way.
00:17:18 - Chris Coyier
Yeah.
00:17:18 - Scott Steinlage
No. Everybody fall into place now.
00:17:22 - Anthony Campolo
Yeah.
00:17:22 - Chris Coyier
Jesus. Blew my mind a little bit.
00:17:25 - Scott Steinlage
We are on the 69th floor. I mean, geez.
00:17:30 - Anthony Campolo
So we got grid. We got subgrid. So there's a little bit of container queries. What other modern CSS? And also, let's talk about the term modern CSS. This is a term that I hear most often from Stephanie Echols. She's someone who...
00:17:42 - Chris Coyier
She does use the word modern.
00:17:43 - Anthony Campolo
Yeah. She has, like, a whole course based around it. I had her on my podcast a long time ago, talking about this. So tricky word, because three years...
00:17:51 - Chris Coyier
Whatever was modern then is not modern anymore.
00:17:53 - Anthony Campolo
Right. Yeah. So what does it mean? What does modern mean to Chris Coyier?
00:17:58 - Chris Coyier
Well, yeah, that's a good question. I don't know. I mean, certainly container queries are in that bucket. That's such a big transformative deal for CSS. I was talking with somebody at lunch about them. It was good. She's doing the talk on the many ways of styling in React, and I found that, you know... Do y'all work in React? Yeah. You do, mostly.
00:18:15 - Anthony Campolo
Yeah.
00:18:15 - Chris Coyier
Okay, well, then you're probably aware of styled-components. It's usually the biggest thing.
00:18:19 - Anthony Campolo
I hate it.
00:18:20 - Chris Coyier
Okay. Spicy. Good. That's not the only way, right? You could use CSS Modules. You could use...
00:18:25 - Anthony Campolo
Yeah.
00:18:27 - Chris Coyier
Styled-components themselves gave birth to all kinds of...
00:18:30 - Anthony Campolo
For me, I just didn't like having to bring in a whole extra dependency to do styling. That seemed kind of silly to me, especially because it was kind of old when I was learning React. So there'd be weird dependency issues. And then other newer meta-frameworks, like Next, they have, as you said, CSS Modules built in, so you can use those, right?
00:18:52 - Chris Coyier
Which are kind of even older. Older. But they were such a good idea. I'm glad they hung on.
00:18:56 - Anthony Campolo
Yeah. So I had other ways to do it, to where it just felt kind of silly to have to bring in a whole dependency to do styling.
00:19:02 - Chris Coyier
Right. The thing that I'll say irks me a little bit about those styles is that, yeah...
00:19:07 - Scott Steinlage
Getting hot here.
00:19:08 - Chris Coyier
Yeah. Is that a lot of them expect you to use an object-like syntax to describe CSS. You know what I mean? So instead of margin-dash...
00:19:18 - Anthony Campolo
Right.
00:19:18 - Chris Coyier
All lowercase, you'd go margin, no dash, capital R, right? That's how JavaScript expects it to, and that is how it is represented in the DOM. Ultimately, you know, you get computed style...
00:19:29 - Anthony Campolo
But then there's also a layer in your brain where you're always like, okay, I have to write my CSS and I have to turn it into this other thing.
00:19:35 - Chris Coyier
And you know what? I'm not gonna harp if people like that style. I think that's okay. But here's where this is, the connection to modern CSS, I think, is like now there's container queries, now there's style queries, now there's @layer. You've seen that one in CSS. There's all these new things. You're like, how does that map onto frickin' styled-components? Where do I put an @ in the nesting of...
00:20:00 - Anthony Campolo
That's true. As CSS continues to evolve, who knows
00:20:04 - Chris Coyier
this abstraction on how you write CSS, which means that you, without knowing it, you meaning the author of these libraries, have signed up to support the syntax of CSS for the rest of your life. Now you're not going to do that, which disappoints me.
00:20:18 - Anthony Campolo
Well, the creator of styled-components doesn't even do styled-components. I was like, Max, who now has like a GraphQL company, like he's not working...
00:20:26 - Chris Coyier
Yeah, okay, well cool. Max is a smart guy.
00:20:28 - Anthony Campolo
Yeah, no, he is. But he has nothing to do with styled-components anymore. So who even knows who's updating that library?
00:20:34 - Chris Coyier
I'm like, if it doesn't work in styled-components, that's what modern CSS is.
00:20:40 - Anthony Campolo
That's a funny kind of bar once it breaks your dependency.
00:20:43 - Chris Coyier
The problem is I think it might actually, because they had the good sense, perhaps it was Max himself, I don't know who, some of these libraries support both syntaxes. Have you seen the backtick syntax where instead of writing it in that JavaScript object syntax, you can actually just write a chunk of actual CSS?
00:21:01 - Anthony Campolo
That's how we do it in Redwood, yeah.
00:21:03 - Chris Coyier
Is it? Okay, yeah. And what's nice about that, I guess, if there's any saving grace to this horrible idea overall, is that you probably could write modern CSS in there because theoretically it's parsed.
00:21:16 - Anthony Campolo
Yes. That's how I do Tailwind now, basically. Those super long, ridiculous Tailwind things you write, I'll just take that, throw it into a variable, and then throw that variable into my HTML.
00:21:26 - Chris Coyier
You've made your own apply syntax.
00:21:29 - Anthony Campolo
Exactly.
00:21:29 - Chris Coyier
You apply it yourself to a variable.
00:21:32 - Anthony Campolo
Well, I like that because then your HTML is super clean that way.
00:21:35 - Chris Coyier
Yeah, that freaking matters to me.
00:21:38 - Anthony Campolo
Absolutely.
00:21:38 - Chris Coyier
I'll say.
00:21:39 - Anthony Campolo
I think it matters to a lot of people. That's usually the biggest complaint I hear about Tailwind. So what's your... I don't think I've had a Tailwind...
00:21:46 - Chris Coyier
I haven't had a single conversation at this stupid conference that's not about Tailwind.
00:21:51 - Anthony Campolo
It's impossible to avoid.
00:21:53 - Chris Coyier
And I'm like, yeah, truly, truly. It's just unbelievable. And I... What do you think? One thing I said to somebody earlier that I think I liked, my take on it was that if you're just like, it's the best or it's the worst, I think you're both wrong. You can't have a hot take about Tailwind without being wrong. I think it's too nuanced for that. And I also think I'm not a yucky-or-yum kind of guy. So whichever one is effective for you and your employees and yourself or whatever, and you like it and are productive in it, Godspeed.
00:22:26 - Anthony Campolo
Well, I've heard you make that same case for why you use React in CodePen. Like, people will be like, oh, why aren't you using Svelte or something? You're like, well, I'm using React and it works. I'm not going to rewrite my entire application for XYZ reason every three months, minimum.
00:22:41 - Chris Coyier
That just is so idiotic to me. Even though as we're in the middle of like the world's largest rewrite anyway. So, anyway.
00:22:47 - Anthony Campolo
Oh, let's talk about that.
00:22:48 - Chris Coyier
Oh, well, we could a little bit. But... God, what was I gonna say about compiling Tailwind thoughts?
00:23:01 - Anthony Campolo
You know,
00:23:04 - Chris Coyier
It kind of goes without saying that some of the modern CSS stuff you also can't do yet. And, you know, as it evolves, they have also signed up to support everything that CSS supports till the end of time.
00:23:13 - Anthony Campolo
At least they have a team and a company.
00:23:15 - Chris Coyier
Truly, very good sign that way. And that, you know, there's a lot of people that make WordPress sites, right? Lots of them.
00:23:23 - Anthony Campolo
CSS-Tricks or whatever.
00:23:25 - Chris Coyier
God dang right. It was, you know, and I think of that when you... There's just a lot of developers out there that got used to hot module reloading. I don't know who invented it, when it was invented, what it shipped with first. You know, was it part of the webpack dev server or something? But these days you can write JSX and stuff, hit save, and your expectation in development is that I don't have to go over to the browser and hit Command-R. The development server will either refresh itself, or better, it will just somehow magically be changed in what I'm looking at. That is a DX expectation of working on the web these days.
00:24:00 - Anthony Campolo
It made people mad that Remix didn't do that for the longest time.
00:24:04 - Chris Coyier
Oh, that would make it untenable for me too. Honestly, it's a DX expectation for me too. I'm not saying, you plebs, I can't believe you have this expectation. I'm like, yeah, that's just a better way to work. It's the faster feedback cycle from my fingers to my brain.
00:24:17 - Anthony Campolo
It makes such a difference, right? Because it's because if you do it 100 times in a day, that could be like a half hour time that you just lost.
00:24:26 - Chris Coyier
Honestly, I run CodePen too. We make it our business to make that fingers-to-brain cycle as fast as we can. Okay, but I mentioned WordPress, right? You don't build, not that nobody does, but the general happy-path WordPress way is PHP templates, right? There's no PHP hot module reloading. So what is the Tailwind WordPress story now? When I change the classes in HTML, it's just gotta refresh the whole page. There's no hot module reloading there. So I think it's interesting that when people love Tailwind, Tailwind's perfect, I think a prerequisite for liking Tailwind is that you're in a hot-module-reloading situation. Those have to be together. Otherwise every time the browser is gonna go blue, blue, blue every time you change a little class and stuff. So I don't care about how ugly the HTML is. I mean, I kind of do for authoring, like I don't want to look at it all the time, but that is kind of a... I know most people that use Tailwind could care less, so I'm not going to...
00:25:21 - Anthony Campolo
Once you get used to it, then you're used to it and it's just what you expect.
00:25:25 - Chris Coyier
Sure, sure. Still feels a little weird to me, but I'm sure I could get over it. JSX felt weird to me to begin with.
00:25:30 - Anthony Campolo
That's what's fun about web development though is that what feels normal to you is just whatever you learned at the time because it's always been changing.
00:25:37 - Scott Steinlage
That's true.
00:25:38 - Chris Coyier
That's true. He did the Greek philosopher thing, "The only constant is change." And I appreciate little nice quotes like that because you're like, dang right, man.
00:25:50 - Anthony Campolo
One of the things I love about the web though, is the constant iteration that there's always kind of a new way to do something and ideally a slightly better way to do something. Like you're talking about how, you know, grid you think is better. It's like, well, hopefully. Or else they wouldn't have built a new thing if it wasn't better, right?
00:26:03 - Chris Coyier
Truly, yeah. Although I can think of something spicy.
00:26:09 - Anthony Campolo
CSS has gone backwards.
00:26:12 - Chris Coyier
Well, I was talking to some people about @scope recently. That's a new one that is about to drop that I just feel has real limited utility in CSS. I don't know if we have time to get all into the nuances of what @scope is, but it's kind of a... You know, CSS Modules, in a way, obfuscated selectors so that they got processed into some gibberish selector, so that when I write styles over here, there's no way they conflict with something over here. I'm not saying class name card, because then six months later somebody else writes a .card. Now they're clashing. And that's a problem in CSS. That's an actual problem on teams in CSS. And that's one of the things that CSS Modules stepped in and fixed, which I really appreciate. So that's the idea of scoping. I've now scoped this chunk of CSS. The scoped styles will not bleed out from it. And you'd think that that's what @scope in CSS would do, but it totally doesn't. So it's like this weird...
00:27:09 - Anthony Campolo
So it doesn't actually scope it.
00:27:11 - Chris Coyier
Not the original selector. It will scope everything under it to itself. But I'm like, that's what a class already does. Like, a class is scope in CSS. So it's weird. So it has a couple of bonus things, and one of them is that you can stop how far the scope is going down. I can say style everything from this selector down to this selector and then stop, so nothing else under that second selector is now selected in that scope. They call it donut scope. And I'm like, that's really neat. I'm glad that somebody thought of that really neat, esoteric idea in CSS that I've never needed ever. I should say ever, but I just... Now I'm yucking somebody's yum.
00:27:51 - Anthony Campolo
Well, some of the CSS stuff, it's like, you read the specs and this stuff gets really, really specific in terms of...
00:27:57 - Chris Coyier
I'm glad that it does, because if it didn't, we would see. I don't know, we'd be in the dark ages again and people would be talking about how quirky and horrible and inconsistent CSS is.
00:28:06 - Anthony Campolo
People actually like CSS now.
00:28:08 - Chris Coyier
They have, and that's going to be in the talk because that's changed. It went from this really quirky, inconsistent language to a very strong, useful, powerful, consistent language.
00:28:18 - Anthony Campolo
And CSS used to be a punchline, bruh.
00:28:21 - Scott Steinlage
So do you know Catlin? I'm pronouncing his name wrong, I know it. Anyway.
00:28:28 - Chris Coyier
Sass. Oh, oh, yeah. Like that guy? Yeah, like the Haml guy. Yeah, way back. Yes, I do know him.
00:28:36 - Scott Steinlage
He's been on our. He was back right when we were on the Clubhouse.
00:28:40 - Chris Coyier
He, like, invented it and has peaced out long ago, I think. Yeah, yeah. And now just does, like...
00:28:46 - Scott Steinlage
I don't know, he's running charts or something.
00:28:48 - Chris Coyier
I don't know what he does.
00:28:50 - Scott Steinlage
He's the CTO over at. Yeah, that's it.
00:28:53 - Chris Coyier
Yeah.
00:28:54 - Anthony Campolo
Anyway, we should talk about CodePen with the time we got left. I'd be curious what's going on at CodePen. You talk about the rewrite or talk about new features, yeah, whatever is interesting, whatever you feel like you want our listeners to know about.
00:29:05 - Chris Coyier
I gotta be a little careful about it, just because we're not... I'm not announcing a thing, but we're, you know, working towards a beta of a new version of it. I think that's not terribly surprising.
00:29:14 - Anthony Campolo
Is it a rewrite where we won't necessarily notice, or is it rewriting so you can enable new functionality?
00:29:20 - Chris Coyier
Like, that is the ultimate question, isn't it?
00:29:23 - Anthony Campolo
Right. Yeah.
00:29:24 - Scott Steinlage
Yeah, he tried.
00:29:25 - Chris Coyier
It would be my goal to not disrupt the apple cart, you know, like, that would be...
00:29:31 - Anthony Campolo
You don't want to lose features, obviously.
00:29:33 - Chris Coyier
Well, we definitely won't lose features. There's no real chance of that. Although I say that, and I think there might actually be a couple of really esoteric languages that, by the data, we know nobody will care about, that we might nuke. But don't worry about that. Like, if you use it...
00:29:53 - Anthony Campolo
I'll be curious, just as we're such nerds here, like, what was the impetus to want to rewrite? Like, what kind of issues were you hitting? Like, what was the friction that made you say, like, all right, we gotta rewrite this?
00:30:04 - Chris Coyier
It's not a problem, it's a limitation. I guess that's a problem, now that you mention it. But it's more just like, when I see new technology, "the only constant is change," right? If I see some new tech, like I joked, somebody's going to drop a new piece of code-processing technology at this conference. It's guaranteed. There's days-since-new-JavaScript-framework: zero. There will be something. But a lot of times those are not like that anymore. It used to be, you know, in the days of Sass, it used to be very clear: input, output. The API was, send us some code, it will be processed, and I will give you the primitive code out of it, like CSS. CoffeeScript was like that and Haml was like that. And there's so many processors, and CodePen was born in the era of that being true. These days it's much less true. Code processing is done at the file-system level. It's a CLI. It's like, run this processor against this whole stack of files and also turn...
00:31:11 - Anthony Campolo
into stuff that's unreadable, which is not always super nice sometimes.
00:31:14 - Chris Coyier
Yeah. And so that's the thing. I want to support anything. Ideally it would be good if absolutely any front-end technology, you were able to play with it on CodePen. And right now I think people think of the limit... I don't know if they do. I don't have good evidence for it. But I think of the limitations of what you can do on CodePen a lot, and I wish there was...
00:31:36 - Anthony Campolo
Does this involve having your own custom, like, ASTs and compilers or like, how do you even enable that to allow any transformation of anything?
00:31:45 - Chris Coyier
Boy, I'd love to tell you about all of our AST journeys, but that feels a little too deep into.
00:31:51 - Anthony Campolo
We don't need to go that deep then.
00:31:54 - Chris Coyier
But yeah, I mean, if you're making a play on how code is processed, you have some work ahead of you, and that's what we're in the middle of now. I do want a version of CodePen that matches front-end developer expectations and is ready for the future, is ready for things that we don't even know will be invented yet. There are a couple things that you can count on, like the fact that developers work on file systems. There is a group of files that turn into websites. Dude, that hasn't gone anywhere since long before I started programming and doesn't look to be going anywhere anytime soon.
00:32:27 - Anthony Campolo
As long as they're still on computers. Right? Right.
00:32:29 - Chris Coyier
Yeah.
00:32:30 - Scott Steinlage
[unclear].
00:32:31 - Chris Coyier
That's it. Yeah. But we're very happy. And CodePen is a happily functional existing product that you can use today, and many people do and go Pro, and it has features that people like and stuff. So yeah, I'm not going to disrupt...
00:32:44 - Anthony Campolo
Anything. I just want more on CodePen. It's one of the things I always thought was so cool that you do.
00:32:49 - Chris Coyier
There's dang code artists on there, people really just showing off what they can do. People get jobs that way, and probably more common is just prototyping, right? Yeah, yeah. And finding inspiration because so many other people do it. But there's enough little internal network effects on the site that make it an ideal place to go look around. You know, we were born at the same time Dribbble was, that site where designers would share what they're working on. And so many designers did that that if you're like, I need some example footer designs, it made it a wonderful place to go look because there was high-quality stuff there. That's true of CodePen too, is that you can find examples of stuff that people have worked on, interactive tabs or whatever they might be.
00:33:36 - Anthony Campolo
Yeah, whatever you can think of.
00:33:38 - Scott Steinlage
Yeah.
00:33:38 - Anthony Campolo
Awesome, man. Well, anything else you want to leave our listeners with before we close out here?
00:33:42 - Chris Coyier
No, I don't think so. Those were very good questions, and thanks for having me, letting me talk, you know. Yeah, it's a privilege really to be like, I'm gonna say some words.
00:33:51 - Scott Steinlage
Thanks, man.
00:33:52 - Chris Coyier
I'm gonna use your audience to say them.
00:33:54 - Anthony Campolo
Yeah, we do weekly Twitter Spaces also if you ever want to show up, and we'd love to shoot the shit on that.
00:33:59 - Scott Steinlage
It's super open-mic, like, just so much fun.
00:34:02 - Chris Coyier
Right? Yeah.
00:34:03 - Anthony Campolo
You should let people know what your handles and your website are, or whatever people should plug into the address bar to find you.
00:34:10 - Scott Steinlage
Where can they bug you?
00:34:11 - Chris Coyier
Yeah, anywhere really. But, you know, I don't get enough email, really. I use my name for everything, including my email. So my website is my name, chriscoyer.net, C-O-Y-I-E-R, little, I don't know, twist on that. But I'm pretty easy to Google, and then that links to everything else. But I'm Chris Coyier on GitHub and CodePen and Twitter and Dribbble and who knows, everything, you know. And then my email as well is just my name.
00:34:36 - Anthony Campolo
Don't do that.
00:34:37 - Chris Coyier
I do. I do it.
00:34:39 - Anthony Campolo
More emails.
00:34:40 - Chris Coyier
I'm a mess.
00:34:41 - Anthony Campolo
I want to be able to delete more.
00:34:42 - Scott Steinlage
Yeah, send me email.
00:34:45 - Anthony Campolo
I have too many emails. I got like five emails now. It's kind of a problem.
00:34:49 - Chris Coyier
I'm a little... Oh yeah, that. Too many addresses. Yeah, I do like to consolidate down.
00:34:53 - Scott Steinlage
Oh, golly. Yeah, same here.
00:34:54 - Chris Coyier
I've just... I do. This is a little known fact about me, but I'm a little obsessed with email. I have a blog even called email-is-good.com. I do. I really do. There's dashes in between. Email is good. Yeah, do it. Just do it.
00:35:07 - Scott Steinlage
And then you should go to javascriptjam.com and get on our newsletter. So you get an email from us, right?
00:35:12 - Chris Coyier
Well, I'm such an email...
00:35:15 - Anthony Campolo
If you're at inbox zero, you do not get any newsletters, I'm assuming.
00:35:18 - Chris Coyier
No, but I like newsletters and I just have my own little exotic system. There's a website called Feedbin that gives you an email address that you can subscribe to newsletters with. And then they come in and you just read it along with your RSS. Of course, everybody in this audience uses RSS to read all their news, right? Good. Well, I do. And that's where my email is, all that stuff.
00:35:43 - Anthony Campolo
This is probably why I have multiple email addresses, because I've tried to jigger my own workflows with all that kind of stuff.
00:35:50 - Scott Steinlage
MacGyver email. MacGyver.
00:35:52 - Chris Coyier
That's what.
00:35:52 - Scott Steinlage
That's your next domain, bro.
00:35:53 - Chris Coyier
Yeah. Not bad.
00:35:54 - Scott Steinlage
Yeah.
00:35:54 - Chris Coyier
Yeah. Do people even remember MacGyver now? Now we are all old. You've outed yourself.
00:36:00 - Anthony Campolo
All right, well, let's call it there then. Thank you so much, man.
00:36:02 - Scott Steinlage
Thank you so much.
00:36:03 - Anthony Campolo
Appreciate it.
00:36:03 - Chris Coyier
My pleasure. Thanks, guys.
00:36:05 - Scott Steinlage
Awesome. See you guys next time.
00:36:07 - Chris Coyier
Peace.