Are you using the right CSS units?

how to pick which css unit to use in which circumstance i wish this was an easy question to answer but it really is one of those it depends types of questions but in this case the it depends does actually depend on some things more than others so in this video i'm going to try and come up with the best generalizations that i can before we really dive into it i just want you to remember there is always an exception to pretty much all of these rules these are just rules of thumb but if you're just breaking away from using pixels and you aren't sure which unit you should be using in what situation hopefully this video will help you out are you declaring a font size if so you probably want to go with rem rem are like m in that they're relative units but in the case of ram relic they are relative to the font size of our root element which is our html element most of the time that defaults to 16 pixels and you might be going well if it is 16 pixels why don't i just use pixels but ram are better than using pixels because they adapt to the user's system and browser preferences whereas if you use pixels you're going to lock things in and you can overwrite a user's preferences i'm not going to get into the nitty gritty of all of it but if someone is taking the time to change their browser settings to have something default to 21 pixels and you overwrite that with something that's really small because you think it looks better i know if that was me i probably wouldn't bother sticking around one of the reasons people don't like using rems is working off a base 16 can be hard or they don't like that idea now i've been doing it for long enough that i'm actually pretty used to doing it but if you don't like the idea of doing that you can actually set the font size on your html element to 62.5 and when you do that it sets the base font size to 10 pixels and it just makes the math a lot easier that way if you want something to be 21 pixels you can set the font size to 2.1 rem because 2.1 times 10 gives you 21 pixels now just earlier i did mention m and while i love m i generally would avoid using them to set font sizes if you really want to know the differences or more about m versus ram and the types of issues you can run into with either one of them i do have a video that compares the two and shows you the problems that you can run into so you can check that out are you setting a width this is actually one of the harder ones to answer because there are so many different things that you might be setting a width on but i think for the most part a percentage is a nice direction to go on often coupled with a max width now there are times also where a viewport width might be a good unit to use but it can cause some trouble or some unintended consequences so just be careful with viewport widths if you are using them and another unit that a lot of people don't know about that could be a really good fit is the ch unit in the world of print we have an m unit which is the width of a capital letter m but in css the m is equal to the font size of an element so they've given us a new unit the ch so this is roughly equal to the width of the number zero of any given font so just think of the ch as the width of a character of that font now you might be wondering why would that be useful and it's when you're setting things like max width on paragraphs for example or you might even be using this on components and this is because in typography you generally don't want to go above 75 characters per line for readability reasons and it just looks ugly really and i 75 is actually pretty wide i would recommend staying narrower than that and a really good way to keep check of this and not have to guess and sort of just randomly put in numbers hoping it's going to look good with things like ram for your max widths is by using the ch because if you know you do max width 45 ch it's roughly 45 characters wide once again if you want to know more about ch i did make an entire video on it so you can check out the description for a link on that one as well are you setting a height first up the first thing i want you to do is think do i really need to be setting a height if you really absolutely you have to you yes kevin i need a height on this please think about maybe using a min height instead of a height because at least in that situation if the browser shrinks and the content needs more room it won't overflow at the bottom and cause a whole bunch of problems so if you are setting them in height or you're dead set on setting a height on something a percentage rem or even a viewport height all fit the bill on the word of viewport height though just do be careful with it there are issues that can come up especially on mobile devices so do be careful with that you know with the keyboard coming in and there's other things that can cause the viewport height to sort of not act the way you'd expect it to are you setting padding or margin for the most part i'd suggest going with either m or rem for these it depends on whether you want the padding or margin to be consistent despite the element that you're setting it on or if you want it to adjust based on that element's font size the popular example i usually turn to is using m for padding on buttons that way if you set the font size of the button you know you want a big version of the button and a small version you change the font size the padding will grow and adjust along with that font size another example is setting the flow on a document you could give all of your text elements your paragraphs your list your heading give all of them a margin top of one rem and it'd be consistent throughout the entire document but you could change that to one m and then the spacing will be bigger on headings because they have a larger font size and this can actually be a nice thing because it adds some extra white space on top of your headings and it can make your hierarchy more clear and what about media queries if you've been following me for a while you might have noticed that i usually set my media queries using m and i actually do this for consistency across all browsers because safari does something differently if you use rem or pixels compared to the other browsers i won't go into detail on this i'm going to link to an article by zelier that looks at the differences between them the article is actually pretty old at this point but every time i check it out it holds true what he wrote about so you can read about it there and kevin what about the other units there's tons of other units in css but honestly i think if you have a good understanding of m and rem you sprinkle in some percentages where you need them and you know ch is really awesome too you can use that a bit maybe a little bit of viewports they can be come in handy that's about all you really need and you might even notice i didn't really talk about pixels either i honestly don't use them very much and if you start taking advantage of relative units like m and rem i think you'll see that you don't need them much anymore either i use them for some things like when you need something really small maybe three pixels for a shadow offset or something but i really i find myself barely using them except when i you know sometimes if i'm doing a demo i'll use it really quickly just because it's fast but for the most part they're not something i turn to very much at all and that's it for me did i miss out on your favorite unit or do you use any of these in different ways that i've talked about or maybe there's some situation you've run into and that these things don't work and you want more suggestions please let me know in the comments down below if you did like this video and you want more css content on the regular please do consider subscribing a giant thank you to my patrons for their support each and every month 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: 131,258

Rating: 4.9784069 out of 5

Keywords: Kevin Powell, tutorial, html, css, em vs rem, css units, css em, css rem, em vs rem vs px, css rem vs em, css vh, css vw, how to pick unit css

Id: N5wpD9Ov_To

Length: 6min 30sec (390 seconds)

Published: Fri Feb 12 2021