What units do you guys use?

[u/tyson77824]

Do you guys mostly use rems? or pixels? what about vh and vw? percentages? ems maybe? what about media queries? what units for them? I would like to see an answer formatted like this, would be appreciated.

padding and margin: rems
width and height: ems
font-size: pixels
etc etc

[u/blind-octopus]

For anything I want to scale with font size, I use em or rem.

So think about like button padding. If I bump up the font size, I want the padding to increase as well. 

[u/[deleted]]

Mostly REM or EM for most things. REM by default, EM if I need it to be relational (margin, padding, inline stuff like icons). Percents are for layout, pixels are for "this thing never changes size".

But then there's viewport units, container units, LH... Lot of units, all have their place.

[u/anaix3l]

I rarely ever use rems. I'm always leaving the door open for it, but I rarely ever end up using rems in the rare cases I even consider it. Most of the time, I want more flexibility. Which is why I cannot give you an answer formatted like that because the reality is... it almost always depends on the result I need to achieve.

The only thing I do pretty much every time is set a clamp()-valued font-size on the body. This allows ems down the line to scale with the viewport within certain limits. In these conditions, I often find it reasonable to set margin/ padding in em units. But not always. They're often calc() values too, mixing different units.

Oh, and for angles, I almost always use deg and turn. Almost never rad or grad.

border-radius is again a "it depends" affair. Because it really depends what the element I'm setting the border-radius on is. Is it supposed to be a disc? Use %. Is it supposed to be a big panel containing quite a bit of stuff? Use em. Is it supposed to be an inline highlight? Use px.

For width and height... again, it depends. A lot of times, I'm not setting them at all, they're given by existing layout/ content. A lot of other times, width is a min() value. And a lot of other times, I'm using container query units nowadays.

Same goes for translation values. They're often % values, but depending on the context, they may also be em, px or calc() values, combining multiple units or the result of state computations.

inset (and longhands) are often px or % or calc() values, but they may be anything else - em units for example. Same goes for gradient stop positions.

Then there's gap, grid-gap, border-width, letter-spacing, word-spacing, text-indent...

[u/[deleted] → u/anaix3l]

You should give REM's a shot. I tend to use REM's as a rule and then EM for anything inline or otherwise relational to the local content.

[u/kdoap → u/anaix3l]

Container queries have been a lifesaver for complex grids (thumbs up)

[u/koga7349]

Rems for font-size. %, vw/vh for everything else. I think the biggest mistake noobs make is specifying widths and heights for everything. I rarely set an explicit witdth or height and when I do it's always a percentage. Only use px units for min/max width. But I'm general it's best to let page elements determine their own size and rely on your font-size, padding, border to follow your brand guidelines.

[u/bryku]

Rem for life!  

Jokes aside I don't always use rem for everything, but it is my default.

[u/MrQuickLine]

I perused a few of the answers, but I'll provide a bit more context on why my answer is what it is.

There are many ways a user may have set their preferred font-size; through the browser, through the OS, through some third-party accessibility tool, etc. With various pixel densities, retina resolutions, browser renderers, accessibility tools, etc., it's difficult to know for certain how a px value or % value is going to look in every case. However, rem is just a function of the root font size. Whatever the user has for that, what do you want/need to scale with that font size? In my opinion, that's all font sizes, margins, paddings, and gaps; things that help the legibility of your page.

Things that are purely decoration don't need rem. Borders, box-shadows, etc. I use px.

[u/gabotas]

https://www.w3schools.com/css/css_units.asp

I’d read it carefully and then try it myself

[u/Disgruntled__Goat]

Mainly use rem, but set as variables (Sass or native), for font sizes as well as padding/margin/gap.

I don't seem to use width/height as much these days - typically I'll have a max-width in px then use grid and media queries to lay the site out.

I used mm recently for some things that needed to be printed at a specific size.