My CSS Boilerplate

As a new developer, I always struggle with CSS (who doesn’t?). Hacks always come to my rescue.

One of the best CSS hacks I learned for using responsive units (w/o the hassle of using the px to rem converter every time) in CSS-

Simply set your font size to 62.5% like the following-

Since the default font size in most browsers is 16 pixels, by setting the font-size of the html element to 62.5%, you effectively make the default font size 10 pixels (62.5% of 16 pixels). This makes the math easier when using rem units, as 1rem is then equal to 10 pixels, 1.6rem is equal to 16 pixels, and so on.

This is how my typical CSS boilerplate looks like for more clarity-

Hope this helps!