CSS unit Tier List

[@zachjensz]

We all know the CSS Hz unit is the best, allowing you to specify a

[@KevinPowell]

length units only Zach... 😅

[@CirTap]

If aural stylesheet had ever been implemented by any user agent incl. screen readers this would be fun to play with speech 😂

[@edu6032]

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

[@clevermissfox]

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.

[@patrick_foley]

the power an the algorithm! this is honestly really cool. i love that no matter what side of KZbin 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. 👏

[@ultratacoRX7]

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.

[@ThomasIkemann]

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^^

[@Seeeverythin9]

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)))

[@bigpunchline]

Pixel is classic = ❤ They also used in graphics, “pixelisation” and even some maps & textures Also that one 1px line 😅 can’t be replaced to me

[@minimo_io]

An rss/atom feed on your site would be much apprecited! Great content.

[@ElPolemista]

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

[@samirmulla8176]

your teaching style is amazing 🎉

[@nomadshiba]

If you're sizing things based on font-size cqem might be useful. Bigger or smaller button or tag for example. Or Card.

[@PicSta]

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.

[@RogueNinjaCreative]

I'm loving your content.

[@namvo7947]

I really love ur contents. This is what I need

[@KenBanksPEng]

54 css units. Exactly why we love css.

[@brianheight]

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

[@KevinPowell]

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

[@bergerblancsuisse.]

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.

[@NeoCoding]

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.

[@KeithGrant]

fyi Q stands for Quarter-millimiter, because it's fun to mix imperial-type fractions into metric units

[@AniaSkowronek]

Q deserves A at least - super handy in cssbattles! Instead of writing two characters as "px", you can safe space by using "Q" unit 🎉😂

[@5upl1an]

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?

[@KevinPowell]

How about max(1rem, 1vw + .5rem) 😊. That means that if you're above 1vw, zooming in/out will still work

[@StephenNjoroge-hl6pj]

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

[@isaac_lin]

I imagine ic would be used in the same way as ch but for vertical writing systems.

[@CirTap]

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).

[@groovebird812]

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?

[@Take-the-Ticket]

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.

[@KevinPowell]

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.

[@aeaeaeaeoaeaeaeaeae]

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.

[@filippotinnirello]

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?

[@KevinPowell]

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

[@filippotinnirello]

Thank you Kevin

[@sefnerr]

this chart needs to be included with the flowchart.

[@Danachew]

In regards to em's, maybe I want cascading chaos sheets!😆

[@francescoselva1229]

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?

[@Gamer-kj3vi]

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

[@bruh2-tl1jx]

I need that flowchart

[@surgeon23]

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

[@KevinPowell]

I know about them, I tried using a couple and hated them, lol

[@mimosveta]

what do you use to change font size of the root if not px?

[@KevinPowell]

% or rem work :)

[@mimosveta]

@@KevinPowell so, you define it like 1.2 of itself (in case you use rem)? lol, weird. ok, thanks

[@badcatdesign]

Hoping to see "named colors" ranked next. 🎨 #rebeccapurple

[@edwardallenthree]

Picas. I used them in print and everyone hated me. Not sure if those two facts are related.

[@joebazooks]

*`ch`* is beautiful when ur using *monospaced* fonts

[@Fl_ninja]

Had to end video early, too much anxiety seeing all these units lol

[@yanikkendler]

i hate the fact that you didnt throw a auto layout onto those sections..

[@mh_kohansal]

thanks

[@hazyhayden2798]

'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

[@c__beck]

ch S-TIER FOR SURE!

[@KevinPowell]

Haha, knew you'd agree with that one 😅

[@abcq1]

You have missed the N1 CSS unit that belongs to S tier. Fr)

[@KevinPowell]

I was only looking at length units, fr is a bit of a special case, but definitely S-tier 😊

[@John.Rearden]

It’s like the CSS committee who comes up with these units have to justify their existence by introducing new units all the time.

[@dalilyshorts2]

you forgot vw vh

[@quicktastic]

Can't say the list is right or wrong since I never heard of many of these and don't know what they do. 😂

[@MartinDoudoroffLLC]

Seems like some of these are TBD.

[@KevinPowell]

Some are not supported yet, but pretty sure they're on track

[@jarihuuskola]

So many units! I think we have something chronically wrong with CSS and HTML.

[@KevinPowell]

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.

[@jarihuuskola]

@@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.

[@foolmoron]

@@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.

[@TheRalic]

Make a video giving respect to S and A 😁

[@JosephCodette]

Inches on G , change my mind ;)

[@adamuk73]

Anyone going for a good score on CSS battle needs to know Q

[@SjaakLulMaarRaak]

When I see VW, I immediately think of Volkswagen.

[@SmilingRob]

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.

[@cakeCrumbzz]

I don't care px has saved me it deserves S their when in doubt use px

[@nomadshiba]

em is S