Well yeah the band was pretty good. Everybody does hurt at times, can’t argue with that but I’m talking about CSS REMs.
We’ve seen and heard this a lot and though there are so many great articles about what an REM is versus an EM we thought we would put it into a CodePen and just show you. It’s surprising how many developers are still using EM when we have something so much better.
If you attache EM to a font size somewhere then by default CSS will be looking for the default EM size which it will then use to determine everything else. This is 100% acceptable until you start nesting divs, lists, or just about anything you can think of.
Notice that there are nested lists 4 levels deep. Why are the nested lists getting bigger each time? Well that is because you are telling to increase the size of 1em each time there is a new <li>. If you switch it to REM instead of just EM for <ul> and <li> then you will see that the list items remain the same size.
The R in REM stands for root which is telling the stylesheet to grab whatever you size was originally set in the html part of the CSS. You can use @mediaqueries to change the size of the fonts with one line of CSS and watch it get activated through every line that calls back to REM.
Hopefully that helped a few people out there in web development land but if its confusing just let us know and we can knock out a killer project for you. We got this covered.