Avoid these 5 beginner CSS mistakes

hello there my frontend friends it's really easy to make mistakes when writing CSS in fact after teaching CSS for 10 years there's a few that I keep on making so often I actually made a video about it where I look at the mistakes that I continually make over and over again but also how I fix them but today I don't want to focus on my mistakes and the blenders I keep making I want to look at some of the mistakes that I'm seeing beginners make a lot of the time and I have some demos prepared we're going to go through these together but actually before I dive right into it I just to say that there's nothing wrong with making mistakes so please don't get discouraged if you're making them like I said I made a video just looking at the ones I've been making after teaching it for 10 years we're always making mistakes and as long as you're learning from your mistakes you're going to keep getting better every day just really make sure you don't let it get you down even if you find yourself making similar ones over and over again or if I list off a few things you've done in this video that's completely fine and the other thing is a lot of the things I'm going to be looking at in this video they're not necessarily mistakes but often just misunderstandings about how things work and an example of that is this first one we're going to be looking at and actually we'll go down to the bottom for this cuz I have some text at the top uh and what I want to look at with this one is when we have collapsing margins and so here just as an example I have all these divs with an H1 in there and we're going to look at a real world example of this in a second or at least a more realistic example of it in a second but notice how I have a margin of five pixels on my divs so we're getting some space up there as you'd expect but if I make this 10 it doesn't actually change anything that title up there it hasn't moved down at all and let's let's go let's move that up to 15 pixels now and you'd expect it to move down but no it's not moving down and if something like this happens the first thing I would say uh is if ever you're trying to play with spacing and you're adding space and something's not working do a big space first just to see if something actually happens when you're doing like little pixel changes sometimes there's movement but you don't really notice it cuz it's so small so now we can see that it has actually moved down but it should have moved down 500 pixels and that's definitely not 500 pixels right there so what's happening is collapsing margins where if I look in my Dev tools here we have the H1 and then we have a div and we have a div and we have a div and div and a div and they're all overlapping each other and if we had no margins the top of this div would be touching the top of this div which would be touching the top of this div and that would just means all those margins collapse together and this can be kind of weird but it does explain why if we came on here and I make this smaller again say we say 15 pixels again you'd expect that to shift down it doesn't and it's because it's actually the default margin of our H1 that's pushing it down so I'll open the dev tools again and we see the small one there and we can actually see that there's a bigger margin here on the H1 now I'm not going to Deep dive the whole idea of collapsing margins here because I've done an entire video on it a while back so I will link to it uh the card should be coming up and there's a link in the description that we'll understand a bit more um in this one but you could always check that one out if I don't go deep enough into to the cause and why this even exists in the first place there's a few different things you could do here so on all of these divs uh I've seen people do this where it's like a bit of a trick of padding let's just say padding top of one pixel and all of a sudden we're going to get all of those spaces actually appearing and just so we can visualize things a little bit let's put an outline uh on there of one pixel um solid and we'll do yellow I guess cuz that should stand out on our black background uh and now we actually see those margins are coming in for each one of them and the reason this is happening now is we have a padding top that's separating the top of one div from the top of the next div if each div has one pixel of padding we're getting a little bit of spacing coming in and then the margins they're not collapsing into each other cuz those margins can't touch because there's a little bit of padding in the way now this isn't necessarily the fix I would suggest and if you did you know if we put a border here the same type of thing would happen so I want to jump over to this example to maybe look at why um an actual like sort of time I often see this actually happening um and how I would suggest fixing it so here I have this header and the header has a background image on it and I was like oh the text is hard to read so I made a div of header content and on the header content I gave it a background color um just so we can you know actually read the text on there CU if not it's just you know it's hard to read so very common use case that I see people wanting to do things like that right so we put the background color on there but then I go you know what I want some space around like I don't want it touching the edges like it is right now and so you go well you know what I want to do is I want to move that heading down so that's this H1 that's right here so you go okay that's not a problem I can go H1 I need to move it down a little bit so I just do a margin top of I don't know two REM to add some spacing there wait that wasn't what I expected to happen let's make it five REM what the entire thing moved what's going on here let's make that 15 REM this is the collapsing margins that we just saw coming in where the top of this is touching the top of the div so those margins collapse apps together and it's moving the parent down even though I'm adding the margins to my H1 very frustrating definitely the solution is if I need space that includes a background color just use some padding so I can take that off from there and I go padding uh we'll do padding top and I'll say that I want I don't know two REM and then I can do padding bottom and I want two REM and now I'm going to get a whole bunch of space and the space might be bigger than you thought it would be just because now we're going to have the padding from the element itself so if we come and take a look here at the Box model on this the header content has the padding on the top and the bottom and we can see that highlighted in green when I highlight on there but then we still have this big space that's there and that's coming cuz my H1 has some default margins on it you didn't put them there but the H1 has margins on it so we're now combining that padding that we did with the margins and it gets a little bit more tricky so usually you just take off the margin from your heading and just use the padding on the background if this is kind of weird for you and you want again there is a video Linked In the description uh that goes into a bit more detail on copsy margins and how to deal with them but just be aware that they exist cuz when you're not aware and you're just moving stuff around it can be very frustrating so as I said less of a mistake and just more of something that people don't necessarily realize now next up we're going to get into the world of positioning and this is a mistake that I made way back in the day and a lot of beginners make uh where you need a layout and you get two elements and you need them to go next to one another um and I think this is a little bit less common now or this specific example than it used to be just because we have better tools now but I still see this where the way this is set up is we're using position absolute with a top to move it down to get it where we want it to be and then I go on the second I go on the aside and I move it a left of 500 pixels so if I take this left off uh it's going to overlap with what we have there so we're moving it over to the left by 500 and we're moving them both down by 150 pixels using a position absolute please don't create your layouts this way one of the reasons is it becomes really hard to manage CU you can see at larger sizes they're actually starting to overlap and if I go to smaller sizes we're getting this going on and that's happening because I have a left of 500 pixels we have a space here of 500 and the space there of 500 means that we're overflowing out the side now positioning is something you might need to do time to time there's nothing inherently wrong with using a position absolute but it should be for a very specific thing in a case like what I was just looking at here we probably just want to use flex boox or grid to create a layout CU we have actual layout tools and if you find yourself creating layouts with positioning that's where things get into trouble it just becomes really hard to Wrangle things and then as soon as you change your screen size it's probably not doing what you want it to do now that's not to say that you can't make things responsive using position absolute it is possible I've done a video on it once again there'll be a card popping up and a link in the description um on how we can sort of do that but a big part of doing it is relying on our layout tools to do the heavy lifting and then positioning things within specific areas and just making sure we're being smart about it and speaking of uh one of the problems that people have with positioning is also not understanding the idea of containing blocks which you might not have even heard of so we're going to look at this quick example here where I have this testimonial and I've put this little decorative open quote for this testimonial design right here uh and using position absolute for it and I found that a left of two RAM and a top of 20 Ram would work perfectly and it's exactly where I want it to be until my screen size changes and now it's in the wrong spot uh and if we look at where I did this this is on my testimonial quote and if we come and take a look at the HTML we can see that this quote is right here and because I'm using this as a pseudo element because it's just a decoration that I want to add in there and be able to place where I want it to be where that actually is is like right here it's the first thing that's right before my text because it's a before so I have the before that's coming there but now my two REM that I have on there is two REM from the left of the viewport and the 20 here is 20 from the top of the page that also means like if I came up here and I added more text let's just do paragraph with lauram I don't know a whole bunch of words uh that we can bring in now my quotes in completely the wrong place because I'm positioning it relative to the page it's two REM from the left 20 R from the top right now my viewport is what we call the containing block I want to be able to link that to this edge here and this is where usually what people do and they they change the containing block but they don't think about it too much because they'll do this and then do a position of relative here and this part you might know if you have a position of other than static usually it's position relative on a parent or grandparent or whatever it is uh of something that has your quote on it then it's going to be positioned relative to that element so if I take this left and I make it zero uh and we'll say that my top is a zero here uh we're actually going to get it sort of well it's down here why is it down there I shouldn't it be up here that's kind of weird right like why is it not in the right spot and that's because this let's just say color is red and we'll do an outline of two pixels solid uh red on there too I'll take the color and I'll just do the outline so it's positioned relative to this box and the top zero is a bit misleading cuz it's um a very large large font size so it just has some extra space on it we'll do an outline on this too just so we can see it outline of two pixels solid yellow so it's different do this if you're a beginner please please just put outlines on stuff so you can see them uh so I have a really big font size and because of the quotation Mark's not right at the top it's just some empty space that's there so the top and left zero are actually aligning where I want it to be except I don't want it to be here I want that 0 0 to actually be relative to this darker box and I can do that really easily I just have to look here and I go well this is my testimonial quote and I want it to be relative to the testimonial this is where the background color is and everything okay well that's nice and easy I can do that just by taking off this right here and doing it relative to my testimonial and you can see it's actually moved to where I want it to be and it's always going to be LinkedIn it's going to be positioned there it's going to be exactly where I want it to be because I've changed the containing block and I haven't done it on the direct parent I've gone out a level from there and said you know what I actually want this to be containing block so I've made that the nearest ancestor that has a position on it other than static so I use my position relative there and it works and this type of thing where you're not taking advantage of positioning necessarily A lot of the time isn't necessarily your fault you hear about some of these things in passing but ideas of containing blocks and other things are just ideas that aren't really addressed enough when it comes to teaching about CSS which is why I created the course CSS demystified that is for people who have started writing CSS you sort of know the syntax but there's a lot of these gotas and things that you keep running into that are just really frustrating and the course has been put together to go back over a lot of the fundamentals and just make sure you understand those really well and then build on top of those and then dive into things like stacking context formatting context containing blocks and a bunch of other things that you might not either have full understanding of or even be aware of at all if that sounds like something you'd be interested in the link to it is down in the description but let's keep on going cuz there is a few other issues that I want to go over and one of those is an over Reliance on specific things which is I find a lot of time a beginner will either learn flexbox or grid they often you don't learn both of them right away you know and it depends which path you're doing there's no right or wrong answer on which one you learn first but then people get stuck of like okay I understand Flex it's a layout tool I'm going to use it for all my layouts or I've learned grid and I love grid I think it's great I was a bit confused with flex box I'm going to use grid for all my layouts but there's a reason that we have two different layout tools just like you probably have dress shoes and running shoes or something or you wouldn't put on your dress shoes to go play soccer with your friends or whatever it is right they're both shoes they're just like these are both layout tools they both have their own strengths and I like leaning into the strengths of the tools that I'm using so really quickly uh this demo I called 1D and 2D cuz the whole 1D versus 2D thing I think causes people to choose the wrong thing CU I have a flex boox layout here that's two-dimensional I have rows and columns just like I do here with my grid uh the control of it is more of the 1D versus 2D thing but the way I think about it a lot more is which one should have control the parent or the children if you look at the size of these here and this is just with a display Flex a flex wrap and a gap on there the size of each one of these columns is being defined by the content inside of it the children are having full control over what's happening and the two rows are independent of each other as well right so like this larm is bigger than this hick underneath whereas if I look at the exact same thing over here each one of these is the same size and that's being completely defined here because I have a grid and then I'm saying I want an autofit and I've set it up so they're all the same thing I could have different columns and different things but all of the sizing of those columns and those rows is being defined here on the parent and then the content is fitting into the grid that's being created so grid is sort of an outside in whereas flexbox is an inside out there's ways of fighting with this and making things working different ways but 95% of the time that's easiest way to think about it should the children be having control or should the parent have the control and sometimes what happens too is people like the amount of times I've had people that have a layout that looks like what I just did here uh where we'll make it a little bit smaller maybe there we have it like this where we get these going here and then we have these three that are much bigger here because I told I did a flex one on all of the children and so we're saying the children can grow and so they grow and I get questions of well I want this layout to look like what we have here instead and then well we can't really do that with flex box that's what grid is good at so use grid for that or vice versa you'll have something like this where there's an empty little spot that's left over and you're looking at that going I don't really want that there I'd like it if these two items could stretch across instead well then that's what Flex boxes for where the rows can be independent from one another and sometimes it can feel like a lot learning flex boox and grid cuz there is a lot to do both of them but you don't need to know them super in-depth really well like 85% of what you do with either one of these is going to be the same basic thing over and over and over again just creating grids and simple display Flex layouts and stuff and then you will run into like more specific use cases where you might need to tweak things and learn a little bit deeper on how to use one of them but if you're early on now you can definitely just learn the basics of both of them and have at least that in your back pocket for when you need to use one or the other instead of trying to force one of them to do something it's not good at now the next one up here is a little bit of a silly one uh and it's not to use named colors and this might be a little bit more of one of those uh do as I say and not as I do because if you watch my videos You'll often see me uh doing things like using named colors but named colors don't give you colors that you'd necessarily expect for example the first one here is with a background of gray and the second one is a dark gray and you'd expect the dark gray to be darker than the gray but that isn't the case kind of confusing right and why is that that's just what the color is and that's what we're stuck with or as another example that I was playing around with a little bit um is greens these are all bright greens so what's brighter lime uh where they both get it or lime green right why is lime green darker than lime I'm not really sure or why is yellow green probably closer to Lime than you'd expect it to I guess it's kind of yellowy but then we have a lawn green and for some reason long green is almost the same as maybe my lime and then we have the chartreuse that comes in which is almost exactly the same thing though if you look at the actual colors it's slightly different and then we have a spring green that for some reason's more of like a teal color almost not quite I don't know um yeah you don't really know what you're getting with any of these you know a yellow green you'd probably expect a yellow green to be a little bit more yellow than it actually is and really isn't like chartreuse the same thing as green yellow anyway or is that a yellow green I don't know but you get the idea you don't get specific colors that you want if you're going to be coming in and using these do them like I do them for demo purposes which is often to help visualize things you need to throw a quick outline on something cuz you're not sure where it is that's where it's great throw a yellow or red whatever something to easily be able to see it but if you need actual colors get them from the figma file or whatever the design is or if you don't have a design you can just Google Color Picker right Color Picker uh and you get a Color Picker here and you get your hex and your RGB and hsl and you can choose the color you want or if you're in VSS code when you get the little colored boxes on there you can actually hover on top of that and then you actually get a full Color Picker that pops up and you can just choose the color you want so there's really no excuse and then you can actually get the exact color you want uhz CU using the named colors it's probably get bad influences from people doing demos like I do but try and actually use colors most of the time instead of using the named colors cuz you don't know what you're getting with the named colors and the last one that we're going to look at and I think this is another one that people pick up this habit from early on uh because of the learning paths you go through early on where we're trying to cover how CSS works and so we're giving examples of how you can do stuff such as using IDs as selectors and so you start doing that in the early learning you're doing and you oh I guess that's just something we do we use IDs as selectors I'm going to get some push back on this because anytime I talk about this people are going to say this is part of the Cascade and you should take advantage of how the Cascade works and I completely agree for the most part but IDs are very dangerous to use because they're such high specificity they're hard to overwrite so for example this top area here is my ID of headline and I've styled it here and what can happen is you might be coming along one time and it's like it's a little bit later right it's way down in the future uh you 4 days later or something you're coming up on this project and you need to change the background on it and you know you have some utility classes or some other stuff that's like hanging around that you can use and so I'm going to grab this right here and I'm going to try and add that class or I already did uh add that class right here and it's not working because I have the ID here with a background color on it that is going to overwrite it because the specificity of my headline is higher and then you go oh that sort of sucks now the people that do advocate for using this would say well you know you should know how this works and there's ways of debugging it you can find this in your Dev tools and that's completely right you can definitely do that but it's just one of those things you'll run into and it's kind of annoying when this happens you might even be working in a team and then you run into like weird naming things like this and it's super frustrating the other thing is you might need to have a headline like this somewhere else on the page at one point and you have it at the top and you need this exact same styling for something that's going to end up down at the bottom of the page or something like that and then you have the styling linked to an ID you can only have one ID per page and then you're sort of stuck and you have to recreate it again just using the class in the first place would just make your life a little bit easier now I do think that IDs have their own place they can actually work well uh they're useful for finding things with JavaScript really easily they're perfect for anchor links super useful for things like that uh and of course occasionally you might want to style something with one it is as I said part of how the Cascade works but most of the time it's probably more likely to actually cause a problem down the road if it might not it might never come up but it's that one annoying time that it does where you're just like oh and then what do you do throw an important on the style you're trying to get to work uh which you know what if you have a utility class maybe using important it's like the one place where that actually makes sense CU now all of a sudden my background will become red so you know that is an idea that you could do but then do you really want to do that and bring important in there that's generally considered something you want to try and avoid in the real world though again maybe you could make an argument for them on utility classes uh but whenever you start running into specificity Wars and you're trying to up things all the time it just gets really annoying really quickly and with that a very quick reminder that if you're interested in CSS demystified there should be a card on the screen for right now and there's also a link for it in the description and with that I'd like to thank my enablers of awesome Philip Andrew 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 corner of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 76,540

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial, css mistakes, beginner mistakes, don't do this, collapsing margin, colors, css colors, named colors, positioning, css positioning, layout, css layout, flexbox, grid, flex, selectors, ids, classes, class vs. id, element

Id: P4oOR4frV_4

Length: 21min 38sec (1298 seconds)

Published: Thu May 16 2024