CSS unit Tier List

Key Takeaways

hello my front and friends I've made a few videos recently looking at a whole bunch of the different CSS units and I even made a flowchart to help people pick what CSS unit they should be using in any given situation because we have 54 different length units yes 54 of them that is a lot of units and with all of them being very front of mind for me especially after spending so much time on that flow chart I figured why not rank them so here we are let's dive in and rank the CSS unit you can see here we're going to you know how these things work right I'm sure you've seen them but a to F the same way a school system works and if anything is better than an a then it gets an S for being Above the Rest I guess it's the top the top ones you can get and as you can see there let's zoom out a little bit Zoom back in uh we're going to start with our absolute units uh which are those ones that are right there which are mostly for print but we do have pixels that are in there as well and so we will get around to to those in a second but I guess we should look at the print ones first and just as we dive into this actually I just want to say a really big thank you to Ali Fahim for suggesting I even do this when I shared the early version of my flowchart on Twitter or X or whatever you want to call it uh he suggested I do this so thank you very much Ali I I think this is going to be fun and you know let me know what I get wrong in the comments as as usual with all of these and I'm just going to select all of these ones because they're print uh I almost need like an on categorized for print units um you know cuz if you're doing print related stuff I guess they go here uh and if you're not doing print related stuff they go here so I'm going to put them as F because I don't really do print stuff I know people ask me for print stuff it's really not my world which is funny because I used to do print design but um yeah the the only thing I will say here is uh I'm going to move the Q unit up to here cuz Q is quirky and different and it's a good trivia question so it gets bonus marks uh Q is like you know uh it's the only Capital One it's Nobody Knows It exists and uh if you just see if you don't know it's like a really really really really small number I forget what it's like one1 of a millimeter or something ridiculous I don't know exactly but it's super super small um yeah so we'll give it bonus points for being kind of quirky and different uh I know a few people have told me actually they have used this when they need that little difference on something um so they've used the queue in those situations um and actually we're getting to pixels now it's based on like the pixel ratios and everything that the device has to sort of figure it out but it's 196th of an inch I'm pretty sure um is a CSS pixel it's not a screen pixel and I'm giving it a c maybe I don't know it's almost like it's a C+ let's say uh and the reason I want to give it a C+ is type thing is just because uh they're super handy they work well for when we need them you need a border you're going to use a pixel you need a box Shadow I guess pixels are okay uh you need for certain stuff there's no problem with them but people overuse them um they're used for font sizes all the time which can cause problems from an accessibility point of view and uh sometimes people just over rely on pixels when there's better units out there so we it loses marks for that so I'm going to sort of give it a C+ I'm happy we have them um but it sort of sucks that everybody relies on them too much uh and yeah that's what I think I know some of you would definitely probably give it an S tier and others might even give it an F so I maybe I'm the little middle of the road but we'll find some that we can uh cause some other arguments on and again these print ones they're not really FS right they're just I'm putting them there CU I'm not doing print related stuff so uh but yeah let's move on to the relative units and we have a lot of relative units some of these you've probably never seen and some of these you definitely know um so we're going to start I guess well we'll start with percentages cuz everybody knows percentages and I'm going to give it a B I think percentages do not get an A um just because I love percentages they're awesome they can do lots of really cool stuff uh you know it just works well but then they cause some problems too right they're awkward if you want to use them as a height uh they're if you do it as a padding or margin top and bottom it's just really wonky and probably doesn't do what you want it to do uh there just so there's weird stuff that happens with percentages when they work and they do what you want them to they're awesome so I'm super happy we have them so they're going to go here even I'm just thinking like we have grid also uh right if you're using percentages within grid you probably don't want to CU that's where overflows happen because it doesn't take into account gaps uh and all of that so I'm I'm going to stick with a B uh just cuz when they do what you want them to do and they're super handy and I like having them so uh I'm happy they're there uh M do M's get an A or a B I'm going to give M's a b cuz once again they're super handy I'm super happy we have them uh but they just leave that possibility for some chaos right whereas if you have like if you do it on purpose and you do it well where you can actually like have all of your font sizes set with M's I've seen some people that really love doing that but one little mistakes somewhere can it just cause chaos to happen where you get the cascading thing of M's being based on M's being based on M's and then your font size is six times bigger than you thought it would be so just because of that uh I'm going to give it a be I I'm so torn because I use them for so many things maybe it's a B+ uh just because I like it a little bit more than percent do I like it more than percentages I'm not sure I'm going to we'll stick with B we have a lot of units to get through I can't overthink this um x x is going to also get a B okay we're going to I'm X LH IC I'm trying to remember what IC is uh we'll leave IC here for a second I might be the one that's for vertical text I might have to even double check CAP is going to come over here these ones this goes over here oh man okay so this is part of that can go here okay so X LH and cap and then we have Rex Rick and ick or no I should have said the rch goes here I was looking for the relative ones oh this one Li um we have the X the LH and the cap and these ones are all so this is like the cap height the x height the line height I'm leaning towards B because they're cool but they have very limited use cases you generally would be doing this on like a span or a pseudo element because like I could see doing an x on a pseudo element for like a decorative element that needs to be the height of my lowercase letters which is X is the height of a lowercase x cap is the height of your capital letters and LH is the line height so it matches the height of your line height um they're very Niche but when you need them and the browser support is not I think X has good browser support and these two it's one it's not there yet um but I'm not worried I'm not going to talk about browser support I just want to talk about the usefulness of these units um man do I give them bees just because like they do what you expect them to do and you're never I don't see anybody misusing them I am going to give them a b uh then that leaves me with Rex this one R LH and the r cap I'm giving these a c because I don't see when I'd want to use them I'm sure there's times do I even give them a d so these are all the same thing but it's based on the root rather than being based on the element that you're declaring it so if you had a span that's right I said like a span where like your smaller text is the height of your x height I could see being something being useful I think I've done something like that uh the LH one it's not as often but like these are all things where I want it based on the font size of my element that I'm putting it on I don't know why I'd want the root ones and I'm sure if you have a good use case for these leave them in the comments I haven't figured them out I also haven't used them to be honest with you I've never used any of these three uh I'm going to give them D I just don't see when I would use them uh and maybe there's better use cases and if you have one and then it could get graduated up to a c I just I have no idea when I'd actually want to use one of them they don't cause problems they would do what you want them to do I just don't see the practicality of them but maybe I'm just not Thinking Inside the Box enough a small little Interruption here because as I was editing this I said Kevin what were you thinking putting the relative line height there it's actually incredibly useful and I probably should have given it an a I'll put a link to an a resource that Adam Argyle Shar down in the description but the rlh or the root line height is really good at setting consistent Rhythm within a website so if you're someone who's done typography and other stuff like that and you've always been driven a little bit nuts by the lack of consistent Rhythm setting on a website that you definitely could easily do with a print document uh the root line height might be the solution that you've been looking for the other two I'm still not sure exactly on when I would use them but the rlh on revision would get an A very easily uh just because it solves something that's been really hard to do in CSS until now but let's go back to the list now CH is going to be my first a and I'm very tempted to give it an S is CH going to be an S tier or an A we're going to put it here and I might we're going to revise at the very end and just make some last minute adjustments if we need to but I'll put CH there I'm very tempted okay so CH if you don't know is the character width sort of uh if you come from from a print world it's actually what an M roughly would be I think it's slightly different because it's based on the number zero rather than the width of a capital letter M and it's weird that we have m's in CSS that are different from M's in typography but anyway CH is roughly the width of a charact the zero character um and why this is useful is again you wouldn't really misuse this but setting a Max width on things like a paragraph or a heading and using CH is just chef's kiss uh in typography you want MAX Line lens CH makes it really easy to do that and then we have the root CH which I again I don't know why I want a root CH cuz I want it to be based on that unit or like where I'm declaring it I don't want my headings to be based on 16 pixels which is probably what my root is or well I guess it's a little different cuz it's ch but like for my headings why would I care what the CH is on my root like why would I use that so once again these ones should probably use cases but I don't know what they are so I I I didn't want to get this wrong cuz I've never used it the IC unit is indeed for uh I'm just going to lose it there here it is equal to the advanced measure of this glyph uh this water audiograph found in the font and used to render uh so again this is dealing with vertical um and I guess it's a little bit like CH equal to the Advance measure I'm not sure what Advance measure is yeah it's like CH but this way instead perfect uh so just I would I wouldn't use it um but I'm going to group it with the CH because of that and I'm going to group this with this rch because of that uh and I I don't really have any other information on it so I'm guessing it would be useful um if you're working with vertical Lawns I don't know um do I give it a b just cuz I don't I I'll leave it here I I yeah again sort of falls into like I don't use maybe we'll do it like on this side cuz I don't use it and we'll we'll throw it over here just cuz I don't have enough information um and now we have the REM and REM REM would definitely be a tier right we Rems we use for so much stuff they're super useful it's the one time having it based on a base thing makes sense so you have all of your font sizes based on the root you could always change the font size of your root just don't use pixels to do that um but you could change the font size of your root and then of your fonts can adapt to that if that's the way you want to handle responsive typography uh there's other reasons REM is good but it just gives us a nice consistent base to work from without the side effects of pixels basically and so they're perfect for a lot of use cases and so much stuff so definitely a tier uh I use RS everywhere I have no complaints about them I guess being base 16 just because browsers tend to be that as a default can be a little bit wonky and people like to complain about that but I don't care it's getting an a for me uh next up is oh my goodness I don't have enough room in my chart our viewport units which is half of our units I think um I my chart's going to die but uh we're going to sort of group these off a little bit and you might be surprised here cuz I'm not a huge fan of viewport units um I'm I'm giving these two FS uh viewport widths people just abuse the crap out of them it causes overflow issues I see people put 100 viewport width on their body all the time it causes overflow on browsers that have fixed scroll bars like Chrome on Windows which is lots of people it does nothing because your viewports already the width you want it to be or your body uh people use it everywhere they shouldn't use it and it just this is like beginner mistake is using viewport units where you don't want them to they probably don't do it you should people use them on font sizes and it makes their fonts unresponsive uh and causes or makes them responsive but makes inaccessible because you can't zoom in and out so they're it doesn't work and then viewport height like slightly better but it's still like an f um it can be handy as like a Max height I guess uh again viewport units can have the right thing but they just cause too many problems and everybody likes complaining about viewport height um you know on mobile it doesn't do what you're hoping it will so I'm I'm giving it an F I don't care they go there uh VI and VB are the same thing but they'll get D's just uh they'll get like F Plus's um just cuz they're the same so viewport inline and viewport block so it's like The Logical property version of them so just cuz they're The Logical property version we'll give them like a Plus on top for being logical which isn't how it works but um vmin and Vmax I'm going to give like a c minus um they're sort of awkward to use but when you get them to work right they they're cool in a way right they're kind of funky they're kind of weird they're kind of quirky um but they sort of they can be handy so yeah I'm mean I'm going to go with like a lowc I don't know I they have some of the tradeoffs here you're not going to use a vmin and V-Max the same way you probably would use those go with the c um just because they sort of yeah whatever that's where they're going uh then we have the next batch small viewport large viewport Dynamic viewport large viewport I'm going to put down here just because I as far as I'm concerned it's the same as VW so I don't know the difference well generally they work exactly the same I I know this is the viewport this tends to always be the same thing as that though uh maybe there's some edge cases where there is a difference between the two but I don't know small viewport width gets bonus points uh no small viewport width I don't know what am I talking about all of these I'm going to overlap cuz we're going to run out of room the vws of these don't change anything right as far as I know the scroll bar is not incorporated into the dynamic or the small so it doesn't change anything with scroll bars and I don't know any devices that have like the UI elements vertically so uh if there's ever use cases for those I don't know what they are small uh yeah so LVH is going to come here I was thinking about the VH before when I was saying that it's the same um VH and LVH as far as I know always function the same way so I'm going to group them together again maybe there's something different dvh gets like a d for trying hard right that's usually how that works isn't it you get a d cuz you tried but it it's not good enough uh just because it gives you that jumping content and then you get like you know your paint you have to repaint the page because your area grew if it was a nice smooth transition I'd give it more points but you scroll you let go it jumps it's annoying uh an svh will give a c uh just cuz it's sort of what you want uh it's more practical than the regular viewport height it fixes a lot of the problems doesn't take into account the keyboard and stuff but at least we have it um so it tried hard and it's a little bit better than the dvh so it gets to see uh then it's just more viewport units they never end uh I guess like here we're just going to small inline inline is left to right that's the same as width so that gets grouped here um I don't care that they're logical it's again small viewport inline large viewport inline Dynamic viewport inline I don't think there is any ever difference so they're all going there uh logical or not there's still FS svb small viewport yeah you can go here and like I guess like slightly above because it's the logical property version of it this gets grouped with that one and then the dynamic one can go over here slightly above we'll do that there we go so it's sort of like a a better D but not quite a D+ um then we have small viewport Min I mean these just okay small viewport Min I've never used any of these versions of them but it's sort of like the vmin the Vmax but just more confusing right so I'm I know it's sort of cheating but we're going to group these and I'm leave the D1 on top for both just so it takes up less room on our graph here uh Dynamic I whatever I guess they also get grouped into this because I have my vmin and Vmax here uh I bet you the difference is so small but I guess if you used 100 V Max or Min and it was the viewport it's better if you're using the D or the S1 I don't know whatever I can't I'm just I can't overthink all of those so I'm just going to throw them in there just cuz they sort of get grouped in with this that's how I see it and what I'm actually going to do is let's just we're going to group all of this sort of together in one big mass of vmin VMAX including everything else cuz there's too many of them it's just there's my vmin Vmax everything whatever uh maybe if I play with it more I'll find use cases where I want to use those instead of the regular ones I'm not going to overthink it right now cuz if not this video is going to get too long and then finally we get down to our last group of units which is our container units which are new browser supports not the best but that's okay cuz I said I'm not going to worry about browser support for this video so container units are amazing and what I'm going to do is you're getting s tier cuz container query inline is amazing uh so basically it's sort of like a viewport unit but it actually serves purpose um I think because we're basting it on instead of the viewport we're basing it on the container and for font sizes and other stuff as long as you're using it within a clamp uh I'm cool with it again view do I give a viewport Unit A D cuz I use them with I'm I'm bumping view Port units to a d they cause so many and that means VI comes with it and gets like the slightly better version because I use it within clamps a lot for responsive typography I'm bumping it up it causes so many headaches there's so many people I help that just use viewport units like crazy it still gets a bad Mark but I'm bumping it up for being useful for typography which is also why this gets SED here because with typography within a clamp you have one font size it doesn't matter where you're using it it's just going to fit it's wonderful if you don't know about them I'll put a video in the link cuz I love them so that goes there that's my inline so I mean that's sort of the same as this we we'll group them together you know we'll say it's an inline so it gets higher up container query height is going to get a c and the reason I'm giving it a c instead of the a is first of all I don't know how often I would use it Heights are always just problematic with CSS I'm giving it a d actually um we're running out of room I'll just give it a d like all the way off to the edge here uh the reason I'm giving it a d we can make my graph bigger is because uh Heights are problematic in general with CSS so obviously we're we're very based on that container queries you're often not on your container you're often not going to want to have it as defined with the height you're going to be doing a container type inline size and not size cuz size makes it hard to work with and so just because this relies on you having I'm docking at points for us having to have a defined container in the height for this defunction cuz I find there 100% there's use cases for this and every now and then it' be a little bit like these guys where you're going to have a perfect use case you're going to be so happy about it but there's a limitation to using it that you do not get with the inline ones so because of that it gets docked a whole bunch of points and it's just less useful you wouldn't have your font sizes defined with container querer stuff right um so yeah and if you you you're going well what about vertical text well then you're using container query in line cuz your inline access is changing anyway so there you go so because of that that means container query we have contain whoa whoa whoa okay I didn't even know I just grabbed them all I made this a little while ago before recording uh we'll go with the ones I know so this is blocks just going to get grouped with that because it's basically as useless um again there'll be times where you want to use those but um they're not as often container query M oh this is the new okay these are the new ones that just got added oh wait we have the minim max the minim max again I'm actually going to dock these quite a bit because they would both they're going in D also because they would require us I'm going off my my figma doesn't like where I'm going they're going in these are D's we'll go off this side I guess my frame oh we're we're going off my frame I can make my frame bigger whatever I'll I'll share this somewhere when I'm done but they're going in d uh just cuz again the same requirement they they won't really work if you don't have a defined height on your container and your container has to be a inline container or a size container instead of just an inline size uh these are the new ones these were just added uh are the most recent editions I haven't used them container query CH so it's looking at the CH of the container so H the H where would I use these the contain so I guess you'd have a def you'd have a container where you're setting up a font size and then it's going to look at the font size of the container rather than looking at the font size of anything else and I wonder I guess that would fall to the viewport if you didn't have one I'm assuming that could be kind of cool I'm trying to think why I'd want okay so it's like REM but instead of looking at the root you're looking at a defined container I think I'm going to give these B's I could see them I see all of these sort of falling into the X cap LH world where it's super rare you're ever going to need it but when you do you're so happy they exist and when you don't you're never going to misuse it because definitely some of these can be super useful but they're getting docked because they're just misused and abused and used incorrectly whereas these ones 100% they're I don't think anyone's going to accidentally take a cql just guessing uh but when you find out that that's what you need in a very specific use case you're over the moon that it exists and that's one of the things that I wanted to do by looking at this uh like obious same with these right like you need these you're doing print stuff like boom they're s TI here all of a sudden so like we have a lot of units you're not going to use most of them first of all half of them are viewport units and then we have a whole bunch of container query units now so like you don't have that many units right the ones you're probably going to use are percentages Rems pixels M's 90% of the time throw a few CHS in there and you're happy I'm moving CH up to S here I wasn't sure but I am just cuz it it I don't use it for a lot but um it just does what it does so well it gets bonus points I like CH it's my favorite unit I think so it has to go up there even though cqi slw are sort of fighting against it I I I was going to resist it and wanted this the container career ones by themselves but I changed my mind uh but you're you're just super like right you're you're relying on like this small grouping of unit like right here is probably most of what every website on the internet has and those are the only ones you really need most of the time sometimes you're going to need these other little ones that come up in useful cases though and then other times you're going to need a a VH or an svh could be super useful for the right thing do we put svh and svb up higher I think I think I think we're going to now that I'm looking at I'm like why am I giving those C they don't have the problems of viewport of the the regular VH and they don't cause problems really right like if you have VH okay if you did height in VH and not a Min height I guess you you you're asking for problems but I'm going to boost those up to a b we're again running out of room we'll create some overlap here just so we can sort of these two live together as well um and you know these are also Sim well they're different but similar enough they're like relative container query units uh yeah uh so like I'm I'm putting a lot in the dnf down here also that like you might use in the right situation so I just want to say like just cuz I'm saying that they're down here like maybe you have the right use case for them you can still use them just be aware of the problems they can cause and there's not as many decisions as you might think that you have to make along the way here uh right so like and again most of the time you're choosing the same ones but I also want to know like what did I get wrong here what do you completely dis agree with I hopefully didn't put your favorite unit is an F tier but maybe I did and let me know why I'm wrong in the comments or why your favorite unit should be an S and I put it as a d or whatever it is please let me know and if you'd like to check out that flowchart thingy that I made there video where I look at it and the link for that are right here and of course with that I would like to thank my enablers of awesome who are web on demand Andrew Simon Tim and Johnny as well as all of my other patrons to their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome