 I like to think that I sort of know what I'm doing when it comes to CSS, but it doesn't mean that I still don't make really dumb mistakes way more often than I'd like to admit. And while I've made them often enough that you'd think I'd be able to debug them quickly, I often get stuck on these for a really long time. So today we're going to be looking at some of the stupid mistakes I make, as well as the easiest ways to debug these mistakes that can pop up in our CSS. Hi there, my friend and friends. Thank you so much for coming to join me for yet another video. If you're new here, my name is Kevin, and here at my channel I try to help you fall in love with CSS. But one of the things that can make you fall out of love with CSS or just get very frustrated with it is when we're making really stupid mistakes that we can't figure out what's going wrong and it's just not working. And just before we dive in, I just want to say I got this idea from Jeff Graham who shared his dumbest mistakes that he makes with CSS. So I'll link to that article down below and, you know, let's jump in and see the stupid things that I do and then see the first one that I make way more often. I think this is like my most common mistake is if I'm setting up a button and I want to make sure that the button, like by default, if it's a link, you're getting the little hand icon on there, right? But if we come and instead of using a link, you have an actual button with that class equals a button on there, things are going to look a little bit different. But one thing with them is the hover never actually has anything. You're keeping the regular cursor. And some people think that's actually how buttons should actually be. And I'm not here to debate that. I'm just want to say whether you want to stick with that or not. The one thing that I always do is I get this wrong and right now thinking about it, even though I know I want to get it right, I want to get it wrong. And this is actually what happens to me as I think myself going, well, I usually write this so it must be wrong what I usually write. And then I, you know, I trick myself into still writing the bad code basically, which is you want it to be cursor pointer. So what I usually write is pointer cursor like that. And it doesn't do anything and nothing works. Now you'll notice I'm getting an underline on here and that's because VS code is helping me and we'll see why that's happening in just a second. But one thing that makes me feel a little bit better about this is there's actually a VS code plugin or not a VS code plugin. There's a post CSS plugin that you can get that actually switches them around for when you get it wrong. But just having a linter on in VS code can also go a long way to finding that. If ever you don't get it when you, if you don't have a linter and we'll see how we can turn that on in a second if you don't already have that. But if I come here and I see this is crossed out, the first thing I usually do, this is just in my DevTools, the first thing I usually do is just double check that I'm looking for typos and then I eventually go, oh yeah, I got it backwards and I switch it around to the proper cursor pointer. And then I get the little hand icon that comes up every single time. It makes me feel really dumb because I think about it before I write it because I know I'm going to get it wrong and I still get it wrong, hate it so much. You also notice these colors aren't changing. I wrote some CSS here that doesn't have any variables actually set up because I wanted this to look better. So another stupid mistake there but at least the hands are working. I also write code pens all the time and then there we don't have any linting or anything like that so it doesn't help me over there. But if ever you do want to get the linting on, what you want to do is open up your preferences which is control and comma. I don't know probably command comma on a Mac or it's under file preferences and settings and you just want to go in here and you're going to write CSS lint. And when you're in there, you'll get a whole bunch of options for the linting and you want to make sure it's on first of all. But you can have it like control or decide what you want it to do. For me, empty rules, I actually have a warning on for that. So it just says this is an empty rule. It's kind of useless because you notice that one right away. Duplicate properties is a really nice one to have on. So if I came in here now and I did a color red, you'll actually see it's highlighting both of them because I have the same property two times that aren't even close to each other. That one can be a nice lifesaver too. Not something I run into too often but I know that can be something that can be really annoying so you can turn that on. There's a whole bunch of other things you can read through them and find the ones that you want. I generally keep most of them off but there's a few in here that could be useful to have on. And if you've gone through here and you've turned stuff on and it's still not working, they usually are on a think by default. But you can do a CSS dot validate and it should come up and you just want to make sure that's enabled. You can have it for other languages too. If you look up like JS, is it JS or JavaScript? There's JSON, JavaScript, they have some basic validation. This is not the same as like a style. You can go with it like a full on linter like style lint for CSS and stuff. This is just built in settings that are in VS code with nothing else enabled to get some basic stuff but something that can help out. Now another thing that my brain always mixes up for whatever reason is when I want to do a transition. A lot of the time I do a transform and transition here. And the fun thing with that is my validates not going off on this because transform is a completely valid property. So say I did transition 500 milliseconds or whatever. Nothing is the basic validators not coming up here. I don't know why I do this. My brain just flips these sometimes when I'm working. And so if we do an inspect on here, this is where you will actually find it. That's on my button. So if we come and look there, you'll just notice it's being crossed off. And then you sort of go and it tells you that it's an invalid property value. And this helps because you know, okay, my transform is okay. It's only this part where the mistake is. And then you sort of look through there and eventually you realize that you're stupid and you made that mistake and you fix it. But yeah, that's another one that I do way more often than I'd like to admit. These all are things I do way too often. But yeah, that one's a fun one just because it doesn't, you know, you don't really catch it right away. Now here's another one that I do like way, way too often. If we come and look in my here, I have these boxes that are here. This one isn't this, this is a hard one to debug. You just have to figure this one out. So I have this like box there. I have my boxes here. And this is probably not something that a lot of people run into. But because I make a lot of demos, I like having boxes with colored backgrounds. So I need them to have a colored background. So I give them a color and then they don't show up and I go, wait, that's okay. Then I come and I'm like, no box. I check the spelling of my class. I check the spelling of that. Everything here is fine. I see there's a color. I come, I look in here. Everything is here is fine because everything is fine. And I didn't make any mistakes and they're all valid properties and they're all valid values and what's going wrong. And this one takes me at least like 30 seconds whenever I do make it, if not longer, sometimes it's a couple of minutes to figure out. And then eventually I wanted to be a background and not be a color. And it's just one of those, you know, it's hard when you make a typo that's not a typo, but is a typo. But your brain is just like, you're not seeing anything wrong because you wrote exactly what you wanted to write there and it doesn't work. Not when you just have to realize that you made a mistake and figure it out at one point or another. I don't know of an easy way to debug that one. And I'd like to know, have you ever done something like this or the other ones or is there other things that you do? Please let me know the dumb mistakes you make. Leave comments down below to let me know if you make the same ones that I'm making or other ones that are completely different. And another one that I do make on a way for someone who likes talking about and using pseudo elements all the time. I throw a nice position absolute on here and then I give it like in its inset or whatever and a background and I actually double check. I've done this where like I'm double and triple checking the background I put on here to make sure it's not a color and then I actually put a background. And I'm doing a whole bunch only to eventually realize that I completely forgot to put the content property on here and now they're showing up. And maybe here the content would actually be like an open quote or something. You know, we're doing, whoops, we want it like that open quotes. But let's turn that off. And then you get, you know, styled up your quotation marks and stuff, whatever it is. But yeah, in this case, I wouldn't forget it. But when I just want it to be like a decorative element, forgetting to do this. And it's actually if you watch my demos whenever I use a pseudo element, I'm like, don't forget the content property on there because we need that. It's me trying to remind myself that's why I repeated or I already did it and I didn't work and I forgot to put the content. So I edit that part out and then I'm reminding everyone else because I know that I just made that mistake and I don't want other people doing the same thing. So yeah, don't forget your content property on before and after pseudo elements because you need it or it doesn't do anything. And one way you can sort of debug this one is if you do forget to put it there, when you go to do your inspect, this it won't you have to find your suit element. So you go and look and then you go, wait, there is no suit element here. Why is it not showing up? Oh, I forgot to put a content because, you know, sometimes you have a position absolute, but you forgot your position relative so you don't see it because it's way off in the wrong place. And in those situations, too, when you debug, like, you're going to find that before it's inside of here. So then you'd be like, this looks OK. And then eventually you figure out what the other problem is. But the red flag for me is here. I go to look to find it with the problem is there is no before. OK, I did something. I come and look and I go, I didn't put a content or maybe there's a typo or something else that happens as well. And this we put a position absolute on here, but my real arch nemesis. And this is this is like version two of this in a way. But this one gets me. The cursor pointer pointer cursor. I always know I'm going to get it wrong. So if I doesn't work by to switch it because I knew I was going to get it wrong anyway. This is one of those ones that I get wrong and it takes me like 10 minutes to figure out. And maybe 10 minutes is an exaggeration, but probably not at times where I do it display absolute. And I'm trying to figure out what's wrong and I come and I look at my testimonial and I see it's here and I open it up and the before is there. And this is how you find out that it's wrong is because it's crossing it out here. But the funny thing with this is when I see this I'm convinced there's a typo because I also happen to spell absolute wrong a lot of the time I'll do something like that instead of absolute or invert two letters. I don't know what it is, but the word absolute that I can never spell it right. It's another one of my lintings not helping me because this is a valid property and this is a valid value, just not for your display property. So something like style and might be able to save me here. But without that running right now, I'm just stuck going. I'm sure I did everything right. Why is nothing not working? Then I'm looking for typos and it's saying it's an invalid thing. And I'm looking at it going, well, what's invalid about it? And I'm literally staring at it going, everything here looks fine. I don't understand what it did wrong, even though I make this mistake. Probably once a day. It's the most infuriating thing in the world for me. And then eventually you go, oh, and you feel really bad about yourself and then you switch it and fix it. And yeah, yeah, those are some of the dumb mistakes I make. And I did scratch the surface here on how we can debug them either using simple linting or using our DevTools. If you'd like to know more in depth ways of debugging, because there's some better DevTools stuff than I showed here of just showing the little invalid thing. I've taken a pretty big look at using our DevTools to debug our CSS. And that video is right here if you're interested in it. And with that, I would really like to thank my neighbors of awesome over on Patreon, Jan, Johnny, Michael, Mr. Dave, Patrick, Simon and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your point on the internet, just a little bit more awesome.