Discussion on: What CSS tip do you want to share with others?

[Nicola]

Using rem instead of em or px to handle different responsive behaviour on different screens, setting font-size on html root element:

html {
  // with 100% 1rem === 16px
  font-size: 100%;
}

p {
  font-size: 1rem;
}

@media screen and (max-width: 600px) {
  html {
    // at 90% 1rem equals to (16px/100 * 90) = 14.4px
    // our p element will have font-size: 14.4px
    font-size: 90%;
  }
}

[Bayu Angora]

I use this too, but I put the initial font size on body rather than html. Which one is better?

[Nicola]

Currently, there is another one:

:root

I think this is the best, I don't think there are differences between HTML and body. Personally I prefer to use html instead of body for font-family and size, but It's a personal idea 😎

[Bayu Angora]

Thanks.