Avoid These 5 Awful CSS Mistakes

Key Takeaways

from declaring things in your CSS that you don't even need to have there to an over Reliance on Band-Aid solutions that can cause more problems than they help fix I see beginners making the same mistakes over and over again so in this video we're going to look at those mistakes and better ways to approach things [Music] hi there my front and friends thank you so much for coming to join me for yet another video and if you're new here my name is Kevin and here at my channel I help you fall in love with CSS and if I can't get you to fall in love with it I'm hoping to at least help you be a little bit less frustrated by it and today we're going to be doing that by addressing mistakes that I see a lot of beginners making and one of those mistakes is declaring things that they don't even need and I'll be honest it's not even beginners that I see make this mistake I see this just commonly all over the place so as an example let's jump into the code right here and we'll start just with the HTML we're just looking at this header that I have here where I have a class of article header so in my CSS I've selected that and I've put some styles on here and one of the things that I see declared all the time is a width 100 and the width 100 most of the time isn't even doing anything uh it just it's this like automatic thing where people go I want to make it full size so they throw a width 100 on there but most elements like our header a paragraph an article a div a main all of these things are block elements they're already taking up all the space that's available to them anyway so declaring that on there doesn't really do anything and actually it can cause some problems if you also have margins that are coming on there as well so like really what you probably want here is auto but Auto is the default so we don't even really need that and you can just not declare it at all and I also see this same thing come up with people declaring Heights on things of either declaring a hate auto which always you know that's the default Behavior so unless you're overwriting a previous thing and you need to change it back to the default maybe you want to do that but I also see things like fit content come in here and if you've never seen fit content it's an interesting property I'm not going to Deep dive it now because I have talked about it in a previous video but basically means fit the content that is inside of it so if we're going to add more stuff here like say in the header we add a paragraph with some lorem text and I'll just do a short paragraph my header got taller and it's fitting the content that's in there but when it comes to height that's basically the default anyway because if I put that to Auto it looks exactly the same or you know that means I can just remove it and it looks exactly the same because that wasn't changing what the behavior was so my first thing that I'm going to say is don't declare things unless you actually know that you need them so do it hit save refresh your page and actually I always get asked this how do I auto refresh the page I'm not using it right now but if you're very new the easiest thing to use if you're using vs code is an extension called live server it gives me a little button down here I can click and as soon as I save an HTML CSS or JavaScript file it will refresh the page automatically without you manually having to do it but if you're not using vs code and using a different text editor you can probably find a similar extension unless it's something like notepad plus plus in that case I'd actually recommend that you switch over to something a little bit more robust than notepad plus plus it's fine but there's better Solutions these days but yeah circling back make a change and make sure that change is doing something don't put okay I know I need it to be with 100 so I'm going to put that there put your stuff in see what it looks like and then if you need to declare something to change what the defaults are then add that in but if everything's falling into place and you don't have to do anything don't write CSS just for the heck of it because sometimes like that width 100 it can have unintended consequences if you have to add margins or do other things to it so you're actually better off not declaring that unless you really need to have it and sometimes you do every now and then you go actually this this would be perfect for that I need to change what this behavior is that's fine but declare things only when you need them not just randomly putting them in hoping for the best now another thing that I see happen and I don't know how this actually came about but it's an over Reliance on flexbox and I think it's partially because when we early on learn about doing layouts and stuff we learn about flexbox it's one of the early things to actually create a layout so here I have this section let's just go find it or a div here of cards and then in there I have three individual cards so when I do my display Flex on that it's giving me three different columns because that's the three children that are inside of there so I'm not entirely sure how this happens but I see it where people declare Flex everywhere and it just becomes like this de facto it's a little bit like I just said of putting a width 100 for some people doing a display Flex just becomes this automatic and I really would discourage doing that for some use cases where I've actually seen it as these cards I mean they're not they're not beautiful by any means but one place I actually see them come up is people doing a display Flex on here and then it goes to columns so then they have to do their Flex Direction I have column on here to fix everything and basically go back to what they had in the first place and not using any other flex stuff in here if you need this card to be a flex item for whatever reason by all means turn it into one but if I just need to keep the same flow of content going there's there's no reason to do this at all and I see this all the time people are just declaring display Flex all over the place thinking well I might need it and then it just causes more problems and they run into issues and usually the solution is remove your display Flex from there and you're not going to have the issue that you're running into and another just to show you like extreme versions of this I have seen this uh done uh which obviously causes lots and lots and lots of issues and then you have to either that or even like on the body and then doing it the display Flex now there can be use cases for that uh but they're usually far and few between and then the flex Direction once again uh column and then never doing anything with that and it's not actually serving any purpose so it's sort of I guess one and two are very similar but this display Flex is this like epidemic I've seen where some people that just feel like they need to put it everywhere please don't do that use it when you need it and it can be very useful but don't get locked in and feel like you have to use it for everything and even there's grid out there too and for some of the things I see people using flexbox for grid might be a better solution uh this video is not about that though I'm not going to worry too much if you'd like to know more about choosing between flexbox and grid I'll link to another video in the description though and continuing from there and another mistake that people make that I see a lot is an over Reliance on like hard-coded numbers and this one I totally understand I know how it happens I get and it's really takes a mental shift to break away from doing this but if we look at these columns that I set up here you can see they're actually a little bit like this one's the smallest this one's kind of medium and this one is a little bit wider and that's just because of how display Flex works when we do that on the parent so if we come back to here and we take a look in the HTML I have these you know these three cards are the children and so each one is turning into a column but because of the content and other stuff and the way flexbox works they're all coming out to be different sizes so what we can do to fix something like that is we could go on each one of the cards that's inside there and what I see people do is something like a flex basis of 33.33 I'll just do 33 because if not I might break some stuff and even that might cause an issue no it looks okay uh and that works because they know that my cards and I have three cards here so it's setting it up and each one is 33 so they're all taking up the right amount of space so that's perfect and it's sort of working the issue with doing something like this is later on in your site you might have somewhere that has the exact same setup so I'm gonna just be lazy and copy and paste this a little bit lower down in my site to reuse the same example but this same one maybe only has two columns and then well I can't use my cards and this is like becomes cards too right and then I have those ones that are inside so then I have to have a we're going to come back to this idea in a second too but the cards too will also be a display flex and I'll have a gap of two REM on that but then I guess well this works but then I need to do a cards two Dot card and that one can have a flex basis of 50 right because now we have two columns so okay that's working I have my three columns here I have my two columns but when I say this over Reliance on these like fixed values are things like this where I need to code in all of I need something for 33 so I mean for 50 something for twenty percent something for 25 percent you start running into all these different situations and part of this is just the way we think and you get to here I need two columns I need fifty percent I need three columns I need 33 I need four et cetera et cetera so 100 I understand how how we get into that thinking and the other thing with that is if you go to old enough tutorials this is how the web used to work when we had float based layouts which don't worry about if you don't know what they are it's not the way we should make layouts but this is how we had to do things back then it was the only way to really get things to work and I think a lot of that thinking stuck around and found its way into future readings and tutorials and other stuff like that to those two forces combined lead to this being a very common pattern but we could make this a lot easier where I could say cards and then my Flex basis this is going to be a little weird but we're going to do 100 on them and it still works and then over here it still works uh and that's just because these are Flex items they're able to shrink so even though I'm saying they should be 100 and this is a little bit like the width 100 that we want to avoid unless you need it and this is one of those cases where doing this actually fixes the problem so what we're really doing is telling them all to be the same size and then because there's a flex shrink of one on these as a default Behavior they're shrinking and they're they're all fitting and becoming the same thing uh it's definitely a little bit of a weird thing if you're not used to flex and going well 100 makes them equal and there's other approaches you'll see another very similar one of just doing a flex one which gives you the exact same result even though it takes a little bit of a different way to get there but same the same principles at play where we're making them all the same size and then it doesn't matter if you have two columns three columns five columns ten columns and then you don't need these cards to anymore you can just have your regular cards anywhere you want and maybe cards isn't even the best class name anymore which gets to my next part of things like cards too um where these class naming becomes a little bit of an issue and leads to a lot worse maintenance where you get things like this of cards one cards two cards three that are often doing the same thing or I'll even see here where let's just go up to where we have the three and we'll make this a little bit bigger I'll see something like this where it's card one card two and card three something like that and then you need the same CSS on all three of those and this is super common you have like or even worse than cards sometimes like LCP class equals P1 and then class equals P2 whoops P2 and they're just like naming everything they're doing which if you need to select it that's fine but I would suggest more descriptive names and more reusable names a big purpose of having classes is that we can use the same class over and over again so having card one card two card three unless all three cards need to be different from one another it's kind of useless and one time maybe you'd want to do something like this is you have your card card card and then you have your one your two your three and we're gonna fix this in a second as well but this Approach at least the cards are all working they're all the same and then if I need to I can do my card two as a background of red and it has the different background or whatever but I'd even suggest maybe a different name here instead of card two you could have your BG accent and make it something that could be reused instead of being something that's locked into this one use case that you can never use again even if you're only using it one time on your page right now something like this is more useful because then I could take this and you it's a card with a BG accent we don't need this one here we don't need this one here but then I could come and I could say you know what this area at the top my header it has my article header but I also want that to have my BG Accent on there so I can give that the right background and then you know what maybe this for whatever reason I don't know why but this paragraph could also have AVG accent and so saving that and then we get into a much better situation and the best way to be able to think of this way and to be able to go that way is first if you're doing something that's like a one-off style think about it can this be reused elsewhere look at the rest of the design that you're building and always try and think a little bit bigger picture than being Super Hyper focused on that one thing you're doing especially when it comes to your class names is this something that could be reused in different places and again don't do card one card two card three just make a generic card unless each one is wildly different from each other one so yeah thinking bigger picture and just coming up with class names that can be reused and trying not to get like too locked into very specific things of setting and even with the paragraph example I gave before I've seen things where it's like paragraph one paragraph two paragraph three and then setting the same font size on all three of them just set your paragraph font size or your body font size and rely on inheritance or little things like that that can make life a little bit easier the less CSS we write the less maintenance there is usually the better everything works and I guess that last Point comes down I'm going to take off this BG accent because it's a little hard on the eyes comes down to the last thing I want to talk about or the last mistake which is uh relying a little bit on like Band-Aid solutions that cause more problems and the the one Band-Aid solution AC used most often is using position absolute position absolute has its purposes but it should be a last resort rather than the first thing that you go to because positioning especially with absolute has some side effects to it so as one example I want to select these images that are inside my card so we can do that we just it's the image inside my card or we could do that with a direct child selector so an image that's the direct child of my card so if I select those we can come and look at these cards I have my card and then I have my image that's directly inside of it so I'm selecting that we could also give each image a class and select it through that whichever one works but we'll just do it this way for now and say I need the image to be outside of the padding or I need to move it around a little bit I see so many people do something like this where they'll put a position absolute on there and then say a top of negative 0.5 RAM and then a left of negative 0.5 REM just as an example and it pulls it out of the flow a little bit it gives it this little Unique Look I guess uh the problem is where'd my titles go well they're underneath the image now because when we do something like that we're pulling the image out of the flow and nothing really sees it so then I have to go into my card H2 so let's do it like that and then I'm going to do a margin top of like 10 Ram I guess uh and then you know I have to sort of guess at the value that's here and then I can eventually get it and I go okay there we go everything's working except that's not gonna work down here because my images are bigger and it also wouldn't work if we came back up to these other ones and I had a card or an image that had a different aspect ratio on it so here I have one ready uh image four and then we get a tall image like that and it's completely breaking everything so when we're running into situations like this position absolute makes things not really reusable now there are times I would use position absolute for stuff and I'll mention it a little bit uh in a second but for something like this I think there's other Solutions and I always go how can how can I do this and try to find ways that you can do it without position absolute and if you have no other choice then bring in position absolute I mean in this case I could actually do this with position relative probably I'd have to change some of these values but then we could get rid of that giant margin underneath and we could get things to work this would probably become a negative that way and then we start to get that same effect and the advantage with position relative is it doesn't pull things out of the flow so something like that would definitely work or my go-to if I need to move things around within sort of where they are but I need to sort of adjust the positioning a little bit would be instead of using positioning at all would just be to do a transform and then I can do a translate negative 1.5 REM negative 1.5 REM and I realize here let's just put this on another line so we can see it all and so having something like that if I save it looks exactly the same as we had when I used the position it just moves everything over a little bit now this can lead to going okay well now I have a space that's a little bit too big all right so just to show you that it did work let's just make it a little bit more exaggerated and make it two so you can see it shoved over a little bit extra and the disadvantage I guess with either the position one or the transform is it it saves the space that these things are originally in but it moves it so the rest of the site doesn't really see where it's moved to so it leaves the original space as is which is better than position absolute where it pulls it out of the flow and then all the content goes underneath it so one solution here and this is something else that maybe is a mistake and people might not like me looking at but is using a negative margin on the title to pull it back up into the space negative margins another one probably a good thing to try and avoid unless you have a specific use case or go here I need to suck it up and fill in that empty space and in this case it works actually pretty well and the advantage with this is it's just going up negative one based on where it originally was and that means that if I did change the image or I have different sized images it's going to work regardless of what's happening there so don't use negative margins if you can avoid it but every now and then they can be actually a good thing to use and I see this this is one of those things like negative margins are a hack you should never use them use them with care know why you're using them and that sort of wraps up everything that I'm talking about is don't blindly throw things at it circles back to the beginning when I said always have a purpose for what you're doing so if there's a good reason that you're using it and maybe the transform translate because it leaves that empty space is causing an issue or you know these images I'm not using negative margins to move them because that could have other consequences whereas I feel like doing a translate and then if I need to I could fix a few little things with small tweaks but everything I'm doing has a purpose to it that I can explain so like don't just start throwing coded stuff and if it doesn't work piling more code on top of that and then piling more code and trying to throw as many things because then all these things that weren't working they're not they're sort of going to be potentially in conflict with one another or causing other problems so try something so first write code to achieve a specific goal if you have something that's full with don't add more code to it to make it full with if it already is if you need to balance things out though because they have uneven columns then a flex X1 or a flex basis one hundred percent that's fine because it's actually accomplishing something that isn't working already and then for things about moving stuff around in general transforms or position relative if you need to just to sort of nudge things in the right direction can be useful I did mention I'd say times when you should be using position absolute I use it when you do want to pull something out of the flow I don't want anything else so maybe you need overlapping items we need to pull it out of the flow to achieve what you want to achieve so a lot of time it's little decorations that you need maybe a quotation mark that needs to be somewhere unique or things like that those are the times that it can be useful but be very careful with positioning try to come up with other Solutions and if nothing else is working then maybe you can go back to that and I did also mention earlier in the video that you know we were using flexbox here but grid is a very good layout Choice as well so if you want to know how I decide when I should be using flexbox and when I should be using grid I have a video that is right here for your viewing pleasure and with that I would like to thank my enablers of awesome 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 corn on the internet just a little bit more awesome