 Hi there, my friend and friends, and thanks for taking the time to watch this video. Now, I'm assuming you clicked on this video for a pretty specific reason, so I'm hoping watching this helps you realize why you're struggling with CSS, even if you're going through tutorials, watching videos, or going through full courses. Despite all of that, you're still feeling like you're not improving and you're still struggling with CSS, so in this video, we're going to go over three of the reasons why that probably is. We're going to be going deeper into each one of them, but the very first thing is you probably don't have a good enough understanding of the fundamentals. You learn the syntax early on, and it's color blue, background red, whatever, and it's super, it's easy, it's declarative, and then you just took the language for granted and didn't really take the time to learn how it's actually working and really learn the fundamentals and implication that those fundamentals have. The second thing is you're not looking big picture enough. When that happens, you actually end up writing a lot more code than you actually need to be writing. It makes maintenance a lot harder in the long run because there's potentially different layers of things that you don't actually need to be there and there's implications of changing one thing that impacts another that shouldn't be impacted and it just creates a little bit of a mess. And so the first thing we're going to take a look at here is this project, which is by an anonymous submitter, but it's the final project of my free conquering responsive layouts course. And on first glance, there's little differences and little changes I may make to this just because I know the typography doesn't really match the layout, but everything's all right. And if we open up our DevTools and put it in responsive mode, we'll see that it's responsive. We got our hamburger menu that comes in. Everything's, it's working well. We're not running into overflows. The break points are working. We're getting the columns where we want. So like for someone who's, I'm guessing relatively early in their CSS journey, it's looking pretty good, but what happens is when we start looking into the code a little bit, it's where I start seeing some things that are going, oh, this could have been done in a lot easier and a lower maintenance type of way. And that's when we start relying on the real fundamentals of inheritance in the cascade. And especially inheritance, it's one of these things that people seem not to like get into very much. I don't know how to, that's a bad way to say it, but we don't use it. It's not taken advantage of the way it should be. And to highlight this, if we look in their code, you know, early on, it doesn't even look too bad. We have some stuff set on our body that we don't really need to width 100% and the box sizing shouldn't be there. But if you're going to do box sizing, it should be on star selector because this is not an inherited property. So right away that does also sort of go, okay, there's, there's probably some issues here because maybe there's a misunderstanding of what is and what isn't inherited. And just as a very quick rule, if it's typography related, probably is. So things like your font family, your font size, your textile line, all of those things, you know, you set it on your body and then everything that's in the body will get them. And if it's not related to typography for the most part, or maybe completely, it is, it's not inherited your margins, your paddings, your widths, your box sizings, things like that. But if we come further down here where I start seeing this really come in as potentially a bit of an issue is when I started seeing things like this, and this is another bit of a red flag, multiple H ones, especially lower down on the page since we're in the middle section, it makes me think that there's multiple H ones throughout the site. So you should only have one H one per page just as a general rule and then everything else would be H twos and so forth. If you want a video on how the heading levels work, I have a link to that in the description that goes into a lot more detail, but we're focused on CSS for now. So here I see the middle section left, central and right, all getting a text-to-line center. And then I see here we have these all getting a text-to-line center. And then down here we have the padding on them, but especially like these text-to-line centers, and this has the text-to-line center. So then I want to look at it and go, okay, well these are text-to-line center. That makes sense. But we didn't really need to redeclare it for everything here, because here I have my middle section left part, and then I have the H one in there, and I have my paragraph there. So if I wanted to, in here, there's the text-to-line center. So we can turn that one off, and then I can go on the H one, and I can turn that one off. There it is. And I'm just gonna say like I'm doing this as a really simple example. Let's just shrink that down maybe like that. But one thing I'll say was good here is they combine the selectors together, because I've seen this with three separate selectors. Like you're doing it three different times here. We're doing it three times, but with a single selector. So it's a little bit better. But I could have just come on to the middle section up here and done a text-align-center right there. And because it's inherited, everything within that section just becomes text-align-center. And in this case, we don't have to worry about media queries or anything else, just because we want it to stay centered the whole time, it gets a little bit more complicated. If you're changing things within media queries, but even then, maybe you're only re-defining it for the middle section. So it's a lot easier if it's defined in one place, rather than two or three or four different places. And you might even be able to use this where you're setting text-align-center, because most things are, maybe there's one thing in there that isn't, and then you can change the text-align on that one specific thing to change it from where you were. But that's really one of those things that not relying on inheritance for your typography stuff, it creates so much more code than you'd actually have to write. And it does make for a lot more maintenance, because when you're needing to make changes, you're often changing the same thing over and over in multiple different spots when you could be changing it a lot less. And we could keep diving into that project, but there's another one here that sort of goes into the next stage of not looking at a bigger picture. And I think there's a relationship there, but it's once you understand inheritance, then we wanna start looking at things bigger picture. So let's jump over to this one. This is by Adam Elitzer. And here, when you first look at the site, it's nice, it's clean, it looks great. So very nice on that, it's responsive. But when we open things up, and I started looking at it more, and at first I was like, oh, he's did a pretty good job. But then when he got to these cards, and this is a little similar to what we saw, but in a bit of a bigger picture type of way, where if we come in, we take a look here at what we have set up there. And this is what, I saw it said testimonial card. And this is like a really common thing. You'll have like your testimonials, and then you have your title, you have your testimonial grid, then we have our card, and we have each testimonial card in there. And this is super common to see. And at first glance, that's completely fine. But then when I saw testimonial card, and then we see this section down here, which is my class rates, and I was like, oh, they look the same. What did he call them there? And down here, they're just rate. And what's really interesting is if we look at the, if we look at, like I'm on my rate, and you look at everything, the classes and everything that are on there, if I come up to my testimonial card and I click on it, oh, not much changed. One thing did. We have a new font family and color declaration. That's it. And do we even need those? I'm not even sure if we need that because everything else is literally identical. And this is where bigger picture comes into play. Where, you know, if we're understanding inheritance, we're taking advantage of that as much as we can. When I'm doing this, I don't want to look at everything in isolation. And this is beginners often do this. They're going to go, okay, I created this section. Now I'm going to create this section and then I'm going to create this section. And it's a little bit like here, but like a little bit more zoomed out. Like on this one, we had like my left part, right, left part, central part, right part. That's like really not big picture because they're all identical. So we could have just done, you know, whatever, a single class for all of them, similar to how Adam did here, where it's a single class for all of them. We have our testimonial card. So it's not so zoomed in and then recreating the same thing over and over, but right underneath it, it's basically the exact same thing here and here. We have a button in this one. We don't have a button in that, I could add a button to this and it would look the same. And so, you know, we don't need to rewrite the CSS for that. Instead of this being a testimonial card, this could just be a card and this could just be a card. And we can just leave it like that, right? Have all of the same CSS for both of them and they'd probably work exactly the same. We saw that and even I'm curious here if we go back into that, we did see the one difference here was there was a few extra font family declarations. But if I turn, oh, the fonts do change. Oh, look at that. Is it a different font up there? I'm not even sure. There might be something else and we can see that's coming in there. So there's a few different things but I would even say that if we made these the same way or obviously there's something that's changing the color of these over to white. But if we took the same approach and we plan this from the beginning, I'm gonna have a card that's gonna have a title that could be blue and then with a paragraph that's white and this is a subtitle, then I could set these up to work in exactly the same way and write a lot less code. I have my card, you put a card title on it, it changes it to the right font size, the right font weight, the right color. My paragraph that's in there is there. If I happen to have a subtitle, I can have a class for that subtitle that's going to work. If I don't include it, I don't have a subtitle. If I happen to include a button, the button works. If I don't have a button, everything is fine. And so really like don't look at everything section by section as if they're in isolation. All of these things exist there and this is page to page to page two. Right now we're looking at a single page but you see this too where it's across multiple pages. You have similar elements or so call them components, right? Cause they're this sort of standalone thing that just works and you can plug it into different places and the more that we do that, the better and it just means less code for us. If ever we need to update it, it's one update instead of maybe three or four updates along the way cause we need to switch all the variations that are all like actually exactly the same. And so yeah, just try and big picture things as much as possible. Look for similarities in typography and colors and setups and border radiuses and all of these different things. And the last thing that I mentioned, we're gonna look at two examples of this are band-aid solutions. We're gonna stick with Adam's project here to begin with and we're gonna look at this section here which on first glance, you know, it looks all right. Let me just undock my dev tools. And we have this like responsive section here that's working, but then when I dug into how this was created, I got a little bit confused. And so if we look at the main class that's in here which is looking at like this area right there it's highlighting it on our page. When I was looking at how this was created, I noticed some weird things going on. But when I saw the max height on there, I sort of wondered about what's happening here at the smaller screen sizes. And then when I looked at it, it's like, oh, everything's overflowing, right? Like we have stuff overflowing at the top and the bottom which is kind of cool, I guess. And it happens to work here but it seems to have been one of these band-aid solutions type of things where they were trying stuff and it wasn't working and they just sort of kept layering stuff on top. Now this is partially happening because we have a max height. If I turn off my max height, you can see it's all jumping down because now all the content is within that height which maybe is part of what he wanted to prevent. He didn't want it like he wanted to get rid, whoops, this one, wanted to get rid of that space. We can see he tried things with clamp here on the height as well. But maybe he was just trying to make sure it stayed up high. And along with the flex here, if we didn't have the flex on that we wouldn't have it overflowing. We turn off the flex and that's just because it was a line center so it was actually moving things back up within that space, which is interesting. I don't think I'd realized that would actually happen. And while this is sort of, you know, it's working here at one point it does actually create a bit of a problem because we go small enough. Like now it was sort of working at doing what it wanted to do. And I think, no, I have every, did I turn off something on the hero there actually? Whoops, the flex there. So it does like keep things out and to me that's like really like we're fighting to make that work, right? Because without that it was coming down too low. And often for me like the fix for something like that instead of like layering these things on top and then fighting with clamps and then having to throw a display flex into center something within the area it's overflowing just seems like a lot of work to try and solve something. And like, so I just wouldn't put a max height on that. And that way this whole area just is its own little self-contained area and this next section is going to come after it. And maybe the margin here is too big. And so like when I see this with this clamp coming onto here to try and like control the height of everything in general, let height just do its thing. And if the height isn't doing its thing like maybe there's something you can do but like especially max heights they're really dangerous because they run into those situations where stuff will start overflowing because at one point we run out of room, right? And especially height is, we have height and width and the screen size always changes this way. So if our content is getting less spaced this way just it needs to maintain the same area. So the ratio needs to stay the same so it's going to gain in height. And as soon as we put a max height on there it's going to say, well at one point it's gonna break that ratio and it's gonna cause overflows. So there are times when you need it but in general we're keeping things simple don't use the max height. If you need to a min height can be okay. But here we could just do something and we're playing with calc and other stuff here so we could just come in here and do a clamp. So a clamp and we'd have zero for the left and the right and my margin top and bottom could be like a two ram comma 10 viewport height comma five ram. And now as this adjusts you can see that space on the top is changing and maybe that's, you know we can play around with these numbers and reduce them and get that to work. And it's a little bit of a playing around game but at least then you sort of get something that adapts a bit to the screen. You're just playing with the margin so you're playing with the distance between things and you're letting that area maintain that whatever space it needs and then it's just going to adapt to the space it needs and then you're not trying to deal with like how is it overflowing controlling things it could get it to work but then you'd change the content a bit if this paragraph here got longer in that other setup we could even try that if we came back to here and went back to how we had display flex and a max height on there and you know we broke something here we had the five ram that was there and oh five ram zero we had that five ram zero that was there and now we're back to where we'd started I guess I could have just refreshed the page but we got back to where I started but let's say this text here actually ended up being longer and so in the dev tools we can do that really fast here you just get into here and you know the client updates the text that you need to have in there and now we're running into a similar problem I guess it's not too bad eventually though you can see it's starting to overflow in there so and it's hitting the navigation on the top so it worked for that one specific situation but then it breaks now again because the content got updated and then you're trying to fix that and you're gonna probably come up with another band-aid on top of the one that you already had and it just gets very frustrating go simple, back things up try and find the simplest solution always and if you feel like you're trying heights and then this other height with the weird clamp with the viewport units and all these other things layering on top of each other you might just go okay let's delete all that start over again and as soon as you delete it and you just go back to the default maybe it's what you needed in the first place or maybe you realize that you just need some small tweak and it's gonna be fine and now one last example we're gonna look at is this one by Chow Cabral which is again it looks pretty well set up but if we come back into here and take a look to me this is when you just get a little bit too clever and we're just gonna move the dev tools off for a second and let's say we come in here and I wanna add a movie title so I like Star Wars and it's a cool little app where you can search for movies and okay there's a movie that I like we get the information on it and everything here but this is in my opinion where like when you get a little bit too clever with viewport units and to me viewport units are a band-aid solution so I'm including it in here I could probably do a whole tutorial on viewport units but we get into these situations where we feel like it's really good because it's this like super fluid thing everything is just working no matter what the screen size is because everything in here is based with viewport units if we come and take a look at how these things are all set up we start seeing things like the gap is a viewport unit the height is a viewport unit gap there again the width is a viewport unit everything the border radius is everything in this and I think I'm just looking at one part of it but like everything in this entire project is using viewport units and viewport units have their issues and they really should be a last resort if you're going to use them again I could do a whole video on issues with them but just to me this is a band-aid solution to try and make something responsive so I'm including it in here as part of it because here it sort of works well on this screen size but like if we go to this way and I'm not at like a ridiculous aspect ratio now but I can't even see most of the content and it just feels really awkward like this is where two columns would probably be better and so like trying to get things to work perfectly it's hard to do and then maybe the person's on a laptop that has like a little bit of a smaller screen actually the font sizes don't look too bad but let's say they want to make them bigger I'm zooming in now and nothing's happening and I'm zooming out now and nothing is happening and that's because viewport units aren't responsive to zoom in and out because they're based just on the actual viewport so let's just say I add this in and so like whenever we come up with these layouts that are completely done with viewport units just really like think about it for a second and is there a better approach because for font sizes they're problematic and a lot of the time at different screen sizes like if you start going wider and wider here I'm on an ultra wide if I really wanted to I could make this thing like super big and I'd probably just have this image and nothing else on my screen at the beginning so it feels like this magical thing that you can like push around and play around within all of that but to me it really is a band-aid solution to make something responsive without having to worry about it it's very magic numbery you plug the things in you feel like it works you have this nice cool fluid layout but it's not actually the best solution and it could be problematic especially with accessibility when I can't zoom in and out on the layout at all and so the biggest piece of advice that I can give you is to go back over the fundamentals go look at those early tutorials you did or find other ones that are really talking about the simple things and even if you feel like you're beyond that now because going back over the fundamentals when you already have an understanding of something can make such the world of difference to how you're doing things and that's gonna impact the next step and the next step because when you're making mistakes with things like inheritance or the cascade you're not taking advantage of those you're not taking advantage of how CSS works you're giving yourself more work and then that runs into things where you're making things less maintainable and that runs into band-aid solutions where you could be doing things in a much better and simpler way and the other thing with CSS is so much of it is about mindset and approaching it in the right way because we do have these responsive layouts and not these static things that we're just trying to build for and that really means that you have to think about things in a little bit of a different way and approach things in a different way so we're not just throwing viewport units in there and hoping for the best even though it's not an ideal layout whatever we throw in every situation and so if you do want something where I dive into that as I mentioned off the top I do have the free course conquering responsive layouts it is about learning how to make things responsive but a lot of it is about the concepts I've covered in here and leaning into the browser and taking advantage of the browser and how the browser wants to work and a lot of it is also about the right mindset and approaching things with the right mindset which just so happens to help us make things responsive in the simplest way possible so if you're interested in that the link to it is in the description below and with that I would like to thank my enablers of awesome Jan, Johnny, Michael, 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 corner the internet just a little bit more awesome.