This flowchart will help you pick the right CSS unit

[@dillxn554]

This is like a meme someone would make to poke fun at CSS 😂 Good work, Kev

[@yurihuffles]

I loved that you started this video with "there are exceptions", and then go on to the first go into an area where I'm frequently working in those exceptions. I code a lot of streaming overlays live, and my starting point is that I set a root font size, in pixels, calculated in css based on formula using viewport heights. I do this since I design on a 1080, so this sets the root font size to be what I view as the smallest viewable when viewed full screen on an old phone, but in a way that it'll scale up if someone streams in 4k, etc. It also means the rest of my font sizes can be in rem with me knowing that's going to look the way I intend. I've had people often cite you, and state I'm wrong - so from here on out.. I'm going to just add a command that links to this video with "watch this... I'm in the exceptions!" :)

[@KevinPowell]

Haha, definitely! I've made a couple for myself and that's definitely the way to do it :D

[@HenriqueErzinger]

That’s not an exception really. The root font-size is a special case, since it exists to control the calculation for all the rest. It is a pixel value no matter what.

[@SunilSuresh786]

Thanks for this really helpful flowchart! When designing pages, my biggest problem is what unit to use. Usually, I use px by default, or rem/em to make things responsive, but this doesn't always work. But now, not only do I have a better idea of what unit to use (thanks to your flowchart), but your tips also help make it clear why something does not work (like, when using % to specify an element's height relative to another item, I now know that the other item's height also needs to be declared). Thanks again. 🙏

[@kh_trendy]

I love how you immediately pointed out "there are exceptions!", Kevin! This is why CSS is hard though, experience tends to give you the knowledge to identify those exceptions!

[@fersahahmet9597]

This is what i call content generating, great job as always.

[@KOBE42__]

This is the best way to navigate all the different units for sure! Thank you for taking the time to create and share this. Very useful ❤

[@Trademm]

This is some original work, appreciated

[@marksto6581]

This is so great to have such a thought-out thing right at hand now, when you're queried with that same old question once again (and then again, and again, ...). Thank you so mush, Kevin! Two thimbs up!

[@twd2]

That's exactly what I needed, great video as usual😍!!!

[@joan_ferre]

You're AMAZING Kevin, thank you so much! Love your explanations. Learned something new with the `ch` size!!

[@MrBrady95]

Wow, this flowchart is amazing! Thanks!

[@kirkanos771]

This is gold. Thank you Kevin.

[@jinbyun]

I should make a cli tool out of this. This is gold!

[@TheRalic]

Awesome job, thank you for taking the time and making this!

[@jikochi]

nice chart! great job, thank you Kevin. maybe the finalized version of this can be in the form of a form. we can see what we will use on the result screen. just an idea. But it's always nice to see the wider perspective. it's also can stay that way. 😄

[@lowwastehighmelanin]

This is incredibly useful, thank you Kevin!

[@luketurner314]

17:43 I believe "couldtry" should be "could try", just a missing space typo I noticed

[@jessypouliot8374]

From my use cases, most of "position" cases are `0`, `50%` or `100%`, I never use px and sometimes use rem

[@tomvoltz7506]

Great chart! Thanks Kevin.

[@Kozi03]

You are a CSS angel

[@i_am_ergo]

You're the real MVP, Kevin. 🏆

[@skrundz]

How is it possible for CSS to have even worse units than the US 😄

[@Objectified]

The U.S. also uses the metric system, genius.

[@HenriqueErzinger]

It doesn’t, at all.

[@iliyanpetrov5762]

Kevin owned any AI Thank you, Kevin, you are awesome!

[@nilaallj]

Correct me if I'm wrong, but I'm pretty certain that even font relative units does not respect the user's typography settings when used in a root font-size declaration. That will always make 1rem equal to 16px no matter what. The only way to have the user's settings trickle down the cascade, while still adjusting the root font size, is by using percentage units. So instead of declaring 1.2rem it's better to declare 120%. That could also be used in clamps together with viewport units etc. (Again, this should only be used when adjusting font size on the root element. Percentage units on font sizes is a bad idea elsewhere).

[@KevinPowell]

