Menu
When should I use rem over px? I see a lot of articles saying that I should use REM to respect the user preferences, but the examples always says about font size, not the about the whole style - margin, padding, border, width, height, etc. Took this article of SO as example: Should I use px or rem value units in my CSS?
ALL the answers are saying about the font-size, ok, I get it, rem is better for font-size, but what about the other styles? I see that bootstrap uses px to the container class, to the col-* class, is there a reason for that?
I'm creating this site that overwrites the default styles of Bootstrap, should I overwrite the places where it uses px with pxs or should I use rem?
Thank you.
427
Before you go into what unit of css you should use. You must have a understanding of the units themselves. Because you are the only one who knows what styling you want for your site e.g. (static, dynamic/responsive). Only you can decide which unit to use. So in order to make the decision, first learn about the types of css units and their advantages. Here is the w3school link explaining all units like em, rem etc.
https://www.w3schools.com/cssref/css_units.asp
Now coming to your point specifically, rem as defined is the font-size set for the root element that is <html>. By default the font-size of the <html> root element is 100% which equals to 16px as set by the browser. It can be changed in the browser setting or you can override it in css with html {font-size: 20px}. Whatever the font-size set of the html tag will equal to 1rem.
Now, You can use rem for padding and margin etc but it is not recommended because e.g. you have set the rem values of padding and margins and widths etc for your site where your browser default font-size is set to 16px. So it all looks well and adjusted but what if a user who is browsing your site has set their default font-size of the browser to 25px. That will break your site's design. So that is why for responsive sites, the units %, vw/vh are mostly used. As for the px unit. They are their to help set static values so that you fix the size rather than have it readjust.
So now you know what size you want to keep your website's. You can use the units as needed.
Hope this helps you in your understanding and again, try understanding the theory itself before taking in opinions of others on that theory. :) Happy coding.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
