Why do some developers define font-size twice with different units?

Question

I develop website themes using starter themes and I see the developers defining properties twice with different units, for example :

body,
button,
input,
select,
textarea {
    color: #404040;
    font-family: sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
}

What is the reason behind this?

Answer 1

In the example you have provided, the first font-size defined (16px) will provide a fallback for browsers that do not support rem units. Browsers that do support rem units will use the latter font-size (1rem) because it is defined after the first and therefore supersedes it.

body,
button,
input,
select,
textarea {
    color: #404040;
    font-family: sans-serif;
    font-size: 16px;             /*This is set first and provides a fallback if rem units are not supported */
    font-size: 1rem;             /*This second defintion supersedes the first in supported browsers because it is defined after the first definition */
    line-height: 1.5;
}

Here's CANIUSE which details browser support etc. It's actually really good, support-wise; it's only really IE8 or lower that it will fail in: http://caniuse.com/rem

Here's a good article covering REM units: http://www.sitepoint.com/understanding-and-using-rem-units-in-css/