5 CSS mistakes that I see way too often

in this video we're gonna be looking at five CSS files the first four are common mistakes that I see lots of beginners making a lot of questions that come up and come to me are because of these types of mistakes they're making in their CSS and the last one is something that from beginners all the way to experts a lot of people are making this mistake and I want to make sure you're not making it in the site's you're creating so let's go and see these five CSS files hi there if you're new to this channel my name is Kevin in here my Truong we learn how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials and what are we waiting for it let's jump into the very first foul which is overly complicated selectors and I see this all the time as people are learning how CSS works they sort of push things a little bit and it makes sense why they do it but it's something you really need to try and avoid doing and it's something I'm a little bit guilty of as well so we're gonna start with a basic example and then we're gonna look at one that's a bit more complicated that I actually did in a previous video of mine and how maybe I could have done it a little bit better so the first thing is just looking at this which is a common way navigations will be styled and you see tutorials that are like this online all the time and there's a problem with it and these compound selectors are getting complicated for nothing now in the old days we had to worry about performance and the more like these compound selectors that were getting more and more intense they actually would have an effect on performance these days the effect is so small it's really not a worry it's just about making your CSS readable and super easy to understand and just simplifying life on everything so there's really no reason on any of these that they need to be styled this way like my list items that are inside of my UL buy list names have to be any UL anyway and they're in the nav so you know the first thing I would do want something like this is I would take all of these out just to make my life a lot easier and make all of this a lot more organized because now I can see it's my nav link hover my nav link might have list item my nav ul I don't have to read through it so it's not something that's overly complicated to begin with but why increase your cognitive load even by like a smidgen if you don't have to keep things as simple as possible and if you really want to first off I do see IDs used a lot there's nothing wrong with using IDs and necessarily but the same way that we're raising the specificity of something when we're using a these compound selectors we're also doing it by using there's nothing wrong with IDs it's not really a foul but you'll see lots of people don't recommend it in this case I would have used just the nav element anyway so we could just use our nav like this or I might use a class on it and if you really want to make things super readable in your CSS it does take a little bit more work in your markup but you could give all of these a class and then I could have nav list this could be my nav list item and this could be a nav link and then of course my nav link cover now as I just said it does mean you do have to go and actually give all of these a class in your markup which you might find annoying and redundant a little bit but it definitely does make your CSS a million times easier so it's definitely one thing I do recommend to beginners and just anybody really is start giving more classes in general it's like a little bonus one I'm not even including that as if I will just use classes for everything it does make your life a little bit easier but I tend to do this for simple things a little bit of compound selectors and nesting and your CSS I don't think is a big issue because it's still super easy to understand just don't go many levels deep the complicated one that I told you I would look at is something like this with this really complicated selector right here where we're looking at anything that has the attribute of checkbox type checkbox so it pretty much means I'm selecting all my checkboxes if it's checked we want to select its sibling we want to select a label only if it's an adjacent sibling so this plus symbol means adjacent sibling selector so a label that has an adjacent sibling that is a checkbox that is checked and inside of that label we're selecting the custom checkbox and it's like whoo that's that's a complicated selector I had a good reason for doing this because I was doing a custom checkbox and custom checkboxes you can't actually really style a checkbox so I created a custom checkbox and I had it in the label so the only way if I checked my actual checkbox to make this work anyway you get the idea that it's a little bit of a complicated thing that I was up to if you want to see that video you can check it out there should be a card popping up for it now but basically what I would do in this case is maybe a class on this would make my life a little bit easier so if I instead have done this if I use class like checkbox so my checkbox checked I think makes a little bit more sense now this isn't complicated to begin with so either way I do think this would simplify things a little bit by using a class but leaving it like this is you know I don't think it's the end of the world but a comment here would really help now when I did my video I didn't put a comment because I don't put a lot of comments because I'm already explaining things orally but if this was a production website putting a comment here I'm coming back to my own project in three months I don't want to find this selector and start having to look at it and study it a little bit I mean I could figure out what it's doing but it's gonna take me a few seconds to sort of analyze it I don't want to have to do that or if somebody else is coming to this project again they might be able to analyze it or they might just be completely lost so putting a comment here saying creates a check in my custom check box to replace the hidden actual check box something like that to explain what is happening here and what this is styling could be really really useful all right on to foul number two which is make sure CSS is readable use empty space guys I think now you might be going I've never seen someone write CSS like this oh this looks like a minified file almost and it sort of is I see a lot of beginners writing CSS like this I teach in the classroom I see my students doing this even though I explicitly tell them over and over and over again not to and I've had people send me code asking for help on stuff and I can't read it because it looks like this and I have to run prettier on it to help format it properly so I can actually see what's going on a little bit better I think the reason that beginners tend to write CSS like this sometimes is it looks really clean and that it's really easy to see your selector and it does look nice and clean and at the beginning when you're first writing CSS you're not putting a lot of properties on something you're doing something like background and padding and then you're moving on to the next thing because you don't know a lot about CSS yet so when you only have two properties or three properties on something it's not super hard to be able to read this but even my UL here which only has four properties on it it you know I have to sort of analyze what I'm looking at a little bit more than or I'd like to and then when I get to this like this is a nightmare I even have two sided scroll to see everything that's on that you know so if you did this and then somebody you know somebody higher up or the client or whatever it is comes back and goes at me we'd really like the underline to actually be on there you know I can find it I can read through and I think I can find it in there but it's making your life more difficult than you have to so there's no reason not to format it and if you're looking for a job in this industry start formatting your CSS properly so just coming through and if you ever want to work with other people and you're not doing this it is a bit of a nightmare so please please come through space things out don't be scared of empty space in your CSS you want to make it as readable as you can but when you're writing it the first time any text editor you're using it's automatically going you know you don't have to worry about formatting it it's already putting these tabs and everything in place for me as I'm writing my code as long as I'm pushing return it's not that much work to push return as you're writing some code so take the time to put that empty space in your code and to format your CSS in a super readable way because it's a lot easier to look at oh there's my selector and then here's all the properties that are on there the next file is a very similar one then we just saw it is staying organized with your CSS and yes spacing things out this is part of being organized but what I mean this time is use comments and group your things in ways that make sense because the amount of times I've seen people do this and it's usually beginners that have smaller CSS files so it's not that hard to find what you're looking for because you scroll up and down a little bit and there it is but the amount of times I run into a stylesheet that looks a little bit like this where it starts off well I got my Bobby mage one mage two everything's looking good there's my link Styles header okay now we have button styles that that's let's go oh section two wait I have another button style here and okay that's cool footer and then section this is a really small file but it's already a little bit confusing like why is section two in the middle of my buttons maybe the footer would make more sense after my section but wires you know even I have footer but then I have buttons and then I have my header all the way at the top try and keep things a little bit more organized the way I tend to do it a is use comments so here I'd put global Styles sometimes even a really big comment something like this to do like different sectioning can be a really nice way just to break things apart and keep it really really nice and organized and you just have to do it one time and then you've sort of created this thing you can just copy and paste so I've made global styles I tend to put typography next but if you have layout fine type type type ography so h1 h2 my links can go in there and then I can come down into my layout and in my layout I would have my header but I'm knocking out my buttons my section 2 would go in there so I could take section 2 and bring that up into here and then I'd come back down all the way to here and find these let's bring those up and then I think it would make more sense for the global section 1 here to come before my section 2 and then I have my button so this is like layouts then I could come down into here and have like components components and inside my components I could have my buttons and then they could have other sub components as well your cards other things could fall into like these sub categories and if you want to be really organized you could even come up and create a table of contents that has the order of things and the cool thing with this is you're telling somebody all the stuff that's in your CSS file so if I put one global Styles to typography 3 components and then I could even here put a three-point one buttons I would probably number them in here as well but just to show you if I do a search now for buttons so I can do a find run four buttons it finds it there and then I go for my next one and it's gonna bring me right to that section that's way numbering it would be good too because you might have classes or something that have it but if I want to find something I just have to look at the table of contents which is at the very top of my stylesheet and then run a search for that and it's gonna bring me exactly to that section not something I do in my videos usually because I'm just running through and we're looking at specific things but on a production site if you're not using something like sass or less where you're building out partials and you're sort of you're partials is almost like your table of contents if you're just running off one big stylesheet I'd really recommend at least organizing it by group and if you have a really big stylesheet creating a table of contents or if you're working in a team creating a table of contents can be a really good and really useful thing unto file number four it's when people don't refactor when it makes sense to refactor and if you don't know about refactoring code it's when you change code a little bit as you're working through it and this is what I sort of did here when I read organize this because sometimes you're working through something you do your h1 your h2 you do a little bit of this and then you need to make some buttons so you start styling your buttons and then you need to do some layout stuff and then you need to do something else and it gets really messy so going through your code and reorganizing it a little bit as you're working or at the end once you're finished working can be really useful and the best time for me I find when it makes sense to refactor is when things get messy but also sometimes you're in the middle of writing something and you just realized you wrote the same really similar thing multiple times so for example when you're setting your font weights on things sometimes you use mine ago font weight 900 and then you go oh man I need to put that same one here so font weight 900 okay it's not that bad you only oh I forgot I also have my strong tag I don't want that defaulting to 800 I really want it to be this black one 900 oh man I'm repeating myself a lot here so sometimes it seems longer in the long run to do this because you've already set it all up or you were in the middle of writing this and then you just realize that you're doing the same thing over and over again but coming up and taking the time to make this change when you catch yourself repeating yourself over and over again and I can come through and put my font weight 900 all in one place because now if I need to change it I don't need to change it in three places I can change it in one spot personally when I have selectors like this where I'm selecting multiple elements with one selector I tend to put that at the beginning and then I run into all the individual selectors after that it will help you out in the long run even though it might seem like a little bit more work at the time when you're creating something like this so I'd really encourage you to take the time of doing that when you catch yourself writing the same code over and over and over again and on to foul number five I'm going to switch over to UM so this is from another video that I did where I was looking at chain where I was looking at how we can change the background color and the navigation when we scroll if you want to see that video there should be a card popping up for it now but what I want to look at is what people do is they remove the outline from items now this is also common in forms um so if you don't know what outline is it's I'm sure you've seen it when you tab through a page and you can see that it is highlighting it with this blue glowy box and people don't like this chloë box they get annoyed by it I find on links it doesn't look that bad but you can see when you get on two buttons if you've rounded the buttons on there it doesn't look super nice but isn't that really useful to know what I'm on um so what people do is they come through and they'll give a focus of outline:none so they're removing the outline from their page now the problem with this is let's refresh this page so now we have there's no outline on it so if I came onto this page and I were to click through and I'm tabbing right now I don't know what's selected and maybe you don't use tab to navigate a website I use it on forums all the time and sometimes I will use it to go through links really fast on a webpage so this is for any link whatsoever by default there is that outline on it now while most people might be using a mouse or their phones are really popular now so outline isn't you know if you're on a phone or tablet the outline might not be as important but there are still lots of people who navigate pages using a keyboard whether they're disabled in one way or another or if they just prefer to navigate a website like that so now that I'm pushing tab on here I have literally no idea what's selected i pushing it there's nothing showing up if you don't like the default outline that's fine but one thing you should know and you might not know is let's remove this and I'm gonna save that if we look at it in Firefox so here's Firefox the default outline is actually different from Chrome and which is all the WebKit browsers so I'm guessing that edges there now and Safari is the blue glow whereas Firefox and other browsers they might look a little bit different there's nothing wrong with styling a focus state and this focus could be anything you want but always style your focus state so you could remove outline:none you could say I don't want an outline but I'm going to do something else if you so you could start off by saying everything has no outline on it I'm gonna remove my outline from anything that gains focus if you do this though you have to make sure that you're going through and you're actually adding in a focus state back to things so if we're looking at B's here with this underlined I've created that on the hover but I didn't include it on my focus so we can come down here here is my hover State for it so I could take that exact same thing that I created here and put it in but also put it for my acha state don't forget the comma when you're doing this so we have our two different selectors and when I do that when i refresh here if I come through on these you can see as I tab through there it is actually highlighting it or in shift tab and you can always go backwards so I'm getting this nice focus state same thing on my buttons now if I tap again it doesn't I'm on selected this login button there's no visual indication of that who knows where I am so I'd want to come on these buttons I have my hover I want to take the exact same selector and just come through and add it on the focus as well now your focus and your hover do not have to be the same you can style them differently if you want to but the simplest solution is to do them both so now you can see when I tab on to that it looks like it's selected and I could do the same thing on all my buttons you do it on my links you can make things look more bold I'm actually am put a link in the description to this that's going to be a lie project and sort of the recommendations on it so their main thing is if you are removing a outline from the focus just first of all you shouldn't do it but if you do think it would look better or you're going to do it find ways that make it really obvious that that item is selected right now you don't want to just turn off this outline and it is something that has been a big problem on the web for a long time do not do it and one of the big advantages of doing it this way also it is going to be consistent in Chrome or in Firefox now so I am back in chrome now if I go through on here you can see I'm getting the exact same experience in both of them so if that is something it's important to you and trying to keep similarity between your browsers giving your own focus States is one way you can do that and that is it except wait no it isn't I'm gonna give you a little bonus now for all of you who stuck around until the end and this is less of a file when it comes to CSS necessarily it's more of just a design one where as well I guess the last one was a CSS file but in terms of accessibility this one is also in terms of accessibility this is like literally just a design foul which is make sure your contrast isn't too low you'll see lots of websites if you go to like theme forest or something like this you'll see a lot of places that create these really nice layouts and one of the things they do is the contrast ratio on some of the text is really light you can see here this is giving me a warning and this is with chrome you don't have this in Firefox and in general I prefer Firefox is dev tools but in chrome if you open up your inspecting use this little hand thing you can get this contrast ratio which is amazing so you can see here I'm getting a check mark by contrast is high enough here it is not high enough so just make sure you're going through and finding numbers that are high enough you definitely don't have to have your paragraphs the same color as your headings and even I would discourage it but just make sure that even if they are a different color that you're getting a nice little check mark here on your contrast ratio and make sure that a lot of people can read it cuz you might be young you might have amazing eyes other people out there are getting older like me it's not always super you go with a really small font size and with this really low contrast ratio and it makes it really hard to read I find out white people don't make this mistake too much but on dark backgrounds my goodness some people go with really dark text as well and it becomes really hard to read so check out that contrast ratio make sure that it's high enough because you want to make sure everybody can read your content so that is it for this video I hope you liked it if you're new here you haven't yet subscribed and you did enjoy please consider hitting that subscribe button getting weekly videos just like this one are there any fouls or things that you see people doing in their CSS that are clearly bad practice please leave a comment down below and let me know the ones that hurt you the most thank you very much my patrons for helping support everything I do here on my channel and making everything I do here possible you guys are amazing thank you very much for watching and until next time don't forget to make your economy internet just a little bit more awesome

Channel: Kevin Powell

Views: 241,184

Rating: 4.9137912 out of 5

Keywords: Kevin Powell, tutorial, html, css, css mistakes, css fouls, css best practice, how to get better at css, common css mistakes, ways to improve your css

Id: iHEkRIF7zxI

Length: 19min 2sec (1142 seconds)

Published: Thu Jul 25 2019