Today i am going to show you why do i use

html {
  font-size: 62.5%;
}

and why i think you should use it too.

The reason i am giving font size property to html is because it gives so much practicability to your code for further approaches. For example let's take this pen here:

There are still so many junior developers that are just changing the values of paddings, margins and the way layout is shown. But there is another important thing to change when you are writing the Media Queries, which is font size.

To make life easier you have to use rem whenever you give a font-size property unless it is a special text etc. Default value is defined as 1 rem = 16 px.
To make it down to 10 px and for the sake of doing calculations easier we are giving font-size: 62.5%. It can be calculated like if 16 px is 100% of the font size, 62.5% equals to 10 px. After making it so we can give any value to font-size as we desire while writing Media Queries.

As you can see in the pen i wrote earlier, i scale the font-size down to 50% if it hits the screen width of 380 px. And all the fonts just fit perfectly like i wanted to.

@media only screen and (max-width: 380px){

    html{
        font-size: 50%;
    }
}

If you want you can also give rem to margins, paddings, widths actually anything can have the px value. As the font size scales down or up with the query you write, same thing happens to any element which includes px value too. With the power of this magic you can set these properties between your elements(sections, list items etc.) and let the one line of Media Query code do the job for you. But for sometimes you can't get the perfect vision you want. If that happens to you just writing a couple lines of code can make it instead of writing different values for all the elements you have.

This is what i know and what i can give to you. If there is something i am missing please leave a comment.

That's all people, thanks for reserving your precious time to me. Love y'all <3