The reason why many people struggle with CSS

hi there my front 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 or 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 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 if we open up our Dev tools and put it in responsive mode uh we'll see that you know 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 a width 100 and the Box sizing shouldn't be there but um if you're going to do box sizing it should be on the 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 fun family your font size your text align 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 um 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 H1s throughout the site so you should only have one H1 per page just as a general rule and then everything else would be H2S 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 align Center and then I see here we have these all getting a text align Center and then down here we have the padding on them but especially like these text aligned centers and this has the text line centers then I want to look at it and go okay well these are text align 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 H1 in there and I have my paragraph there so if I wanted to in here there's the text line Center so we can turn that one off and then I can go on each one and I can turn that one off there it is uh and I'm just going to say like I'm doing this as a really simple example to 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 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 next to the line Center and in this case we don't have to worry about media queries or anything else just because like we want it to stay centered the whole time it gets a little bit more complicated uh if you're changing things within media queries but even then maybe you only are redefining 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 want to start looking at things bigger picture so let's jump over to this one this is by Adam elitzer and um here you know when you first look at the site it's nice it's clean it looks great um so you know 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 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's a 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 a 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 like you know the classes and everything that are on there if I come up to my testimonial card and I click on it cool not much changed one thing did we have 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 uh because everything else is literally identical and this is where bigger picture comes into play uh 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 gonna 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 uh similar to how Adam did here where it's a single class for all of them we have a testimonial card so it's not so zoomed in and then recreating the same thing over and over but right 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 but I could add a button to this and it would look the same and so you know we 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 could 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 um 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 planned this from the beginning I 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 by doing included I don't have a subtitle if I happen to include a button the button works if I don't 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 we call them components right because 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 because we need to switch all the variations that are all like actually exactly the same and so yeah let's 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 going to look at two examples of this are Band-Aid Solutions we're going to 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 alright 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 this area right there it's highlighting it on our page when I was looking at how this was created I noticed some 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 but uh 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 one to get rid of that space I mean see you tried things with clamp here on the height as well um but maybe he was just trying to make sure it stayed up high uh and along with the flex here if we didn't have the flex on that we wouldn't have it overflowing if 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 if we go small enough like now it was sort of working at doing what it wanted to do and I think you know I have every uh did I turn off something on the hero they're actually whoops the flex there so it does like keep things out and but to me that's like really like we're fighting to make that work right because without that it was it was coming down too low uh and often for me like the fix for something like that instead of like layering these things on top and then fighting with claps and then having to throw a display Flex in to center something within the area it's overflowing just seems like a lot of work um 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 it's 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 space this way it's 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 going to break that ratio and it's going to 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 uh 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 the max height on there and you know we we I broke something here we had the five REM that was there and oh five from zero we had that five Ram zero that was there now we're back to 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 uh here we 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 it's starting to overflow in there so and it's 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 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 going to be fine and now one last example we're going to look at is this one by ciao 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 um and we're just going to move the dev tools off for a second and let's say we come in here and I want to 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 uh but this is in my opinion where like when you get a little bit too clever with viewport units um and to me viewport units are a Band-Aid solution and 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 we everything is just working no matter what the screen size is uh 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 uh every 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 can do a whole video on issues with them but uh just to me this is a Band-Aid solution to try and make something responsive so I'm including it in here um as as part of it because you know here it sort of works well on this screen size but like if we go to this way uh and I'm not 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 uh so let's just say I add this in and so like whenever we come up with these layouts that are uh 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 uh 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 number 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 these 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 how you're doing things and that's going to impact the next step in 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 any 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 it you know 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 getting how 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 corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 58,260

Keywords: Kevin Powell, css, front-end, frontend, html, web development, how to get better at CSS, how to improve CSS, why is css hard, css fundamentals, learn css

Id: A6IpZ2GlMM4

Length: 19min 29sec (1169 seconds)

Published: Thu Feb 23 2023