CSS Hell

Collection of common CSS mistakes, and how to fix them

Let's talk about units

Posted on by cat_a_flame

There is a life beyond pixels and percentages. Using px units is fine in certain cases, the real mistake is using absolute instead of relative units.

Bad example

p {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 8px;
}

What is the problem and how to fix it

  • Using relative units ensures that the website scales proportionally according to your choice of font, and according to the users' choice of screen size and zoom level.
  • The formula to calculate the rem value is desired-size / root-font-size, in short 8 / 16 = 0.5, this means that 1rem equals the font size of the html element (which for most browsers has a default value of 16px).
  • If you don't want to grab a calculator every time you need a new unit, use Sass and create mixin. CSS Tricks has a pretty good article about how you can achive this.

Good example

p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

Resources