root font size is not always 16, no. If the user sets their browser font-size to 21px, 1rem = 21px. If they zoom-in/out it also changes the root font size. using % is dangerous for font-size in the same way em is (they're almost the same, really), in that if you declare a font-size on an element, and then a child of that element, they are multiplied on top of each other, and not based on the root font size all the time.

[@nilaallj]

@@KevinPowell What I meant is that using em on the root font size overrides the user’s browser settings. If root font size is set to 1.2em it will compute to 1.2 * 16px, not 1.2 * whatever font size is set in the browser. If you want the browser settings to trickle down in the cascade you should use % on the root. Not declaring a font size on the root will make 1rem be equal to whatever is set in the browser.

[@audiocologne]

WOW, great! This is very helpful, thank you very much 🙏

[@crousdioll]

This help is very important thank you

[@AmandaLenoard]

Thank you so much for this!

[@peterloader974]

Fantastic! But I want a pdf of the chart so I can print it and hang it on the wall! How much?

[@XCanG]

I thought it would be more extensive, also I don't like an idea of omitting possible variants because it exactly the reason you may want to look at this chart. For example even same grid often require you to use minmax() function. Also there is a thing to sizes and spacing in a document and in an element. For example you did say at the beginning that you probably don't want to use % on position, but there is a lot cases where you just have to use something like: .el::before { left: 50%; translate: -50%; } (same could be for height), but the point is that there left centering element top left corner within a parent element (with position: relative;, otherwise within document) but translate position 50% back to center of element, since it take size of an element, in this case size of pseudo ::before

[@justindouglas3659]

Could you also do this for other properties like when to use psuedo classes and stuff like that.

[@philippfischer]

Great job, thank you Kevin!

[@palrevesz8629]

Thank you Kevin, that's gonna be so helpful... 👍🌞❤

[@jasper265]

I mostly use percentages for font sizes. From your explanation, they're equivalent to em in that context, but I'd say it's more self-explanatory. Do you have a reason you're picking em instead of percentages there?

[@selectorsaurus]

Hey Kevin! Awesome chart! Lately, I've been thinking about ditching rem units "everywhere" and leaning towards using px for things like paddings, gaps, and margins between certain block elements/components. The reason behind this pondering is that when you change the browser's font size, the layout grows, and the text becomes practically unreadable as its space shrinks. So, considering using rem for font size and px for most of the layout. Does that sound reasonable, or do you have any thoughts on such an approach? Thanks again!

[@GrantGryczan]

ems and rems are specifically intended to scale with font size, so you should only use ems and rems when you specifically want things to scale with font size. Mobile devices, for example, tend to have a much larger em-to-px ratio than desktop, so if you want something to be larger on mobile than desktop (for accessibility), then you might consider ems or rems. These are things you should always be mindful of when picking these units.

[@HenriqueErzinger]

Right off the bat, percentages are the better option for positioning half (or more) of the time, and rem almost never. Using percentages allows you to not care about the actual size of the container, and using rem ties your object’s position to the font-size, which in general makes no sense at all. I also don’t like to use em. I do understand the appeal, but I prefer to be more precise with my spacings, following a proper baseline grid, than letting the browser calculate some magic number (which is not actually what it does, but feels the same). There are definitely some cases where it’s nice to change based on context, but most of the time I’d rather keep tight control.

[@zadina308]

Really useful … thx a lot Kevin!

[@nomad100hd]

Gross I clicked to open the chart in Figma and audio started playing. Thank you for the useful flowchart and the video is great.

[@db5443-j8l]

Great content as usual. Took all your classes. Question, where can i find best practices/guidelines by MDN or something?

[@kaywelfare3500]

Christ, you're such a legend!🙏

[@blizzy78]

awesome, that's very handy, great stuff

[@paszTube]

Would love to have a printable version of this... Or how about an A3 or A2 poster in your shop?

[@SenselessUsername]

I tried to make a CSS version to put as a reference on a personal webpage, but couldn't figure out what units to use.

[@paszTube]

@@SenselessUsername hehehe

[@cool_scatter]

In the block where you mention that em is relative to the parent's font size, you say .5rem instead of .5em.

[@KevinPowell]

oops! Sorry, hopefully it's clear what I meant :)

[@cool_scatter]

@@KevinPowell From the video, for sure. Just looking at the flowchart it would be tougher if you didn't already know how it worked.

[@nobir98]

At long last you've posted that

[@richochet]

Thanks Kevin! I am though having trouble seeing this in Firefox / Windows 11

[@GerritforBazeja]

I like this flowchart.....Thank's

[@ViewMumbai]

You’re awesome ❤❤

[@najmantube]

Is there a problem with setting font-size: 10px on the html, then using rems after, eg. body {font-size: 1.6rem } (1 rem = 10px, 1.6 rem = 16px) etc?

[@RobertSaulnier]

A printable version would be great

[@KevinPowell]

I think it's way to big, lol. Maybe I'll make a simpler version for print, but it might be a bit before I get around to it.

[@LePhenixGD]

Hi Kevin !!! I have a slightly off-topic question for you, if I'm not mistaken I recall watching a video that demonstrated a HTML-CSS only technique for adding a subtle effect to heavy images using a background-image with a compressed version of the original. This approach created a captivating transition where the high-quality image "took over" I'm trying to confirm if this was one of your tutorials, specifically the video mentioned the need to add a special HTML tag for images. Did you happen to make that video ? If yes, could you please provide me the link to it ?

[@KevinPowell]

Yup! Here you go: kzbin.info/www/bejne/aWWYh2WDiph4ldk

[@LePhenixGD]

Thanks!

[@NiceChange]

Great video. Thanks for the info!!! Demystify

[@stratman1234]

Very helpful. Thanks a lot.

[@n8_may]

Does Kevin have a video explaining why max-width and min-width are problematic?

[@KevinPowell]

max-width is fine, it's min-width that can cause issues. It's not that it's bad all the time, but it's a quick way to run into overflow issues. Same with max-height :)

