CSS unit Tier List
Vložit
- čas přidán 17. 06. 2024
- Sure CSS has a lot of units, but there is no need to feel overwhelmed by them all… if you do, my course CSS Demystified might be for you 👉 cssdemystified.com/?...
I’ve made a few videos recently looking at different CSS units, and even made a flow chart to help people pick the CSS unit they wanted to use in any given situation, because we have 54 length units… yup, 54! That’s a lot of units, and with them being very front of mind after spending so much time on that flowchart, I figured why not rank them!
🔗 Links
✅ How to know what unit to use: • Are you using the righ...
✅ The flowchart video: • This flowchart will he...
✅ The flowchart: whatunit.com
✅ Adam Argyle’s `lh` and `rlh` code pen: codepen.io/argyleink/pen/RweXyRq
⌚ Timestamps
00:00 - Introduction
00:55 - absolute units
03:38 - relative units
12:59 - viewport units
19:12 - container units
25:00 - why it’s good we have so many units
#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 CZcams 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!
We all know the CSS Hz unit is the best, allowing you to specify a
length units only Zach... 😅
If aural stylesheet had ever been implemented by any user agent incl. screen readers this would be fun to play with speech 😂
Love this! This is the kind of YT video I like, where I can have some fun while at the same time I feel like I'm brushing up on my knowledge
the power an the algorithm! this is honestly really cool. i love that no matter what side of CZcams you hang out in you're never too far from a tiered ranking video - it's a common ground that we can all see and it makes for good storytelling and improvisation. 👏
I myself would ran ems in at least an A. It is sooo helpful for margin and padding when using fluid text/clamp. Have yet to dive fully into container queries so cant yet comment on those but i agree i think abiut cqb and cqh. When helping on discord, so many issues with ppl using fixed heights (esp with pixels) that i only use min-height in very specific cases.
your teaching style is amazing 🎉
I had no idea a bunch of these even existed. I've mostly been using rem and % for years and rarely used em. But then I discovered clamp last week (in one of your videos about something else) and now I use ems all over the place. Now I gotta go look up a bunch of those other weird ones.
An rss/atom feed on your site would be much apprecited! Great content.
I really love ur contents. This is what I need
I dont know how, but I am trying to get back into css bc I am coding a website for my business and this kind of videos really help me to get to back on track with what I missed in the last like 10 years^^
I'm loving your content.
We need a km and miles unit.
And Football Fields of course
Cool video and super useful. Please could you make a video why frameworks like bootstrap or foundation using flexbox for their grid system instead of css grid?
daaaang, px should be s tier for sure! It can be used no matter where and how, and it's been there since the beginnings)))
I love Absolute units to set the media queries and the main font size.
I will be positive that looks the same in every device at any density
Mostly agree.
I would've put em into A especially because of it's consistency when it comes to media queries.
And I think especially for all the non-beginners the vh's deserve a higher score. Great video btw ❤
If you're sizing things based on font-size cqem might be useful. Bigger or smaller button or tag for example. Or Card.
54 css units. Exactly why we love css.
What I think is even worse to use vw or vh all the time and for almost everything is declaring 100% width for block elements, which have a default behaviour like 100% of its parent width. A div inside the body goes 100% width unless I change it. This is the most common misunderstanding in the web development world.
Q deserves A at least - super handy in cssbattles! Instead of writing two characters as "px", you can safe space by using "Q" unit 🎉😂
Hey so I just finished watching your “step up your front end skills” video and I just want to tell you that you make great stuff, and I want to ask you a question so I’m the type a guy when I do something I forget the steps A LOT so I’m trying to work on a personal project but I forget when to use the codes or elements, for example sometimes I forget when to use the name attribute sometimes the id and so on, Ik I’m a pain in the a** but if you can help me with what to do to memorize it or just know when to do it, please do. Thank you
14:10 I do like to use vw units for titles, say I have a big title that i want to take up the whole width of the screen, i can just make the font size relative to the vw. Of course youd also want to add a minimum size and put them together in a max() so itll just wrap if it gets really small.
funny chart. I use % px rem mostly. em don't cuz it's hard to keep KISS, you can easily confuse as you said. so thats units the best for me.
Just found your channel lately and as fellow CSS enthusiast i want to thank you for your incredible work.
I have a quick question. I used to rely on vw to define width of children of elements spanning my whole viewport. After watching this video i changed many of those declarations to cqi, which i find way more consistent and avoid me to do calculations to account for paddings, scrollbars and such.
The thing is cqi seem to work OOTB even when the parent element doesn't have a container-type defined. Is this intended? Maybe they updated the spec? I added container-type: inline-size to my parent elements (which are mostly block by default) to play on the safe side, but it seems that every element is automatically treated as a container with its relative cq units attached to it. Defining them as container-type is only required to leverage the @container queries. Is it the case or am i missing something?
In regards to em's, maybe I want cascading chaos sheets!😆
I need that flowchart
I'd say ex is an S for me cos it's the perfect choice for *vertical white space* and matches beautifully with the current font esp. for UI elements or headings. That's why lh would also go there. Both provide better harmonic vertical rhythm.
Try em (or ch) for *inline* padding and ex for *block* padding on buttons or headings: always looks great. Because ex can have a different ratio per font than 0.5em ot 1ch (both units rely on character widths), ex an lh are ideal for vertical spacing. Not sure how much cap differs from em IRL just like ch and ex often give the same size. Depends on the font quality.
For a site with strong typography I'd put all the font relative root and container units to A. Components would adjust to the container font size which sounds useful, consider a simple blockquote placed in a sidebar (smaller font/spacing) or the main content (larger font/ spacing).
I imagine ic would be used in the same way as ch but for vertical writing systems.
S Tier dvh purely for designs that require a fixed top navigation, then a main flexbox area that has one grow container for a 100% height design that grows/shrinks while having the ability to overflow.
this chart needs to be included with the flowchart.
thanks
Had to end video early, too much anxiety seeing all these units lol
I often use font-size: max(1rem, 1vw) for example, so I can keep the desktop layout of the screendesign as long as possible even on quite small laptop screens. my rem value is the font-size from the mobile design and the vw value is caluclated from the desktop design. It worked out pretty good so far, but I'm not sure about it anymore...is there something fundamentally wrong with my approach?
How about max(1rem, 1vw + .5rem) 😊. That means that if you're above 1vw, zooming in/out will still work
fyi Q stands for Quarter-millimiter, because it's fun to mix imperial-type fractions into metric units
Hoping to see "named colors" ranked next. 🎨 #rebeccapurple
px, unless it has been redefined, is like one pixel of a 72dpi monitor when viewed from an arm's length away.
I didn't come up with this, just repeating the specs
It's 1/96th on an inch at a specific distance. I forget the distance, but it also depends on the device because it's not the same on a handheld vs. screen, etc
I've had a couple of weird situations recently. I develop in FF and never had to define a font-size for the body, rems just always worked as expected. So I got lazy about cross-browser testing...then a couple of sites recently were launched that had way too large of fonts - the clients approved of them but they were not seeing what I saw 😢Everything about these sites is wonky, whitespace, font size, etc. But the clients approved and I had no idea they were seeing something that was not my design. SO I now always specify a font-size:16px on the body so my rems work as expected. This happened in Chromium based browsers.
Could be they had different defaults for zoom or default font size set? That's why we don't want to set 16px as the root size, because it's considered a bad practice from an accessibility point of view. If someone wants their default font size to be 24px, and yours is 16 and it overwrites things, they might just leave because it's too small.
Developing for the web means you realize you don't have full control. You don't know the color gamut of their device, the input device, the viewport size, or basically anything. As long as what you create is adaptable and works for everyone, that's the most important thing.
I am new in the field.
When i use float property the first item becomes the last and vice versa how can i solve this for multiple items
what do you use to change font size of the root if not px?
% or rem work :)
@@KevinPowell so, you define it like 1.2 of itself (in case you use rem)? lol, weird. ok, thanks
*`ch`* is beautiful when ur using *monospaced* fonts
Blows my mind, that the guy who would probably do a good job making a site for these tiered ratings seem to not know about those sites
I know about them, I tried using a couple and hated them, lol
Can't say the list is right or wrong since I never heard of many of these and don't know what they do. 😂
I just saw the latest version of html boilerplate resets html font size to 1em. This is odd to me, I always thought px size was better for root element, with rem for other children, in order to just decrease or increase the root px size based on media queries to proportionally set all the other sizes. Why that?
Setting it in pixels is bad for accessibility as it overwrites OS or browser level settings for font-size. Using em, rem, or % there keeps it accessible
Thank you Kevin
Picas. I used them in print and everyone hated me. Not sure if those two facts are related.
ch S-TIER FOR SURE!
Haha, knew you'd agree with that one 😅
i hate the fact that you didnt throw a auto layout onto those sections..
'em' got robbed, would've given it atleast an A. When working with rem it can be super useful for padding, margins, border-radius, etc. Probably would've given rem the S tier too
You have missed the N1 CSS unit that belongs to S tier. Fr)
I was only looking at length units, fr is a bit of a special case, but definitely S-tier 😊
So many units! I think we have something chronically wrong with CSS and HTML.
As I said near the end of the video, there's a good reason we have so many. It's a feature, and not a bug. If we reduced the amount of units, it would simply limit what we can do, rather than make more possible. If I want something to match the height of the lowercase letters of my font, then a unit that does that is useful, even if that's it's only purpose.
@@KevinPowell Yeah I understand it, but as a civilisation we can design and engineer so much using x, y and z coordinates with mm or inches. Just to layout some text and images CSS is pretty complicating in general, I think.
@@jarihuuskola CSS units aren't actually measurement units. They are functions that take various inputs (screen, font, box size, etc) and output a measurement. The outputs of all CSS units are converted to the same measurement unit in the end (screen pixels), but it's the function calculation behind each unit that's useful. Design in general uses way more than 50 functions so CSS is not especially complicated.
you forgot vw vh
Make a video giving respect to S and A 😁
Anyone going for a good score on CSS battle needs to know Q
It’s like the CSS committee who comes up with these units have to justify their existence by introducing new units all the time.
Seems like some of these are TBD.
Some are not supported yet, but pretty sure they're on track
I don't care px has saved me it deserves S their when in doubt use px
em is S
Inches on G , change my mind ;)
When I see VW, I immediately think of Volkswagen.
Who cares what we think, this is your video, make a call even if it's "wrong" it's a tier list, not a W3C spec, it's supposed to be your opinion. Put "rem" in S tier, everything else in F and say "fight me in the comments" lol.