This flowchart will help you pick the right CSS unit
Рет қаралды 51,245
Күн бұрынThe flowchart 👉 whatunit.com/
There are a lot of CSS length units to pick from-54 to be exact!-which can make it hard to know which one you should use. Luckily, there are only a handful that you’ll use most of the time, but it can still be hard to know what’s best, so I’ve made a flowchart to help you decide!
🔗 Links
✅ More on clamp() for font-size: • min(), max(), and clam... st
✅ Why em is good for spacing text: • CSS gap is NOT a repla...
✅ svh, lvh, dvh: • Use these instead of vh
✅ Using min(), max(), and clamp() for padding and margin: • Creating squishy paddi...
✅ Josh Comeau on the problem with 62.5% font-size on the html element: www.joshwcomeau.com/css/surpr...
⌚ Timestamps
00:00 - Introduction
00:22 - The flowchart
01:54 - positioning, details, and effects
02:55 - font-size
08:00 - spacing
10:40 - Flex and Grid
14:25 - widths and heights
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
@dillxn554 7 ай бұрын
This is like a meme someone would make to poke fun at CSS 😂 Good work, Kev
@marksto6581 7 ай бұрын
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!
@yurihuffles 7 ай бұрын
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 7 ай бұрын
Haha, definitely! I've made a couple for myself and that's definitely the way to do it :D
@twd2 7 ай бұрын
That's exactly what I needed, great video as usual😍!!!
@SunilSuresh786 7 ай бұрын
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. 🙏
@Trademm 7 ай бұрын
This is some original work, appreciated
@TheRalic 7 ай бұрын
Awesome job, thank you for taking the time and making this!
@KOBE42__ 7 ай бұрын
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 ❤
@MrBrady95 7 ай бұрын
Wow, this flowchart is amazing! Thanks!
@tomvoltz7506 7 ай бұрын
Great chart! Thanks Kevin.
@kh_trendy 7 ай бұрын
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!
@kirkanos771 7 ай бұрын
This is gold. Thank you Kevin.
@lowwastehighmelanin 7 ай бұрын
This is incredibly useful, thank you Kevin!
@joan_ferre 7 ай бұрын
You're AMAZING Kevin, thank you so much! Love your explanations. Learned something new with the `ch` size!!
@philippfischer 7 ай бұрын
Great job, thank you Kevin!
@AmandaLenoard 7 ай бұрын
Thank you so much for this!
@jikochi 7 ай бұрын
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. 😄
@crousdioll 7 ай бұрын
This help is very important thank you
@jinbyun 7 ай бұрын
I should make a cli tool out of this. This is gold!
@audiocologne 7 ай бұрын
WOW, great! This is very helpful, thank you very much 🙏
@fersahahmet9597 7 ай бұрын
This is what i call content generating, great job as always.
@zadina308 7 ай бұрын
Really useful … thx a lot Kevin!
@palrevesz8629 7 ай бұрын
Thank you Kevin, that's gonna be so helpful... 👍🌞❤
@stratman1234 7 ай бұрын
Very helpful. Thanks a lot.
@Kozi03 7 ай бұрын
You are a CSS angel
@blizzy78 7 ай бұрын
awesome, that's very handy, great stuff
@i_am_ergo 7 ай бұрын
You're the real MVP, Kevin. 🏆
@ViewMumbai 7 ай бұрын
You’re awesome ❤❤
@GerritforBazeja 7 ай бұрын
I like this flowchart.....Thank's
@NiceChange 7 ай бұрын
Great video. Thanks for the info!!! Demystify
@thats-tuff9678 7 ай бұрын
Awesome!
@electronicmusicartcollective 7 ай бұрын
THANX A LOT 🙏
@bryandandan5443 7 ай бұрын
Great content as usual. Took all your classes. Question, where can i find best practices/guidelines by MDN or something?
@Skorupa9 7 ай бұрын
Wow. It's so helpfull!
@richochet 7 ай бұрын
Thanks Kevin! I am though having trouble seeing this in Firefox / Windows 11
@iliyanpetrov5762 7 ай бұрын
Kevin owned any AI Thank you, Kevin, you are awesome!
@turtles_lover 7 ай бұрын
NICE!
@skrundz 7 ай бұрын
How is it possible for CSS to have even worse units than the US 😄
@Objectified 7 ай бұрын
The U.S. also uses the metric system, genius.
@jessypouliot8374 7 ай бұрын
From my use cases, most of "position" cases are `0`, `50%` or `100%`, I never use px and sometimes use rem
@nobir98 7 ай бұрын
At long last you've posted that
@noskillzdad5504 7 ай бұрын
More charts!
@nomad100hd 7 ай бұрын
Gross I clicked to open the chart in Figma and audio started playing. Thank you for the useful flowchart and the video is great.
@kaywelfare3500 7 ай бұрын
Christ, you're such a legend!🙏
@justindouglas3659 7 ай бұрын
Could you also do this for other properties like when to use psuedo classes and stuff like that.
@selectorsaurus 7 ай бұрын
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 7 ай бұрын
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.
@XCanG 7 ай бұрын
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
@jasper265 7 ай бұрын
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?
@peterloader974 7 ай бұрын
Fantastic! But I want a pdf of the chart so I can print it and hang it on the wall! How much?
@RobertSaulnier 7 ай бұрын
A printable version would be great
@KevinPowell 7 ай бұрын
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.
@rajraiz3058 7 ай бұрын
What Mindmapping tool do you use by the way?
@luketurner314 7 ай бұрын
17:43 I believe "couldtry" should be "could try", just a missing space typo I noticed
@nilaallj 7 ай бұрын
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 7 ай бұрын
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 7 ай бұрын
@@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.
@n8_may 7 ай бұрын
Does Kevin have a video explaining why max-width and min-width are problematic?
@KevinPowell 7 ай бұрын
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 :)
@najmantube 7 ай бұрын
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?
@ahammedshajmeer 7 ай бұрын
some video links aren't redirecting
@sefnerr 7 ай бұрын
un-CSS related; What program is Kevin using to make that flow-chart? TIA
@AlThePal78 7 ай бұрын
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
@LePhenixGD 7 ай бұрын
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 7 ай бұрын
Yup! Here you go: kzfaq.info/get/bejne/aZpliZV-upmpj6s.html
@LePhenixGD 7 ай бұрын
Thanks!
@paszTube 7 ай бұрын
Would love to have a printable version of this... Or how about an A3 or A2 poster in your shop?
@SenselessUsername 7 ай бұрын
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 7 ай бұрын
@@SenselessUsername hehehe
@Applecitylightkiwi 7 ай бұрын
If this only is for positioning
@kevinfisher7032 7 ай бұрын
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 7 ай бұрын
Glad I'm not the only one who has one lying around somewhere 😅
@trudyandgeorge 7 ай бұрын
Damn. Host site is down :(
@rumbazumba3189 7 ай бұрын
Should have just made everything point back to rem eventually:D
@cool_scatter 7 ай бұрын
In the block where you mention that em is relative to the parent's font size, you say .5rem instead of .5em.
@KevinPowell 7 ай бұрын
oops! Sorry, hopefully it's clear what I meant :)
@cool_scatter 7 ай бұрын
@@KevinPowell From the video, for sure. Just looking at the flowchart it would be tougher if you didn't already know how it worked.
@dimasmagadan 7 ай бұрын
what would you advice to use for breakpoints?
@KevinPowell 7 ай бұрын
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
@gangasaikumarg7393 7 ай бұрын
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 🙏🙏🙏🙏🙏
@marble_wraith 7 ай бұрын
If it's a flowchart... it should be able to be a VScode plugin for "suggestions". Just saying 😏
@JosephCodette 7 ай бұрын
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
@opletter 7 ай бұрын
What's the difference between using em vs % for font size?
@KevinPowell 7 ай бұрын
Same thing, 1.5em = 150% for font size
@opletter 7 ай бұрын
@@KevinPowell Thanks! So is there a reason you suggest em specifically? Is that just more common?
@blizzy78 7 ай бұрын
you should embed this video on the website as well
@KevinPowell 7 ай бұрын
No idea why I didn't think of that 😅
@blizzy78 7 ай бұрын
@@KevinPowell glad I could help 🙃
@axMf3qTI 7 ай бұрын
Wait, we don't define a root font-size in px in the :root?
@KevinPowell 7 ай бұрын
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 7 ай бұрын
@@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?
@mrgamerzyt3945 7 ай бұрын
love from pakistan
@nikilragav 7 ай бұрын
I just use px, %, ch
@KevinPowell 7 ай бұрын
No `rem`? :(
@nikilragav 7 ай бұрын
@@KevinPowell rem is certainly a reasonable thing to use. I just typically don't.
@nikilragav 7 ай бұрын
@@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 7 ай бұрын
@@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 🤣).
@sugaslate14 7 ай бұрын
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.
@fersahahmet9597 7 ай бұрын
I want a flexbox and dont want children fluid is like i wanna take a shower but i dont wanna get wet
@atlantic_love 7 ай бұрын
This is what's stopping me from learning CSS. It's a MESS!!!
@harunjonuzi 7 ай бұрын
Is like the other stuff is way too simplified 😂😂😂
@atlantic_love 7 ай бұрын
@@harunjonuzi I'm not sure I get what you're saying.
@harunjonuzi 7 ай бұрын
@@atlantic_love it's fine brother, i hope you have a wonderful weekend!
@atlantic_love 7 ай бұрын
@@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".
@0334796711 7 ай бұрын
Wow !!! This flowchart is what I needed all my life. I am a huge fan.
@esgn.design 7 ай бұрын
Holy shit dude just use rem lol