[@ahammedshajmeer]

some video links aren't redirecting

[@trudyandgeorge]

Damn. Host site is down :(

[@rajraiz3058]

What Mindmapping tool do you use by the way?

[@AlThePal78]

em n rem still confused me when to use it. like i would like to see where in a real world scenerio in a actual site. This video makes some sense but I just never use em

[@sefnerr]

un-CSS related; What program is Kevin using to make that flow-chart? TIA

[@Skorupa9]

Wow. It's so helpfull!

[@JosephCodette]

EM relative to it's parent so if the parent is 3rem and child is 0.5em the child becomes 1.5rem , ?!? huh somehow missed that logic apparently .. I just used rems for text mostly and em's for static spacing

[@gangasai_kumar_G]

Can you create an angular new dev site home page animation , angular dev, if it is possible do a video on that, please consider as a serious request 🙏🙏🙏🙏🙏

[@dimasmagadan]

what would you advice to use for breakpoints?

[@KevinPowell]

I used to say em, because it was the only one that was consistent across all browsers when zooming in/out, but Safari fixed their big, so em, rem, or px are all fine

[@opletter]

What's the difference between using em vs % for font size?

[@KevinPowell]

Same thing, 1.5em = 150% for font size

[@opletter]

@@KevinPowell Thanks! So is there a reason you suggest em specifically? Is that just more common?

[@electronicmusicartcollective]

THANX A LOT 🙏

[@blizzy78]

you should embed this video on the website as well

[@KevinPowell]

No idea why I didn't think of that 😅

[@blizzy78]

@@KevinPowell glad I could help 🙃

[@axMf3qTI]

Wait, we don't define a root font-size in px in the :root?

[@KevinPowell]

That will overwrite user styles at the browser level, if they've set any up as a default, and is seen as bad practice.

[@axMf3qTI]

@@KevinPowell So can I put a relative size in the root? Sometimes you want to make all your fonts bigger or smaller depending the type of screen or should we use a clamp for that?

[@thats-tuff9678]

Awesome!

[@noskillzdad5504]

More charts!

[@Applecitylightkiwi]

If this only is for positioning

[@turtles_lover]

NICE!

[@kevinfisher7032]

Pica's! "Now that's a name I haven't heard in a LONG time" (Let Obi Wan and I go search for my pica ruler :-)

[@KevinPowell]

Glad I'm not the only one who has one lying around somewhere 😅

[@rumbazumba3189]

Should have just made everything point back to rem eventually:D

[@marble_wraith]

If it's a flowchart... it should be able to be a VScode plugin for "suggestions". Just saying 😏

[@DevoutJourney]

Not to sound like an asshole but, the irony is here. Clicked the link on mobile and its absolutely terrible. The newsletter link, and the flowchart itself, if you accidentally scroll past it, it’s like it’s gone forever hahahahahaha. Anyways, I like the concept.

[@nikilragav]

I just use px, %, ch

[@KevinPowell]

No `rem`? :(

[@nikilragav]

@@KevinPowell rem is certainly a reasonable thing to use. I just typically don't.

[@nikilragav]

@@KevinPowell em I skip because it's relative to parent and you can get some very funky results (eg where you get font sizes inside a container that aren't one of your global scale)

[@nikilragav]

@@KevinPowell here's why I think rem isn't necessary: the browser CSS px are NOT the same as your display's px. They are virtually pixels based on your device's DPI scaling settings and also on the percent scale level on your browser for the page. As long as you set all your sizes in 1 place and use CSS variables (thus restricting developers only to use your allowed values), rem and px produce the same effective result. I just think px are easier to understand vs ratios. Yes, some people set their default font size bigger or smaller than the default 16px. But honestly, it seems like a lot more people just zoom the page. I do that myself: I've set my Mac OS view to "More space" and most pages I've set to 80% (so even smaller haha 🤣).

[@mrgamerzyt3945]

love from pakistan

[@fersahahmet9597]

I want a flexbox and dont want children fluid is like i wanna take a shower but i dont wanna get wet

[@atlantic_love]

This is what's stopping me from learning CSS. It's a MESS!!!

[@harunjonuzi]

Is like the other stuff is way too simplified 😂😂😂

[@atlantic_love]

@@harunjonuzi I'm not sure I get what you're saying.

[@harunjonuzi]

@@atlantic_love it's fine brother, i hope you have a wonderful weekend!

[@atlantic_love]

@@harunjonuzi Oh, okay, so you were trying to be clever and failed. The other stuff is just fine, CSS is a mess. Else, you wouldn't need a "flowchart just to navigate it".

[@esgn.design]

Holy shit dude just use rem lol