Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Chris Coyier and the things he's bad at
1.4k Plays1 year ago
The amazing Chris Coyier (founder of CSS-Tricks.com and CodePen.io) sat down with us to tell us all the things in CSS that he's bad at. He even brought us a list.
Recommended
Transcript
Introduction to Chris Coyer
00:00:01
Speaker
Welcome Chris Coyer to the show. We have an amazing guest, and he needs no intro. I could give him a small one, but he's written a ton of articles, owned CSS tricks, has CodePen, is an incredibly powerful CSS person, and they're all on the show to talk about what they suck at today. Hey, Chris, how's it going? What you about at? Powerful. I like the word. Nobody's ever called me powerful before, but I'll take that. I'll take that for forever. Yeah, you know, I knew I was going to be on you boys' show.
00:00:30
Speaker
Uh, and I was writing down things. I'm bad at CSS, but I ran out of paper. You know, we should have been using the web, man. Why did you use paper? It was metaphorical.
00:00:44
Speaker
Yeah, I was trying to think of specific things and generic things, because I don't know. I don't know. This show doesn't even exist yet, as I'm on it. So I don't have any stuff to reference,
Challenges in CSS 3D Elements
00:00:53
Speaker
really. But one that I thought of right away that's just really straightforward is really anything 3D. You know what I'm talking about, guys? When people are like, I'll just make a cube. I feel like that's the demo you've seen 1,000 times. As the proprietor of CodePen, I've seen 1,000 cubes.
00:01:12
Speaker
And I feel like the classic way is just, you know, make six divs and then a, you know, and then each one of those divs gets a little bit different. Translate 3D stuff on it and you like move it around in 3D space. But I'm like, how hard could it be? How do, but what, you know, I really, and then how do you make the edges fit good or whatever?
00:01:35
Speaker
It's not like I've tried 10 times and failed, but I look at usually anything 3D and CSS and be like, this language is, that's just weird. I don't understand it. I don't get how it works. And it was exacerbated this week as I saw a, um, like a 3D by Ben Evans, who, who tends to be, I don't hear from him. And then all of a sudden drops some painting or something and CSS and you're like, wow, bro.
00:02:05
Speaker
Um, really cool. It was like a, you know, like a, like a doom like thing where you can press the arrow keys and traverse the 3d maze, but like really adheres to that. There isn't a single line of JavaScript. It's not one of those like, well, yeah, except the arrow keys that those are JavaScript or something. Even, even those, I believe are.
00:02:23
Speaker
using one of the trickery things, probably radio inputs and checked or whatever it is. I didn't even look at it, but it's got to be something like that or the target selector. There's a couple of fake ways to do interactivity in CSS.
00:02:39
Speaker
but i was like oh my god that's you know so how do you even begin to plan something like that you know what is the perspective value like what what what's the perspective value you use and why yeah that was a classic one that that that crossed my mind too is the
00:02:55
Speaker
Because I'm stealing it from somebody who wrote in to our other shop talk show that said perspective was one of theirs. They're like, I don't know, 100 pixels? Is that a good one? More or less? Yeah. What does that even mean, really? Is it like your eyeballs are 100 pixels from the screen? Is that what we're talking about? It's so foundational.
00:03:19
Speaker
It's like if you don't set it right at the beginning, like your whole world view needs to be based off of this one value. So you better pick the right one. And I'm sitting there going, I don't know why any of these would be better than the other one.
00:03:32
Speaker
Right. Like what does one pixel mean? It's just a guess and test thing, which is okay. I think a lot of CSS ends up being that way. I mean, you'd think of like all of dev tools and your tool visibility. The point of it is kind of like you should just play and find the value that you like and then there you go. You got it. Listen to your heart. It's telling you what to do. Would you write your styles? Yeah.
00:03:59
Speaker
I think there's this, it almost should be emphasized more. You read an article about typography or something and it's like, well, you know, you pick these fonts that go together because, you know, science says they should or something or the, you know, what's the best line height for this paragraph at this moment? And you're like, I don't even care. I don't even want to learn the science. I want to adjust.
00:04:20
Speaker
Yeah. Sometimes they're like, I chose a mathematical typography system. I'm like, yep, and it looks crappy. I used math to make my color palettes. I'm like, yep, they look crappy. It's just like why we have optical kerning. I used math to make all my letters equally spaced. Yeah, it looks crappy. It turns out humans aren't very mathematical. We're weirdos and chaos. You should be worried about it.
00:04:45
Speaker
You should be worried about your level of taste. Yes. We need a taste tasteometer and CSS. I'm going to start looking my CSS and, and rubbing my body on it. Cause I want to feel it and I want to taste it. This is kind of how it is recording with Adam and you get one nice gem every episode where you're like, are we going to keep it? It's fine. It's okay.
00:05:14
Speaker
That's real stuff, though. It sounds like a joke, but really, your taste goes a long way in values and stuff like that. I don't know if
Design Taste and CSS Decisions
00:05:22
Speaker
that's related to 3D, somehow we got there, but 3D certainly is one. It definitely is perspective. Yeah, you got to taste your perspective. Other people are going to be tasting it. Their eyes are going to be slurping the pixels up. You're either a nice slurpy or you're like an old beer. And yeah, you don't want to be the old beer perspective value.
00:05:43
Speaker
The thing that has surprised me the most as I've like, you know, over the years, like really been like, I'm going to learn the CSS thing, like hardcore, is that when I first got in, I was like, you know what, there's probably like some system here. Like you pick these values, you do this thing, you use this technique, and then everything's going to be like mostly fine with like edge cases. And the more and more I learn, the less and less I learned that is true, where I'm like, okay, so why would I use this one?
00:06:09
Speaker
in this case like okay so we would use we would use grid here right because we because it's good like actually no because of the way this screen will change i think flex will work best here i'm like but i thought grid was that not for this one or the same thing with like um okay so i'm gonna want to like really set
00:06:25
Speaker
Like, uh, I want to set this to resize automatically as the screen goes, maybe like some intrinsic sizing instead of break points. Right. And they're like, actually the heights are going to need to be synced. So you're gonna need to follow the break points and set like three or four, maybe even six break points to keep the height synced all the way through. Cause intrinsic size will mess up with the lines on the cards or something. And all those things to me.
00:06:50
Speaker
have somehow made me happier. Right and wrong answers, but the, like the path to getting to them, it was a little, yes. Or maybe that there really isn't any right and wrong answers and that when I make a bad decision, it maybe it's not a bad decision. Maybe it's just, you know, a decision. And that's what's made me happiest is that I can make that and be like, you know what?
00:07:11
Speaker
It does the thing right now and then maybe someone will come through and eviscerate my code in a code review, but I'll be like, you know what? Your code is better, but it still does the same thing as it did before. So there. Yeah, right, right. I had a PR this morning that was rewritten by my co-founder and I looked at his code and I'm like, it's this way. It's nicer to look at. Like I get what you're doing here and there are some things that you could point to, but it really, it doesn't, it does the same thing.
00:07:40
Speaker
Do anything different. It's like state management and JavaScript. Everyone's like, Oh, this is so much better. And you're like, what is doing the same thing? You know, like, yeah, but what happens when you need to add a new action? And you're like, yeah, what's that? And you know, like you, so you're bickering over really tiny things that don't matter that much. How strange of us. I feel like as CSS authors, we're the ones tasting it first.
00:08:09
Speaker
Like what you're saying, the state management library doesn't matter to a user. And it shouldn't, right? So what does matter to them is when they land on the site, what do they see? What can they feel? What can they click on? What can they touch? What can they scroll? And so we're there making all of the machinery mean something to the user in that moment. And I always, I have this rant about cars. I'm like, you could have the best engine in the world inside of a car. And if I sit down on it and the seats all squeaky,
00:08:34
Speaker
And it's got a weird wiggly steering wheel. I'm going to be like, nah, this car sucks. I don't care about your engine. I still need to be comfortable in here. And so we're the ones sitting in these Formula One rigs with all these brand new engines first and going, this car really can go this fast. How do I make the UI feel like it's that fast? How do I complement the functionality of this thing? Anyway, we're the first taste makers. We're there licking it first, y'all. I'm sure.
00:09:02
Speaker
You know? So yeah, we covered 3D, but we actually are first.
Chris Coyer's Influence and Community Impact
00:09:08
Speaker
You're second.
00:09:11
Speaker
No, I was saying, uh, you know, I'm, so I've been super interested to have you on because I've been following CSS tricks, uh, since almost the very beginning whenever I needed to do, I don't, you know, I don't want to date anyone because I recently got dated for probably the first time in my career. Like I'm 35 and I was, I work on Firebase and I was talking to someone who knew joined the team and I was like, hi, I'm David. And he was like, yeah, I know you. I was watching your YouTube videos all the way back in, wait for it, high school.
00:09:41
Speaker
And I literally was like, you said high school, right? And he's like, yeah, yeah, yeah. I watched your videos in high school. And I'm like, cause they're that long ago. And so you could technically be in high school and, and watch the videos and be here today and work with me. Okay. Okay. Okay. Glad to have you on the team.
00:10:02
Speaker
So I don't want to date you Chris, but I used to read all the articles back when I do my homework in college, uh, which is not high school. So I feel like that's a little, that's a little better here. Yeah. I don't mind, you know, I'm okay being old at this point. Yeah. And I feel pretty plugged in still. Like I don't, it's not like I look at what's going on in tech and be like, what they're up to itty bore. I'm like, I don't know. That doesn't happen to me. Yeah. Me too. Hmm. I feel.
00:10:31
Speaker
plugged right in. I used to read all your articles and be like, oh, okay, cool. And then I used to get tons of compliments on my homework in college because people would be like, how does that work that way? Because I'd always take the extra mile to do the UI because they'd be like, I can click things. That's really cool. It's a command line tool. That's a nice thought. I think that's cool that CSS can kind of be this little cheat code sometimes where
00:10:57
Speaker
putting on a little UX and UI paint on something can really, especially when your competitors aren't, and your competitors in your case were your colleagues in college. But it can really, it can make people feel differently. I mean, I guess Adam said that too, that this beautiful car with a crappy seat, it's the same kind of thing.
00:11:19
Speaker
you know, breeds trust and stuff. I mean, designers know this inherently, but, you know, some startup or something that maybe isn't even that cool, but they have just this amazing landing page. I'm like, well, that looks like a good product. I should get out my credit card for that thing.
00:11:36
Speaker
My favorite luxury trick is that the more expensive a design studio is or the more expensive the product is or whatever when you land on the website the design always has more waste than other sites do and I mean white space waste it's almost like they're like
00:11:52
Speaker
You could see even like Dior or like one of these brand logos. They use a thin font that's capitalized and really widely spaced apart. They're like, we're so rich and lavish that we just got infamous and
Design Perception and White Space
00:12:03
Speaker
we're just, our house is so big. We're just sitting over here in the corner with like our gold rings on on a leather couch with our like, and so it's like,
00:12:11
Speaker
I love that this is this waste thing. We associate luxury with this like absorbent amount of white space that just yields nothing. And it's so funny. We're like, oh, it must be expensive. Only their logos in the center. Damn. It's really a mystery.
00:12:26
Speaker
In my very early Firebase days, we had a VP of UX, Alex Wolf, shout out. He was a very awesome, very, he was one of those people who could develop so good that you wouldn't imagine he was doing the design. He was, you know, he had designed because design is so good. People would assume he couldn't develop. And, um, he, once I designed something and did it and he was like, it's very cramped. And then I was like, I couldn't see it. And then he was like, he was like, go look at any.
00:12:51
Speaker
luxury goods store. He's like, there's one bag on a giant white thing. And he was like, and that says, this is so important that you have to look at this. And he's like, there's no other bags. They're not taking up all this other space. You're not picking between bags to look at. There's one bag. And that stuck with me for the rest of my, uh, so far throughout my career is like that physical example.
00:13:13
Speaker
Yeah. Yeah. Kevin Hale was the design lead at Woofoo when I started there, and he was just a great designer. So I feel grateful to how seriously he took that. And I feel like you can see it all the time, like Guillermo at Vercel. You can just tell that dude has good taste in design. I don't know if he considers himself a designer or whatever, but you can just tell it kind of starts at the top over there. Dark mode luxury. Yeah. Yeah.
00:13:41
Speaker
Yeah. Anyway, good stuff. Yeah, I ran CSS tricks for a long time and I put that in my notes because I found it notable thinking back that I don't think I am particularly good at trickery. I just like appreciate it. Like I don't think there's one CSS trick that I can claim that that's like the one that Chris Coyer put out in the world. Yet I'm a lover of them.
00:14:02
Speaker
and and appreciate when other other people do really clever interesting fancy stuff in csf i was just looked at that and i could like dissect it i could explain it i could showcase it or talk about it. But i'm not very good at like like coming up with one.
00:14:18
Speaker
Conjuring a metal. Yeah, I think that's how most of us are because again, it's just like taste stuff. This person made a sweet treat and you were collecting them on that site and just like you were a massive curator and appreciator of sweet CSS treats. They called them tricks, but they could have been treats. I don't know. Maybe it's tricks, the cereal. I don't know.
00:14:39
Speaker
But yeah, that's really nice that you did that. I think that's a way that everyone likes to consume stuff. They love bite-sized nuggets. It's like why Twitter is kind of popular. If you can make a tweet that's like gives people something in that tiny nugget, they're like, I like this. I feel smarter even though I did nothing. I am. Right. It can be a little effective too. Learning in little nuggets is not the worst way to learn.
00:15:07
Speaker
Keeping CSS small is something I'm terrible at. I go to a site and I will see someone be like, and then this is the card or this is the widget. And then I look at the five or six properties and then I'm always just like,
00:15:22
Speaker
One, cool. Two, how? Like I don't understand. Like every time I write CSS, I write it and then I'm like, but I have like 12 things and it's not even that I'm using short hands or stuff like that. It's just like I, or not using short hands and I can't do it. And then like all my CSS files, it's just like, you know, I saw a talk a very long time ago about CSS being like kudzu. It just kind of just grows and grows and grows. And then that, that, that's how I feel like my CSS is just like a kudzu garden.
00:15:49
Speaker
And I, and I'm always just kind of like, you know, I could chop it down, but it's just going to grow back.
00:15:55
Speaker
Yeah, you'd have to, like, does it matter, you know? Are we talking about a couple of K in the end of G-Zipped CSS? Maybe that matters. Maybe it doesn't. That's a tricky one, because there's, you know, there's programmatic stuff. I mean, whatever you feel about Tailwind, they're winning as far as the size of Shipped CSS. That approach really makes little tiny CSS things. So if like, if that's somehow is that a popular list? Yeah.
00:16:24
Speaker
Somehow that's a big problem for your team. That's the way to go. For me, it's just having rules that aren't specific enough. Like, like for example, like a Markdown generation, styling Mark things that are generated by Markdown is like.
00:16:39
Speaker
is basically kind of like, I'm going to set some rules for when things happen, but then it's like real life and then the plan begins and then everything goes to chaos. And then you're like, but I set rules and you weren't supposed to do that. And now you are. That's probably true of any CMS that doesn't, you're not hand authoring the HTML, you know, even like the output of a WordPress bar for whatever, like you're, you,
00:17:03
Speaker
It's actually a good idea. Like you shouldn't be worried in your CMS about adding a class to the third P or something. You're like, eh, that's not the right way to kind of author raw content. So that encourages you to be more clever with your CSS then.
Unique Blog Post Styling
00:17:21
Speaker
Right this interests me greatly because because of your history here because i do i manage the firebase blog and i'm always like you know i wanna make some cool fancy layout that like this article just pops.
00:17:36
Speaker
you know, and then someone writes it and then I want it to just generate. And so it just kind of works. So it's like, Hey, look, you got, you just write that sentence or that paragraph and I know how to just make it pop. And if you maybe put something in the front matter, it'll trigger it. And so you can say like pop true or whatever.
00:17:54
Speaker
I don't really work all the time. Like maybe on the very first one, and then as soon as people start trying to reuse it, it just totally breaks down. They write a sentence that's too long or something goes in a wrong order. They put an image first or something happens and everything dies. Whereas with CSS tricks, the articles were so uniform. Sometimes things were very popped. Sometimes they were not. You had different formats, you had almanacs, you had all the sorts of things. And I'm always just looking at that and just being like,
00:18:29
Speaker
I feel like if we're talking about popping, like doing something unusual in a blog post, there's a couple of ways to do that. I mean, there's nothing stopping you from just putting a style tag in the middle of some HTML. And you would know in your CMS then that that style tag is going to get barfed out exclusively on that page because it's part of the content of that post. So that gives you some power without really any interesting tooling
00:18:48
Speaker
I don't know if anybody's got that right. That's tricky.
00:18:54
Speaker
Yeah, I've done that on web.dev articles. Yeah, why not? Oh, that's cool. That slipped through. So you gotta be careful what you're going to do in there because that gives you ultimate power. Like you could mess with the header in that style block if you wanted to.
00:19:10
Speaker
do dramatic things. So it's on you to be a little careful with what you're doing in there. Probably keep it to styling a class that's uniquely present in that post. And then if you're just styling a block quote or whatever, I'm going to rotate this block quote three degrees because I think it's going to look really cool that way. That's fine. That's going to last. That'll be OK. But if you're like, I'm going to take this block and I'm going to make it edge to edge wide or something,
00:19:39
Speaker
That might work today, but the design of tomorrow might be like, well, we have a sidebar now that we didn't then. So this thing's going to wank right over that sidebar next year when this gets redesigned. Nobody's going to read this. I want to talk about that scope now. That scope has proximity. This is a weird use case. I've never really thought the proximity was going to be that effective. But if you're writing a blog post and you put a style tag in line there, that style tag is right next to the component, this block quote that you used. And then voila, proximity and scope, it's tight.
00:20:09
Speaker
You don't have to worry about a bunch of. That's kind of neat. I mean to me I hate to like I get that it's useful but you could also just like put one class name at the top of that post. That's what I do now. Post 123 and then scope every selector and it's like.
00:20:29
Speaker
By scope, I mean put dot one, two, three at the beginning of every selector that you write and you got scope. Not as clean, maybe. It's not like problem with it, but it's like not something that we couldn't do before. I'm at it at scope. How are y'all at at scope? Have you tried it? Do you care about it? Are you interested? What's the dealio? Yeah, I don't know. At scope. I've read about it.
00:20:52
Speaker
Is it out of Canary now? Because when it was in Canary, you know, behind a flag, I was like, Ooh, that's a bridge. It's still in Canary behind a flag. Yeah. Yeah. Hmm. I have sort of a thing where if I have to click buttons to do it, I just kind of, that's kind of my day job is to like, you know, fight through like gates and guards and try things that aren't ready yet. So whenever it comes to the web, I'm like, Oh, if it's behind, if it's out of a flag, I might try it. If it's in a flag, it's just going to do it.
00:21:20
Speaker
You know, it depends on how fun it is, you know, like I'm more than happy to open it for something like, you know, scroll driven animation. But if it's just like, here's a way to write more idiomatic CSS.
00:21:38
Speaker
See one question actually continuing on this whole generation. Sorry, this is like, I could talk about blog posts, generation styling stuff forever because I'm very bad at this, but yet I love it. So you were like, well, you could drop a style tag in there and then you can do whatever you want. Yes, that's true. However.
00:21:56
Speaker
there is a cost as there is to doing anything. And this is a cost that I know that you know very well, is that all that works, you make all this customization, you're really happy today, maybe even happy a month from now. But then all sudden, you want to restyle the whole blog, which I know you have done several times at massive scale.
00:22:16
Speaker
And that's fine if you have certain amounts of articles, but when you are publishing nonstop and you're doing things like that nonstop, how do you reconcile all that? That's what I mean. You got to be careful. Every time you make a little custom change like that, you got to kind of just feel it out and be like,
00:22:33
Speaker
does this feel pretty contained? Like, is this within a set of rules that I've kind of established for myself for what I'm allowed to do? And that I know even during a massive redesign, I will respect what's generally happening here. And I feel like that respect level started at like the
00:22:53
Speaker
tangle of the content itself. I'm not going to do a redesign that messes with what a chunk of content is. I'm not going to all of a sudden make it 200 pixels wide or something. It's probably going to be between
00:23:11
Speaker
mobile size and say 600, 650 pixels or whatever it is wide so I can trust that. I'm not going to jut anything into it. I even decided at one point that the background of that would always be white.
00:23:26
Speaker
which that was that you wouldn't make that decision now but i decided my every screenshot i take if i'm gonna i can trust that there'll be a white background behind it so if i wanna like lean into that white background i can somehow again you wouldn't probably make that choice now but i did then i had like this set of rules that even during a. Big redesign that i wouldn't break those x rules you know.
00:23:52
Speaker
I see. So there's like having a little bit of foresight into like saying like, Hey, I know I'm probably going to redesign this thing totally, but so I'm not going to write in the system too. Yeah. Yeah. That's not going to structurally destroy this or change this. Or if I do set rules there for like very, very good reasons, like this should always be white for as much as you can. Don't like with
Consistency in Design and Templates
00:24:15
Speaker
your custom styling, don't reach out of the content area itself as much as you can.
00:24:20
Speaker
And if you do, then it should be a template of its own. In WordPress land, you could literally just make a new template and name it. So I'd name one like, for example, I'd name it no sidebar. And it just would be a version of that blog post with no sidebar. And then I know that I need to honor that as the redesign goes forward, is that that template still needs to have no sidebar, whatever else is going on. That still needs to be true in the redesign.
00:24:49
Speaker
That makes me feel good because I do that. I always have like base templates that kind of just like set up the world and important things. And then I have like basically navigation style templates where it's like, Hey, what kind of header do you have? What kind of footer do you have? And then try to like jam everything in there. But if I want to get rid of this header, cause I'm like, Oh, this header is too big. I want to drop it to be really minimal because I want the blog post to pop on this one. Then I have to basically create a new template. That's like no header blog post most pop.
00:25:16
Speaker
Right. And the wrong way to do that then would be to write the styles that do that job in the post itself. Because that's not going to age well.
00:25:26
Speaker
I have done that too where you, I've, I, I have basically said like, Oh, I'm going to decide this in the front matter. So in the front matter, you can select kind of like, do I want a header in this? And that's more so responsibility of layout. And then I've done that. And then basically once you start doing that, you are configuring like the world of like things that pop in and out around you. And then that's where people are like, Oh, I don't want the header on this one, but I want to do that. And then.
00:25:53
Speaker
my not good CSS. Yeah, it's become data at that point. And it's like, usually when you set data, you need to respect it forever. And that's hard. I mean, you occasionally need to break that, but ideally you don't. You don't want a bunch of key value pairs or whatever in your front matter that are now meaningless. Now you've made a bunch of weird problems for your future self. I feel like y'all just helped me realize something about Tailwind, that Tailwind is bad at redesigns.
00:26:22
Speaker
Like, if you've built your whole site with Tailwind, that's a really hard thing to redesign, because you didn't separate your content from your styling. They were one and together, and it was really great during it. I hate to tell you, Adam, I'm not the original criticism of it. Oh, is it really? Oh, I feel like it's app properties. I'm like, at keyframes, how do you do an app property? Anything that starts with app, is there a new syntax? Probably a new syntax for that. Yeah.
00:26:51
Speaker
Yeah. The fact that you even have to do hovers and stuff and like custom properties, it's like everything that CSS can do, you have to invent a new abstraction for. So you're kind of saying like whatever abstraction I think of will be better than CSS does it.
00:27:07
Speaker
Yeah, redesigns is rough. You'd almost have to like, almost write like a class scrubber script or something. Like I'd rather start from scratch than it's a find and replace. Yeah. You're like, I'm going to find all of the uses of BG Indigo and switch them to BG Lime, you know?
00:27:28
Speaker
I also thought of a funny joke in there. We were talking about front matter and I'm like, is there anything like back matter? And then I was like, oh, front matter, back matter, mullet matter. There's a party in the front, got mullet matter. So I'm going to put that into my next, uh, front end framework. We got party in the front business in the back, right? Which part of the team are you on?
00:27:48
Speaker
David made me think of is that surely there must be a system for this. He's had some line like that earlier. And then there kind of isn't in CSS. I think the longer you do it, you think of your own system. You're like, this is how I do CSS. And then it starts to feel really right to you. And there's this tendency then that you're like, you know what? I'm going to name it and blog it.
00:28:13
Speaker
You know mine is the star system or whatever and then I always read those of other people's and I'm like I don't have anything against this but I don't I'm not gonna like just Follow it or something like I don't it's almost meaningless to me other people's following methodologies, too. This is a yeah
00:28:33
Speaker
I think everyone's bad. I loved it when Bem was out and Bem was so hot and everyone's googling how to name things. They're like, I would like to follow Bem, which I love. I love Bem. But I don't know what to name this right now.
00:28:45
Speaker
You're like, is this a modifier? And everyone's like, go to that website that names them for you. You're like, oh, no. Okay. Now I could just use the BEM naming website. And it was just a new. Right. And it was light on methodology because it was really just a way to name your classes. I don't think it got as deep as the other ones that are like, you should think about layouts, components, and one offs or something. Somehow that would be brain.
00:29:11
Speaker
I don't even know. I'm not even thinking of one in particular, but people would tend to break down the responsibilities of CSS in their own special way.
00:29:21
Speaker
You know, and I just, I don't know, like that, it doesn't hurt. Like I'm not telling anybody not to share anything like that. But I think if those things don't click with you, that's okay. Cause I think the more CSS you write, you'll fall into your own little, what makes sense to me. You got it. You know, when you're just learning an instrument, everybody's got like, Oh, you've learned this pattern, learn that pattern, do this strategy, do this, buy this guitar, buy that one. And all of that doesn't.
00:29:47
Speaker
it doesn't have to, or even give you anything immediately. It's really still, there's still so much like intrinsic value that we bring as developers. And this is something that people, they accuse, that will not accuse. They, they say their tool is why they were successful. But I'm like, why, why are you saying the guitar made you play such a good show? Because it makes for a better interview, you know, like if you're once you're really good, and you do an interview, they're like, give me some advice, you know, they'll be like, I don't know, do whatever you want, you know, which is kind of like,
00:30:14
Speaker
It's kind of like the best advice cuz you're like don't do what i did that was just websites that's a great one on mine is always been like fingers on the keyboard like you just read your way into success in web development you can't you have. There's actually a name for this it's called like the red folder.
00:30:34
Speaker
Red folder technique or something where basically if you if you interview someone who's like a straight a student and you ask them how do you become a straight a student. They feel like they have to give you a very profound answer they can't be like well you organize your time and you study really hard and you like decide that this is a priority in your life and you do it.
00:30:55
Speaker
and you make sacrifices to do it is like the real answer to get it right.
Metaphors for Success
00:31:00
Speaker
And as soon as you say words like make sacrifices, people are like, Ooh, yeah, don't like that one. Be nice and work hard. What they'll do is, is they'll say like, Oh, so I use these red folders. And so then, and then as like humans were like, Oh, an object will make me better. Got it. Okay. So go out and buy red folders.
00:31:23
Speaker
Good. That, oh, I can do that. I don't even, because it's a way to extract money out of the world is self help. Essentially. I almost want to lean into it even more. You know, I want to, who doesn't want to be super hard rules that just, that tell you that if you do what I say you're going to do, yeah, I don't know. Just because I see you're, I don't think you're really harming anybody. You're just giving them one little way that might work.
00:31:50
Speaker
Yeah, I do think if you write one of those articles, you're like this methodology or do this, you should be required to write like why you shouldn't do this section. Because I had written an article once called, I'd never published and call it grid based.
00:32:06
Speaker
components where I wanted to write about why you would use actual JSX components or whatever framework components to specify which columns things go in. So it's like sidebar, this, that, and then they just basically annotate classes and then they have children or slots inside of them. So nothing big, but it's a nice way of saying,
00:32:28
Speaker
If I'm not really comfortable with layout and I'm a big JavaScript developer, I just want this to pop into that part of the page and it does all its stuff, then I use that component and I know it's going to handle itself. And that sounds nice and comforting for that kind. And when I went to wrote, why wouldn't you use this? One of the first lines I wrote was, kind of defeats the whole purpose of CSS Grid. And I was like,
00:32:52
Speaker
Oh, yeah, it does. Cause with grid, we don't really care to have like a container element. Auto placement. Yeah, exactly. Cause now auto place API for what about when the screen is this size and when you find yourself replicating the another API.
00:33:09
Speaker
It's kind of why I don't like the part syntax in Shadow DOM because you're like, it's like now you're on your own to make up a CSS-like syntax. You can't write part header space and then use the rest of CSS. I'd like to select the part and then select the H1 within the part. You can't.
00:33:30
Speaker
So it's saying, Oh wait, you know, I'm surprised it's not more popular giving given TypeScript popularity. Cause what you're doing is formalizing the interface. You're formalizing what can be styled and you're promoting it. You're saying that this part I'm not agreeing or disagreeing with you. I think it's kind of weird, but I am surprised though that it, it is the same interface that TypeScript gives people are redefining all these variable names, you know, and creating types and, and
00:33:54
Speaker
I don't know, I mean, the analogy falls over when TypeScript is JavaScript, so you get TypeScript, but then anything JavaScript can do, TypeScript can do, whereas part, anything CSS can do is not, you can't do it with part.
00:34:08
Speaker
Well, once it's exposed, yeah, you have to select it using someone's exposed selector. And once you have that in your hand, you're good to go. But yeah, because it's not like part can say, well, in this part, you cannot set background. Oh, they can't do that. All they can say is they can only select this element. And then at that point, you can go ham on it. But not its children, not an nth child, not any, not a hover, nothing. Yeah, no descendant selectors that just kind of go. Yeah.
00:34:36
Speaker
That's what bugs me about it, because you're like, oh, I want the children, too. So you're like, well, how do I name it then? Do I use dash, dash? TypeScript, you can only get to the stuff that other people have formalized the interface for. And that's what everyone loves about TypeScript. They're like formal interfaces. I love it when you've limited my access and given me a healthier abstraction. And that's sort of like...
00:34:59
Speaker
I'm just a little confused because I think that the same thing that they're doing there can be done here and whatever you guys can go right. And I think it's funny like here's another JavaScript comparison is JavaScript grows and grows too. All you do is add functions and add lines. Why is everyone like CSS grows and it's an evil property of the language? I'm like, that's what they all do. What language are you writing and read? All right. Plus what could there be a JavaScript tailwind? Is it be like, you know, like all you use are the functions that someone else gives you?
00:35:28
Speaker
So you're just like, Oh, I don't even know JavaScript. All I do is import this library and then call it. You're still writing JavaScript, just like you're still writing CSS with tail when you're just like, it's just through an abstraction. But I just wonder, could you do that? Alpine, because it kind of is like that where you JavaScript has moved into attributes, essentially.
00:35:46
Speaker
Yeah, it's a little more declarative, I guess. It's declarative at the template level. And that's what I think a lot of the success of Tailwind is. We moved into a component model and Tailwind was like, we're right there in your JSX, which is where people love to sit. They love sitting in the component file. This is why the components are a cool tool. They just love sitting there. They're like, this is where I work. This is where I get my shit done. So bring my classes and let me decorate while I'm here. And I don't have to go somewhere. They're not totally wrong. I mean, whatever.
00:36:13
Speaker
They're not totally wrong. I think it's a good workflow other than when you need to redesign.
Testing CSS Across Platforms
00:36:17
Speaker
Well, I just thought that remember that was, I don't know, I grew up in this period of like, you need to separate your concerns, absolutely. And the idea of putting an on-click handler on a button element in your HTML was just absolutely wrong. But that would be the smelliest, smelly cold you could ever do. I did that yesterday and it felt real good. And it turns out that was wrong, though. Like, two scold people for that was incorrect. That that actually is not a bad way to go because it just mentally ties together this
00:36:47
Speaker
physical button thing, not physical, but the physical in the terms of building a website, I guess. There's the button. I said we were licking things earlier. We're not really looking at it. That code's not physical. It's only digital. You can hit some glass there, I'm afraid, before you got anywhere. I mean, it's so juicy with the new HDR colors. Have you seen them? You just want to lick the apple colored red on your screen? No, you don't. You don't lick your screen, everyone. That's gross.
00:37:13
Speaker
Yeah. Turns out- There was another joke that came up. You were calling kids. You were like, oh, children, the elements children. Oh, they're also just called slots. And I was like, I don't start calling my kids slots. And be like, you're slot one. And the other kid is slot two. Be like, wait, what are you? I'm like, I'm a parent node.
00:37:30
Speaker
I'm a parent. No, two slots. And here they are. Slot one, slot two. I did not name their parts, Chris. I have to tell you, kids, it's easily replaced. Very easily. Their name slots, too. So funny. Name slots.
00:37:47
Speaker
Here's another one I wrote down on my list though. Yes, I was going to ask you that. Excellent. Well, it's just one of those vulnerable ones almost like the testing of things. I feel like I'm not as good as I could be or should be because part of our job and part of what makes CSS development and stuff so tricky is that you're responsible for all the different screen sizes, all the different browsers, all the different input modes, all the different
00:38:14
Speaker
accessibility things and people with low vision and all that stuff. There's a lot of stuff you could and should be testing. Personally, I tend to, and this is for worse, not for better, just lean on experience a little bit more. Just be like, oh, I just know that's a problem, so I'm just not going to do it or something, rather than fresh testing every single time. I don't even test cross-browser usually. I'm that lazy these days.
00:38:39
Speaker
No, this is a really good thing to bring up is like testing CSS is hard. It's a hard thing to do, right? So then there's all sorts of like automation that we can try. One of my rants that I have here is that it's like everyone in the back end writing JavaScript has one execution target.
00:38:53
Speaker
If you're a node, you're just running a node. If you're running it in the browser, you're just running it in the browser. And there's like, that's a standard single consumer type. You know, like to pacify the thing reading your JavaScript is far simpler than the whole front end in CSS. With CSS, we have multiple browsers to pacify. Then we have multiple screen sizes to pacify. Then we have multiple screen readers and there's double the amount of screen readers that there are in browsers. So the final boss is like,
00:39:19
Speaker
way far away. And so everyone else writing JavaScript is like, oh, it worked. And I'm over here going, I have to make it work across eight different consuming types. There's a matrix that my code has to live inside of. This is why it's chaotic. This is why a lot of people
Frontend vs Backend Complexity
00:39:34
Speaker
call it hard. It's because the execution space, the place where this code runs is hostile. And it's full of
00:39:44
Speaker
But it will never be easier in terms of like click versus swipe and stuff like that. Like that, that's just a, that will never be easier. Next level. Yeah. To be fair with JavaScript though, if you're starting to talk about like server side rendering, like when JavaScript frameworks, then you do get the matrix. You, it, it gets bad. Like node versions, browser versions, like, I don't know, I don't know, I don't know.
00:40:07
Speaker
I run edges coming out now. So you got like Dino and, um, yes, exactly. We have a bunch of those. I have libraries with those ones where every time you make a code change, you're like, you feel like you're going to run through a gauntlet. You're like, Oh, we just log something to the console, but now I got to run through these. Uh, it's like 12 ones per node version, not per node version, but like, including node versions, you're just like, Oh, trying to server side render more. And man, that is a, that is a unique pain, isn't it?
00:40:36
Speaker
I like the little warnings where we just use next or whatever, but it spits out console warnings. It's like, bro, whatever happened on the server is different than what happened on the client. You're going to need to know that. It always annoys me a little bit because I'm like, well, then fix it or whatever. Smarty pants. I don't know. Well, don't do that. Yeah, your framework.
00:41:01
Speaker
but it has access to different stuff. Like you literally in a lot of context, you know, you, you're definitely aren't writing window dot anything cause the node server don't know that.
00:41:12
Speaker
I actually agree with you fully on like just fix it mode because I was writing my own bespoke terrible server side rendering frameworks back in like 2016, 2017 using like JSX and all that. And I would run into those problems. And then I was like, Oh my God, this is hard. They're right. It's more than just render server, like hydrate takeover. Like this is really, really tough stuff. So when I started using like meta frameworks, I was like, I don't have to do with that. Wait, what?
00:41:40
Speaker
I was like, no, no, man. I was like, so I, I agree. And then like, I feel like contrast is a pretty clear and present one to check against. So I don't think I'm horrible at that one, but that's not the only kind of color issue that can come up. You know, like really, if you're really being good about your testing, you're testing against all kinds of different possible vision situations. Forced color modes.
00:42:09
Speaker
I have not, you know, I had a designer who I worked with. So this is, if you're, if you're bad at this with colors and contrast, I have a great solution for it. You just work with a really good designer. Uh, they tend to, uh, that's it. It's all you have to do. But I worked with, uh, on the firebase blog, I worked with a designer who did not think it was like revolutionary to me. Adam and I had a discussion with this once that should become a podcast where he.
00:42:33
Speaker
said to me to not really think about things in light mode and dark mode, but just to think about things on surfaces. And he's like, so this is a surface and it might change for light mode and dark mode, or it might not. And he's like, but only these types of texts can go on this surface and only this one can go on that. And everything he picked out beforehand, he picked really high contrast colors. And then everything that was defined as a certain surface layer, I started writing the CSS that way. So this was a certain surface.
00:43:01
Speaker
And then we basically had a contract at all times. This was how it worked. And then when we'd swap out for things for light mode and dark mode, you were just sort of switching the rules. So I switched that surface and then we use a computed customer property. So we'd just switch like super easy.
00:43:17
Speaker
But what I thought was so interesting was just the amount of thought that went in beforehand to the contrast in the colors and then agreeing on the services. It made us to the point where we went through contrast checking. We don't have those problems. It was awesome. It's the only project I've ever had that on though. And it was just the amount of pre-thinking, pre-planning work that went into it.
00:43:39
Speaker
you think of is when Adam brought up scope though is that let's say you have this you did a great job like you did wonderful got light mode and dark modes killing it you got your surfaces whatever they are but it's it's possible that sometimes
00:43:53
Speaker
There's a piece of a page that is just dark on purpose. Cause maybe in this blog post you decided that like the block quote is going to be like dark mode looking or something. Cause it looks cool or something that now you have this problem or a light mode outer wrapper and a light mode inner wrapper. And I recall that as being one of the things that scope was actually kind of good at. Cause unfortunately you'd have this class high up that said light mode and then a class lower down in the Dom and a div that says dark mode and that
00:44:21
Speaker
depending on how you wrote your selectors, proximity would be a problem that, you know, you could write light mode P as color white. And that would win just because it was later in the CSS than dark mode P because they're both like fighting each other. So we'll give plus one to scope and its ability to handle those situations. Yeah, cascade layers helps there too.
00:44:42
Speaker
I can always tell someone's disdain or even slight disdain for something when you say, you know, that's actually something it's good at. Yeah. Well, yeah, I'm a little scope isn't my favorite. I'm trying not to be like my favorite.
00:44:56
Speaker
So it's not like a problem for CSS, but it solves these really narrow issues that just, I don't care. My issue with scope too is that like, yeah, you're right. It's solving narrow issues. But then you go ask, you ask five developers in the community, Hey, what, what does at scope do? And they're like, I don't know. I'm like, Oh, good. What do you think it should do? And they're like, Oh, it's going to make sure that the name doesn't, and you're like, now it really has nothing to do with names. And they're like, what's it for? And then you're like, I know I have to go learn what at scope is for because it's not.
00:45:25
Speaker
what I thought it was. And then you're like, well, then you can learn what it is. You don't really need that. That's a good point. It doesn't, uh, it doesn't give you this like free unnamed, just go, you know, I guess that there's so much to think about because, you know, when you use something like CSS modules, not the, not the ones that are importing into web components, but the old school library that just obfuscated class names.
00:45:47
Speaker
You didn't get free names there either, but you kind of did because you could be real lazy about what it was named because it's just going to get messed with anyway. So if you name five things- What's your best, uh, RoboVon card impressions? You know, like dot card slash. It's just four. Yeah.
00:46:12
Speaker
I wonder if everyone does that because I do that too. I'm like reading out class names as they're generated in the browser because I use CSS modules in Firebase blog and a ton of projects for that reason. And I'm like, okay, so that's light surface. And, uh, you did the right thing. I can already tell that you configured it to.
00:46:29
Speaker
use the name that you wrote and the name of the file and then the robot bar. I think that's nice. That's so Astro does that. You look at these styles Astro outputs and the whole styles pain is card, Google, Google, header, Google, and then they wrapped it in wear with all these weird little slashes and hashtags. And I'm like, y'all really, you didn't just kind of vomit on my shit. You really,
00:46:52
Speaker
You really threw up on it. This is crazy. Right. Because they want it as the where so that they are 100% not messing with the specificity while they're messing with it. Yeah, exactly.
CSS Module Class Names
00:47:04
Speaker
Vue does that too, though. They use an attribute situation. They turn your class into an attribute because then it has the same CSS specificity.
00:47:15
Speaker
You know what I mean? Don't they do that? Hey, you did well. I think Svelte and Vue are the ones most appropriate for at scope because you can put the style tag next to the element and then all of a sudden it's like has some of that ability that you wanted it to have and limiting the lower boundaries.
00:47:35
Speaker
Sometimes that doesn't like appeal to me like a million percent like the putting the style tag in the component like I almost prefer to not like can it just sit right next to it in a different file really like a tiny not a big deal thing but like in my vs code sometimes I like to look at them side by side.
00:47:53
Speaker
And in order to do that, then I have to open the same file in two tabs and different scroll. That's always funny when you're like, I'm going to split paint on the same file. It kind of feels like two separate files, but it's not. Well, where am I? What is this world? Yeah. Yeah. That's not the end of the world, but not my favorite.
00:48:12
Speaker
Something I was thinking about in this, we were talking about what scope does or what things does. I think that one of the biggest ways that you can give a CSS developer anxiety is if you just go up to them and then just ask them what a property does. You're just like, hi, you like CSS? And they're like, I love it. You're like, what does flex basis do? $100 right now. You picked the hardest one, though. That's possible. No, flex basis I could do, but flex shrink. Oh, God.
00:48:41
Speaker
Cause then you get, and then you'd have to record them and you get like hand motions. You'd be like, okay, so there's a, there's a box. And first you got to understand intrinsic size. So that's the first afternoon. Yeah. And sometimes it's like this and, but then other times I don't know. Explain my, why min width zero is a thing that we type. You're just like, Oh man, I don't, I don't want to, that is an embarrassing thing to type in my styles.
00:49:11
Speaker
What does 100% do? Most of the time, nothing. That's the first thing you need to know. You need a parent. That would be a cool statistic if we could figure it out. How many with colon 100% semi-colons exist on the web that do nothing?
00:49:32
Speaker
Like this is how much CO2 we're wasting because we're sending all of these with a hundred percent across the oceans over and over again. It's like the favicon. It's like how much electricity goes to serving favicons that don't exist.
00:49:47
Speaker
Yeah, there's a there's a like a level of scale though. This would be like one phone call probably is worth 20 billion of them. And you're like, did you really need to talk to your aunt? You know, let's stop one video chat. Oh, man, video chatting's gotta be just destroying the planet, right? I don't know.
00:50:04
Speaker
Now I feel bad. You got three of us doing this right now. Why you gotta make this personal, Adam? Don't put the mirror in front of my face, man. Put it somewhere else. Well, we're reaching. We are. We're at 50 minutes. This has been stellar. Is there any last minute stuff you're bad at or things you just want to comment? Anything on your chest you need
Musical Interlude with Chris Coyer
00:50:28
Speaker
to share? Do you want to give us a lick of Banjo too? I don't know. You tell me what's up.
00:50:34
Speaker
Uh, maybe I should, huh? I don't have anything else to say. You looked awesome on Shop Talk. You were like, oh, I picked up the banjo. I'm not that good. And I was like, dude, he's so straight over there. I loved it. I wanted to hear more. I was like, every intro should be you playing a little bit of banjo. I'd be so happy if it's close. Yeah, we're going to get a treat. Yeah. See, mine's over here. Oh, are we going to get a jam? I'm so not musical. There's no way this, the timing's going to work out.
00:51:15
Speaker
I don't know I was trying to do the deliverance thing for you because I feel like that's always oh that's what I was referencing yeah
00:51:22
Speaker
Is that like the free bird of Banjo? It's delivered. I don't even know it really. Although I was thinking about the other day, I feel like I should watch that movie again. Some people have like the, oh, that's, I don't know, they have some impression over the mind. It's a dark movie. You're going to get some dark vibes. I think so, but like, is it what you remember it is or do you have some incorrect, you know, I feel like people remember what they want to remember, you know? Hunting trip gone very, very long.
00:51:51
Speaker
Bye!
00:51:59
Speaker
Yes. Yes. That's awesome. So you should have practiced a ton. I've been trying to learn my finger picking strategies and it's not that slow going, but yeah, you sound great, dude. I need to sit in here promptly. I'm crunched in here. I have gotten okay at this thing, you know, by going to festivals and playing all day and stuff. I really am into it. It's definitely my retirement plan.
00:52:24
Speaker
Yeah, music is cool. I love like I'm a crafter. I love building stuff. But what I love about music is that you get to craft with someone else. And I love the ephemeral nature of it where you're like, and it's gone. We created something. It was in the air. It filled up the space like magic. You could cut the music with a knife in the room. And then when the music stops, everyone's like,
00:52:46
Speaker
weird. This room feels so different now. And you're like, Yeah, and it's gone. We'll never play it like that. Or something, you know, like people, you can even hear that. I love that in recordings when they record that there's like, eight seconds after the end of the song, and almost like universally, somebody will like laugh or something.
Conclusion and Future Plans
00:53:04
Speaker
Like when they had a good take, it was not like they heard a joke. It's not like they played something unexpected or funny. It's just this release of like, man, we got through that. That was awesome. You vibed that? Yeah. We were on the same wavelength and we just busted out and you start laughing. You're like, whoa, I was in another world. And now I'm back in this room, I guess. Yeah. Totally. It wasn't even any psilocybin involved. Just regular.
00:53:33
Speaker
All right. Well, thanks for having me on fellows. Yes. Thank you for coming on the podcast, uh, and sharing all the things that you're bad at. And yeah, we'll be Adam and I will be doing this every week, talking about things we're bad at, uh, and bringing on other people. And, uh, so thank you all for listening and we'll see you on the next bad at CSS podcasts.