 there my friend and friends. When you're learning CSS, you'll hear a whole bunch of best practices that you should follow that make your life easier. I talked about some of these, like I have a video that looks at why you shouldn't use m for font sizing and use rem units instead. And there's a whole bunch of other stuff out there that you hear like you should never use important, you should avoid element selectors and ID selectors and just use single class selectors for everything. No matter what you're doing, you should always go mobile first and the list goes on from there. And the reason for that is I equated a little bit to like riding a bicycle with training wheels on it. So that way they can just focus on learning the mechanics of pedaling and steering and braking, I guess, and not worry about the balance. Then once they have those other skills down, you can take off the training wheels and really then start getting into what biking is all about. And of course, there's the opposite approach to it like balance bikes where the opposite is true. There's no pedaling. You're just balancing. But the idea is you want to focus on one thing at a time while you're learning and you're limiting all the different things that you have to learn. So you're not trying to learn everything at once. But we take those training wheels off eventually, right? Because if not, they're holding us back. If we're riding a bike with training wheels, you can't go as fast, you're trying to turn corners, it's actually easier to fall over. And it's a little bit like that with some of these best practices with CSS as well. So one example, there's what I just mentioned off the top with never using the m units when you're doing font sizes, because that's a very good general rule, especially early on where you can really run into issues with compounding and just fonts going out of control. But once you're more comfortable with CSS, and you understand more of the impacts of these types of things can have, then ms can actually be a very good tool to have up your sleeve to use in the right situation when dealing with your font sizes. So if you're past the very basics of CSS, and you're ready to take your training wheels off in this video, we're going to be talking about many of these best practices and the ones that we don't actually maybe need to follow. And sort of maybe the limitations of when we don't follow it the way they can get in our way when they do, and at least one along the way that we should probably stick to. Now the first one I want to talk about is using a class selector for everything. And the reason that we do that is because we want to have the same specificity for everything that we're doing. But there's, you know, some advantages to having element selector. So here's a very simple page, I haven't done a lot on it. But I am using my class selectors, I have a general body selector, I have the star selector here for my box sizing, my image as some of these you might see as like resets. But I am setting colors on my links. I'm doing a little bit of stuff with fig captions and block quotes and other things before I eventually start getting into having some classes for different things. And for me, if you're completely avoiding element selectors, you're going to be doing a lot more work than you actually need to do. Because by styling up things based on just their element selectors, you're setting the stage for everything else. And this is going to come back a little bit when I talk about why mobile first for everything might not be the best idea. Where the idea for me when writing CSS is you want to write the least of CSS possible to accomplish something. So like for me, it makes sense just put a link and set up my colors and my hover and all of that like this, then having to always have like a link class on everything when it doesn't really serve a purpose. And then if I do get to my navigations, well, there's other ways that I can style these that are going to be lower down in my CSS file and have higher specificity, because these are all super easy to overwrite because they're single element selectors anyway. Now the other one that comes up is people saying you should never use IDs as selectors and just use classes for selectors on everything. And this even could be where using an element selector could get you into trouble as well. So I want to sort of cover all of those things and talk about why class selectors can be a good thing at the same time over element selectors sometimes. But like right now I have this header here and I have a nav in there. And this is my only navigation on the entire site. So I could come in here and I could style that just by coming in and saying my nav and I could start putting styles on that and there wouldn't be a problem where this potentially could become problematic. And one of the reasons I tend to have a class of primary navigation on the one at the top of my page is because very often you go all the way down and you'll have a footer and in your footer you'll have another nav and the nav down here probably will be a little bit different from the one here. Often there's a lot more links and you have sort of a full site map almost in the footer nav or that's very common on certain types of websites at the very least. And I don't necessarily now again it depends completely on the context of the project you're working on but you don't necessarily want to have it so your nav is the same in both of them. So setting nav here could potentially be dangerous. So then this nav could be a class of footer nav right. So you have your primary nav at the top of the page. Let's just make that a bit bigger. We have our primary nav at the top of the page here and then we have the footer nav at the bottom and then I can select them with a single class selector. But if this is my only primary navigation could I come in here with an ID. And I guess you could. I'm the type of person I generally don't style things through IDs. I don't really see the benefit of styling something through an ID and I find well it generally will never get in the way if it's my only primary navigation. So using an ID would probably be fine. It's just one of those times where I do feel like this is raising the specificity for no good reason. So I tend not to do it and it just becomes a habit of using a class everywhere. And it is actually very possible that this navigation and the footer navigation end up being styled and looking almost identical. So maybe I'm actually going to use the same class in both places and then if it's an ID I can't use it. So classes for me are a little bit safer but that's not to say you can't use element selectors. Just be very aware of sort of the limitations of using them if you're going to use them. And by having higher specificity sometimes that's actually a good thing but you just want to be a little bit careful with it and be very thoughtful if you're actually going to be using one and not just using them all over the place because this is actually a mistake that I sometimes see is people using IDs quite frequently in their style sheets and then all of a sudden they have to sprinkle importance into them because they need to overwrite a class that they set somewhere else and things can get really messy really fast. So I do understand the idea of having ID selectors but I do want to caution just to be careful if you're going to do it and be very thoughtful and make sure you understand the implications of using an ID selector if you really feel like you want to use one. And that sort of does lead to the next thing that I want to talk about which is still in that same vein of the say we have my I decide to go with my primary navigation. So let's do that primary navigation right here and that's going to be along the top of my page right. So well maybe I want that area and that's my area here. So my primary nav I want to you know get this styled a little bit differently and I have my ul here and my li here and if you really go by the strict class selector for everything then I should probably come on here and do a class equals nav list and then I would come on these list items and I'd have a class on them of like nav item and then on all the links we could come on and do a class of nav link and by doing this you're just making sure everything has the same specificity so if ever you need to overwrite something it becomes very easy to do and I'll show you an area this could potentially get you into trouble in a way but I tend to do my primary navigation and then just choose the ul like this and then we can do a display flex and a list style none and let's add a gap on there one ram and it comes together and I you know this to me is completely fine and one thing people complain a little bit about when it comes to css is that css has this global nature to it where you're getting scoped css this is sort of scoped css I'm saying my ul that's in my primary navigation and then I could do the same thing where I could do primary nav navigation a and then on that I could come in and say that the text decoration is none and I can remove my text decoration from them and then maybe add them back on and hover hover or whatever it is but it's just you know this to me is in problematic even though it's boosting the specificity but that's okay because I sort of am running into this situation where these very specific links that I want to style differently anyway the one time this potentially could give you a problem if you did something like this is let's just say I said the color on these was I don't know green just so we see a change and for some reason you have a utility class so let's just call it color purple and I say that this has a color of purple and I need one of those links to actually have that purple color on it well I can't do that because if I come here and I do class is equal to color purple and it's not working and it's not working because this has a lower specificity than that one does so if I remove that now that middle one does get the purple style on there because these are both class selectors this one is coming second so that one wins so it's one of those things where you do have to be aware of that potential getting in the way if ever you needed to do something like that but to me you're probably not going to do something like that and then you could say well that's where you throw an important on there or something that's not where we'll talk about important in a little bit but this to me isn't something that should generally come up too often and if I really needed one of them to be different I'd probably have a different way of distinguishing it but yeah just to say for me I don't have any issues with this uh one of the reasons you'll hear use a single class selector everywhere is also when you're on larger teams and there's lots of people that are in the CSS and writing CSS it just prevents people from doing something like a ul lia and then what this is doing is boosting the specificity of it for no reason whatsoever um or I guess that's this one would be here the ul lia right so there's no real reason to do that it's not going to cause any problems most of the time but I don't feel like it's actually accomplishing much either and it's just faster to write this I know some people who really do still want to be explicit with it and in some situations you do want to be explicit in the way you're nailing down within your selectors but if you can get away with it I do like the idea of keeping the specificity lower but I think scoping our styles like this there's nothing wrong with it at all in my opinion now the other one that I've mentioned this a couple of times now uh off the start was dealing with m's and let's say we have my title here CSS best practices are they really for the best um and what we could do is I could come in here and I could put a span here and wrap this all in a span and so I have my h1 and then the spanning guess what on an h1 you don't really need to have a class on that because you should only have one h1 on every page too um but we could have either I I tend to have a site title class just because I'm so used to doing that but having an h1 that is your site title like it's sort of what it should be but that can change depending on layouts uh and the one thing in a way I do like separating style from the look of a heading just so we don't use headings in the wrong way because they're very intentional on how we should be using them if you'd like more information on that there should be a card popping up somewhere up there right now um but so actually we'll come in and we'll give it that site title because I actually have a class for that uh site title and so let's go look at our CSS and let's go find that site title class and it's right here and it's using a clamp to set the font size and if you're not familiar with clamp it just uh it means that I'm using viewport units in the middle so it can grow and shrink but the clamp will stop it from growing more or shrinking more uh but you know we have this growth factor in the middle and then I have my maximum font size and my minimum font size right there and one of the advantages with using m's here is let's say I did my site title and then we choose just like I said before I do this all the time site title and then choose the span inside and I could set the font size and then I could try and come up with another clamp to muck around with that or I could just say it's gonna be 8.6 m and let's also do a well just do an opacity to lighten it up opacity of 0.7 maybe uh and I guess the line height line height of one um would actually that's impacting this one as well so that's not I won't worry too much about the line height but you can see that the font sizes this is smaller and it's 60 percent basically of of what this one is but that means as that big one is shrinking and growing the other one is shrinking and growing with it because this is set in m so the font size of the span is completely reliant on the site title itself and of course you could go the other way with this as well where you know if you need something to be bigger and you're setting a set font size and then you're purposely saying this other font size should be either bigger or smaller and it's always going to be in relation to that base font size that you have and this is one of those things where I would not use m for all my font sizes it's just one of those things that you just need one misplaced font size declaration somewhere and it can muck up a whole bunch of stuff so it can get a little bit dangerous but when you use it intentionally you use it for a specific purpose to accomplish that compounding thing that could get in your way then it's actually a really smart way to do something and it makes your life a million times easier so I think we'll bring this one back down because it's a little bit big and we can stick with it um on something like that now as we're going through this I have a couple more that I want to talk about but first I just want to say like for yourself to be able to make these decisions if you've been writing CSS for a little while now and you're sort of comfortable with what you're doing you know you're not an expert that's completely fine but you're sort of getting a little bit more into the swing of things and actually recommend that you rewind a little bit and you go back to the basics and some of the early things that you learned because when we first are learning it we're learning the syntax in the box model and all the different properties and all the different values and the units and there's just there's so much information overload which is one of the reasons that we get all of these trade things that are basically training wheels to sort of help us out so we don't have to worry about everything and then what you can do is later on go back over those fundamentals and see like oh man I talked about the box model I got a rough idea of what it is but I sort of understood what it was but it wasn't the focus of what you're doing there you just sort of got okay I can set wits and padding on stuff and then by rewinding and going back over some of these things again it can actually start making other things that you've learned along the way make a lot more sense and I always recommend people sort of stop at one point and go backwards because it actually can help you go forwards a lot more you know it's the one step back three steps forward type of thing and if you'd like a bit of a learning path to be able to do that sort of thing I have a course called CSS demystified where the first part of the course is all about that idea of revisiting fundamentals you already know about and then the second part is going over what I like to call the unknown fundamentals like formatting contexts and containing blocks and some of the other things that often don't you don't hear enough about and this course is really for people who've been writing CSS for a little while now they're sort of past that beginner stage going into the intermediate stage or they are intermediate but they're not really confident in using CSS and they're trying to get gain that confidence and they're just struggling to make that next step with it if it sounds interesting to you the link to the course is in the description below and now I guess we keep on going and the next one that I actually want to talk about is the idea of mobile first and how I don't think you should always be going mobile first it's a really good best practice I think it's a good general rule of thumb in a way but I do think there's times where you want to avoid it and one example is this space tourism site that I built out that has this navigation here and if we open up my dev tools and we'll go into responsive mode just so we can see if I make this smaller and just if the responsive mode is this little icon here firefox has one too it's there in your dev tools so if you want to get it it's not people always ask me about it but you can see the navigation changes here and then it jumps over to this mobile navigation here where we get like the slide out with the hamburger menu when I created this in my video on it again it's linked I'll link it in the description but there was a commenter that got really upset that I did use a max width media query here and you can actually see that this one here is a max width and here I have a minute of max and then I think these are just the max widths maybe um but this one is a max width media query um which and yeah here's like one of those ranged ones and this is something I don't tend to do very often but in this case it made sense to me and the reason I did that is just because the navigation at this stage is pretty simple we throw a display flex at it the items sort of go where they want now I'm setting up like as much base styling as I can here so I'm setting up like my primary navigation I have a gap that I can use I have my list style none my padding margin all of these things can just be applied to it because these are going to be universal across every single font size but if we come and take a look inside my max width media query here I have a lot of different things that are being added here I have a position fixed with a z index because it's positioning I have an inset which is your top bottom left and right um I have my padding I'm changing the margin I have a flex direction on there there's the transform because it needs to slide in and out and there's a lot of styles for hamburger menus in particular often that we're adding we have to have an open state in a closed state and all these different things there's a lot of extra complexity at the smaller screen size that we don't have at a large screen size for a navigation and so for me the idea is less so let's do things mobile first and instead it's take the path of least resistance and of course that's just setting all of this up then I also have that toggle that I have to deal with and I have to you know do I have to style a toggle to be in there that I don't actually want to be visible so like why should I have all of these styles set somewhere that then I have to remove somewhere else if I can just put them in a max width media query right there's all this stuff that's coming in there and maybe then I have a few other things and here's a min width media query most of the stuff I do will be in a min width media query or no media query at all because I want to do as much styling as I can that's just universal across every screen size and then I'm going where am I adding complexity if I'm adding complexity at larger screen sizes which is tends to be what happens your layouts tend to get a lot more complex so like if we come and take a look at this let me get her to the way when we're looking at this like or let's go look at the destination page whereas like if we take a look at small screen sizes here they tend to be a lot simpler right where everything just stacks on top of each other so as far as the layout goes there's not a lot of complexity here so I can style all of this up without any media queries I just style it up it's all just stacked set my font sizes set everything up and then I worry about the layout getting more complex oh look here we have to go to two columns so we're adding complexity in in a media query then over here we can add more complexity we're getting this is going to two columns now and the layout's changing a little bit more adding complexity and as the screen gets bigger which is normal so all of those go into a min width media query whereas the navigation there's a lot more complexity at the smaller screen sizes so you might as well throw that in at a max width and in a navigation is the common one that I always talk about but I guarantee you there's other situations and other things along the way to where there's like this element is so much simpler on larger screens and much more complicated on small ones you might as well put it into a max width one so when you do get to those larger screen sizes you're not using a media query to try and overwrite a whole bunch of CSS you've already done and that leads me to the last one that I want to talk about which is we can go back to this original one that we were looking at and I sort of mentioned it with that purple example actually of using important and if you want to use that I think if you have utility classes that you just want them to work all the time maybe you could come up with a good reason to use important I doubt it though it's not true I do think you can get away with using important if you're using it in a very specific way and again utility classes tend to be that one area where you just want that utility if I'm doing a dot you know I'm saying that my color is purple I want the color to be purple and I want it to be important I want it to be purple no matter what and the advantage of with that being on import you can see I don't use it much I can't spell it but the the reason this might be okay is because it's a single class meaning if I needed to change it I could just remove that one class and the only impact it's going to have is that one thing that it's doing so if it is on a utility class it's probably not the end of the world whereas if you're mixing it in like say I did this instead of doing it there I did that on my primary navigation right here on the links and I had the color coming in as purple and then we have the text decoration and then I have a font size of 0.75 ram or whatever we're making it super we'll do I will make them really big not really small whatever I'm coming in with a whole bunch of styles on something and I have an important mixed in there that's where things get dangerous because then how do you overwrite that because you don't want to remove all that other stuff but you have this guy floating in on there so I tend not to use important on anything I generally the only times I see important used is when people have gotten into trouble with using an id selector somewhere or going kind of crazy with other stuff and where they haven't thought of the implications of it when they were creating some weird selectors and then they have to come in with this or you're using like a page builder that's doing something and then you have custom css coming in on top of it stuff like that it's good to know how important works so when you're stuck in a situation where you have to use it you're able to get away with it I would generally say try to avoid it because even with utility classes you probably don't need them in the first place you can even have like layers and cool stuff now that we can do that I'm not going to worry too much about right now but you can actually just make sure your utility classes are always going to win so in general probably don't use important but know how it works just so you can use it if you have to use it because I guarantee you you'll write you'll get a legacy project somewhere along the way where you have to update something you might not have a choice so knowing how it works is a good thing and there might be one or two situations that you could actually set something up where it's not a terrible idea but you probably don't need it so maybe just don't use it would be my general advice on that front and I'd like to know what you think of any of these ones I've said am I completely wrong let me know in the comments do you have other ones I didn't mention that you think are completely fine that people are always saying don't do this leave that in the comments down below as well I'd like to know all of your opinions on this so please leave a comments down below and let me know what you think about all of these things and tell me about all the problems you've run into in projects where you came across where there was important being used and it just screwed you up completely I'd love to hear about it and I think the one thing that this does boil down to and sort of the the wrap up of this idea because there's many others I could talk about but it's that there's many ways to skin a cat but just don't feel like you have to adhere to very strict ways of working but do know why people suggest it so if they say always use class selectors everywhere a single class selector everywhere why why do you think that's a good idea and if you start running into problems where you're using descendant selectors like I'm doing here you'll start quickly going oh I guess I should and even this one you know maybe even if it's like this and then you end up with that second nav so you're going oh I'll do a class now so I can be more specific on what I'm doing and then eventually maybe you run into an issue with that even whatever it is but by understanding why those rules exist that's when you're allowed to start breaking them because you probably have a good reason to actually break it and it makes sense in the situation that you're in and it's also the fun of CSS where there's lots of different ways to accomplish the same thing sometimes another example of that and it's I guess a bit of a joke or meme these days is centering with CSS which has gotten a lot easier because we have flexbox and grid to center things now but sometimes we're not in a situation where we can use flexbox or grid because we have a position absolute or fixed or whatever it is so if you'd like to see five different ways we can center things without flexbox or grid and some of them are really bad ideas and some of them I think are actually pretty good ideas you can check that video out where I look at those right here and with that I would like to thank my enablers of awesome TTLLD Andrew James Michael Simon Tim and Johnny 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