Why engineers and designers should use rem over px, and how to automate the css migration
Discussing the differences between rem and px and why rem is the ideal choice at this point of time.
Rem and pixel (px) are two units of measurement frequently used in CSS and HTML to define font size, margin or image size for example.
However, the two units have a big difference in terms of web accessibility, because a pixel is not responsive and that’s why it’s better to use REM.
1 REM (root empheral unit) adapts itself to the resolution choices of its user! Yes, the CSS design and HTML will adapt to the preferences defined by the user in their browser.
By default 1 rem = 16 pixels, but you can for example define in your preferences that 1 rem = 24 pixels. This will allow for a larger and more readable font design.
To convert from px to rem all you have to do is divide the units of your design in pixels by 16. For example, a font that was 32 pixels in size becomes: 2 rem. 32(px)/16 = 2(rem)
Unit Overview
Historically px units typically represented one device pixel. With devices having higher and higher pixel density this no longer holds for many devices, such as with Apple's Retina Display.
rem units represent the root em size. It's the font-size of whatever matches :root. In the case of HTML, it's the <html> element; for SVG, it's the <svg> element. The default font-size in every browser* is 16px.
On Using px
The majority of CSS examples on the internet use px values because they were the de-facto standard. pt, in and a variety of other units could have been used in theory, but they didn't handle small values well as you'd quickly need to resort to fractions, which were longer to type, and harder to reason about.
If you wanted a thin border, with px you could use 1px, with pt you'd need to use 0.75pt for consistent results, and that's just not very convenient.
On Using rem
rem's default value of 16px isn't a very strong argument for its use. Writing 0.0625rem is worse than writing 0.75pt, so why would anyone use rem?
There are two parts to rem's advantage over other units.
- User preferences are respected
- You can change the apparent px value of rem to whatever you'd like
Respecting User Preferences
Browser zoom has changed a lot over the years. Historically many browsers would only scale up font-size, but that changed pretty rapidly when websites realized that their beautiful pixel-perfect designs were breaking any time someone zoomed in or out. At this point, browsers scale the entire page, so font-based zooming is out of the picture.
Respecting a user’s wishes is not out of the picture. Just because a browser is set to 16px by default, doesn't mean any user can't change their preferences to 24px or 32px to correct for low vision or poor visibility (e.x. screen glare). If you base your units off of rem, any user at a higher font-size will see a proportionally larger site. Borders will be bigger, padding will be bigger, margins will be bigger, everything will scale up fluidly.
If you base your media queries on rem, you can also make sure that the site your users see fits their screen. A user with font-size set to 32px on a 640px wide browser, will effectively be seeing your site as shown to a user at 16px on a 320px wide browser. There's absolutely no loss for responsive web design (RWD) in using rem.
Linting css to ensure the usage of rem over px
To lint our CSS and ensure that all values are in rem not in px, we will make use of Stylelint and Stylelint Rem Over Px plugin. Style lint is a tool that allows us to enforce a certain format for our css. The setup goes as follows:
• Install NPM dependencies
npm -i --save-dev stylelint stylelint-rem-over-px
OR
yarn add -D stylelint stylelint-rem-over-px
• Create a stylelintrc.js file in your root directory:
module.exports = { rules: { 'rem-over-px/rem-over-px': true, }};
• add a script to package.json to run the linter:
{ "scripts": { "lint:styles": "yarn stylelint src/**/*.{scss,less,css}" }}
• Run the linter to check all the issues with your code:
yarn lint:styles
Automating the migration from px to rem
If you already have a codebase written in px, it’d seem like a tedious time consuming task. You’d need to go over each instance px declaration, calculate the equivalent rem value by dividing the px value by the base font size (usually 16px) and updating the code with the new value. This makes the code vulnerable to a lot of unforeseen bugs and typos.
Comes the stylelint rem over px plugin for the rescue! This whole process can be automated to run under one second. The Stylelint plugin offers the possibility to migrate all the px values to rem.
To apply these changes, run the linting command with the --fix flag as follows:
yarn lint:styles --fix
This will convert all px values to rem by dividing the px value by the base font size provided to the plugin, which defaults to 16.
Conclusion
We discussed the differences between rem and px and why rem is the ideal choice at this point of time. We added a style linter to our css code, ensuring that all styles will abide by our formatting rules like enforcing rem as a unit of size over px. We add a script that automates the css style files migration process from pixels (px) to rem. We also added a pre-commit hook to automate the future work for our engineers so they don’t have to worry about the units used.
This is it, folks!
