px

what should i learn exept px and rem in css
18 Replies
snxxwyy
snxxwyyβ€’16mo ago
You should very rarely use px, learning em is highly useful and important, it’s similar to rem but uses the parents font size rather than the root, the viewport units and % are also very useful to get a grasp on also.
laith
laithOPβ€’16mo ago
thank you,one more thing is there like a vid or smth to read that can explain
snxxwyy
snxxwyyβ€’16mo ago
No worries, I’m sure you can check mdn docs for them.
laith
laithOPβ€’16mo ago
πŸ‘ thx for helping
snxxwyy
snxxwyyβ€’16mo ago
All good man
b1mind
b1mindβ€’16mo ago
Like everything CSS you need to think about how the elements need to behave. Use all the units! Please just don't use Rem for everything, also px are not evil.... You can use them just when. And please don't use vh/vw for fonts those should typically always be rems And learn the gotchas around old viewport units and why we have new ones. Ch units are underrated too Broad point, we have like 45units don't limit your self
roelof
roelofβ€’16mo ago
@laith like I said yesterday . This is basic stuff you learn on every basic css course. We cannot learn you everything
laith
laithOPβ€’16mo ago
am still a beginer so the easiest is px tho
b1mind
b1mindβ€’16mo ago
That's not easy that lazy as a beginner you learn specially since you asked the question def don't use px for fonts please use REM Understanding why: Users will not be able to change the font size if you use px. It will ignore their settings and thats bad UX/UI
snxxwyy
snxxwyyβ€’16mo ago
You need to not stick with something familiar, you’ll never learn that way, you have to look at things you don’t understand to understand them. in what situations would you use px b1?
b1mind
b1mindβ€’16mo ago
When I don't want it to change with users/root font. Which you really need to start testing cause people assume rem means responsive.... I'm actually playing with large clamp headings that use PX cause I never want them bigger than their biggest most likely. User goes from 16 to 24px on a small screen and oooooof
snxxwyy
snxxwyyβ€’16mo ago
ah that makes a lot of sense tbh, i never thought about it fucking up like that lol, might have to steal that from you man πŸ˜…
b1mind
b1mindβ€’16mo ago
https://discord.com/channels/436251713830125568/709865075871186996/1146834577088843817 A post that does a pretty good job of explaining it too Another great instance that I've stopped using REM is in my gutters and some gaps. Cause I don't want the sides of my page doubling and squishing content when its small say user on mobile has 24px font set πŸ˜‰ So the idea is to find that happy path of letting a user set their font size and not breaking your "responsive" website πŸ˜„ Best answer? TEST IT! change the font size in browser/os settings to be super accurate and know what it looks like.
snxxwyy
snxxwyyβ€’16mo ago
oh sweet, i'll check that out! speaking of which did you ever get further with your design system names?
b1mind
b1mindβ€’16mo ago
na I was all over the place last night. I really need a design, so I might do that today. I find I'm starting to try to get too "universal" to be flexible and need to step back a bit cause I'm not make a toolkit πŸ˜„ I've thought about maybe taking it into a UI lib at some point but lots of work to make something for others. off topic for here though xD DOH
vince
vinceβ€’16mo ago
Okay I use rem for everything. What units should I be using instead? I can see use cases for em if you're using components and such and vw/vh for clamps and the like but other than that I only use rem
b1mind
b1mindβ€’16mo ago
Read what I just wrote well I mean above the off topic stuff this mean have you changed teh font-size* and tested your site? REM != magically responsive unit just like vw/vh are not πŸ˜„ we have 54 units now lol dang .. but yea why limit yourself to using 1\54 https://nerdy.dev/new-relative-units-ric-rex-rlh-and-rch
vince
vinceβ€’16mo ago
😳😳😳 I dont think I want to open that pandoras box That makes a lot of sense tho
Want results from more Discord servers?
Add your server