How using [rem] can help you to build excellent mobile-first applications

One of the most important pillars to make amazing web apps nowadays is The Responsive Design. Everyone has a portable device in their hands and your application must run correctly in each one if you want to have an excellent application.

Then, there is something that every developer struggles with when is starting on a web development: which unit should I use to keep all stuff in their place, no matter which device is being used? Well, it is a hard question until you learn how to use [rem] unit corretly.

However, before we start talking about it, we have to understand what are Relative Units and Absolute Units and then how to convert Relatives to Absolutes.

Absolute Units

Absolute Units are the first thing we learn about CSS (Cascading Style Sheets) regarding sizes. I am talking about pixels! When I started programming, I used px unit for absolutely everything, because it is a real unit. The screen of our computers are composed by pixels and if something should fill half of your 1000px screen, you just set the width property to 500px; or if you need a big title you just set the font-size property to 32px, for example, and voilà. But it is not useful, because these sizes will always be the same, no matter the device screen size. These are Absolute Units.

Relative Units

Certainly it is not a good thing. On the other hand, to handle this situation, CSS provides Relative Units, which you have probably used, anyway you have to know the best way to use each one.

• Viewport based units (VH and VW): In my opinion, these are the most simple to understand. VH unit is a percentage of the viewport height and VW unit is a percentage of the viewport width. In other words, no matter where your code is, if you use VH or VW your CSS will process this size based on the device size. It can cause some headaches.
• Percentages (%): When we use percentages to define sizes, we have to keep in mind two rules: 1) If we use it to define a font-size property, it will be based on parent's computed font-size property and 2) if we use it to define length properties, it will be based on parent's computed width property. Certainly it cause some headaches.
• Font-based (ems): This category of units is based in font-size property and you also have to keep in mind two rules: 1) If you use [em] to define a font-size property, it will be multiplied by parent's computed font-size property and 2) if you use [em] to define length properties, it will be multiplied by current element computed font-size property. Do I need to talk about headaches?

As you can see, it is very unuseful set properties in our CSS code basing in our viewport specifications (the odds of becoming into a mess are huge) and it is very hard figure out the parent's specifications everytime we want to use a percentage (%) or an [em] unit (attention, I am not saying that we don't have to use them, but it is easier in specific scenarios).

In fact, if we starting to use percentages or [em]s everywhere, we will need to calculate quite a few things to put everything in their place (and type several media-queries to every single selector in our CSS). To handle it, we can use another Font-based unit named [rem].

Rem

Rem is a Font-based unit which is defined multiplying value by root computed font-size property. In other words, no matter where your code was written, it will based its value in the root font-size property value. Nevertheless, what is the real advantage of using [rem]? It is simple to answer: if you use [rem], instead of create several media-queries in your code, to handle with every specific situation, you set your padding, margin, font-size and other stuff like that as [rem] and write a group of media-queries to change the root font-size property value based on resolution of device. In other words, you just create a "global" media-query which will fit a bunch of thing without hard work.

That has been said, let's see how it works.

By default, root font-size property is 16px (it is a user-agent style, defined by the browser). To Keep It Simple (Stupid!) I commonly reset this value to 10px at the beginning of my code, because it is simpler work with a decimal base instead a hexadecimal base. But I don't use an Absolute Unit for this (because if the user defines a CSS specification, it doesn't work very well). I set this value to a percentage equivalent to the proportion 10px/16px (it is 62.5% and then even if the user sets a value for font-size property, my application still works well, because it is based on a relative unit, instead an absolute one).

html {

	  
  font-size: 62.5%; // 1rem = 10px; 10px/16px = 62.5%
}

That has been done, whenever I use a [rem] unit in my CSS, it will be based on this value. For example, if I set a font-size as 1.5rem it will be converted to 15px (1.5 * 10px) and if I set a padding as 3.2rem it will be converted to 32px (3.2 * 10px). It allows to write clean, easy-to-understand and reusable codes.

But it is not the end, you have to handle resolutions. In order to Keep It Simple (Stupid!) again, I just change font-size property for each resolution I consider important to deal with.

html {
  font-size: 62.5%; // 1rem = 10px; 10px/16px = 62.5%

  // It will be applied to BIG-DESKTOPS
  @media only screen and (min-width: 1800px) {
      font-size: 75%; // 1rem = 12px; 12px/16px = 75%
  }	

  // It will be applied to TABLET-LANDSCAPE  
  @media only screen and (max-width: 1200px) {
      font-size: 56.25%; // 1rem = 9px; 9px/16px = 56.25%
  }
	
  // It will be applied to TABLET-PORTRAIT
  @media only screen and (max-width: 900px) {
      font-size: 50%; // 1rem = 8px; 8px/16px = 50%
  }

  // It will be applied to PHONE
  @media only screen and (max-width: 600px) {
      font-size: 37.5%; // 1rem = 6px; 6px/16px = 37.5%
  }

}

With this piece of code, every [rem] that I have used in my CSS code will change getting smaller or bigger when it is converted, based on device resolution. And that's all, your code will adjust style on device screen.

Even though it is a great pattern, sometimes you will have to type some media-query in order to fix specific cases, but certainly this strategy will help you to have less code to type at all. I hope it can help you as has been helping me for a while. See ya!