why the font-family are in two place in bootstrap? - css

Question

I just saw in Bootstrap that its using font-family in two places one in html and another in body:
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
...and after many lines:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
So, why is font-family used in two places with the different font?

Answer 1

The first set of styles defined in Bootstrap.css is actually Normalize.css. Noramlize.css makes up the first 189 lines of Bootstrap.css.
If we take a look at the unminified version the full code snippet with comments is actually:
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Why is it defined twice? Because they bundle Normalize.css without modifying that CSS file that defines a font-family for the html element itself.
Normalize.css simply does it to set the base font to sans-serif. Their CSS file with comments states:
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}

Answer 2

Bootstrap is now built using LESS. This means that the CSS is built in using variables and various different files which can sometimes overlap or have values set in different places.
First, it uses normalize.less which will make sure everything is set back to a base standard.
Line 1 - 13
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
//
// 1. Set default font family to sans-serif.
// 2. Prevent iOS and IE text size adjust after device orientation change,
// without disabling user zoom.
//
html {
font-family: sans-serif; // 1
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
}
The body is then set within the scaffolding.less file which sets all the basics for bootstrap to use.
Line 26 - 33
body {
font-family: #font-family-base;
font-size: #font-size-base;
line-height: #line-height-base;
color: #text-color;
background-color: #body-bg;
}
This also happens within the SASS compiler too.
Github - Bootstrap Less
Github - Bootstrap Sass

Answer 3

After going inside the bootstrap LESS it is really easy to understand.
Its not a rule or workaround just a library colliding.
The html {} comes from the normalize.css inside bootstrap.
The body {} comes from the bootstrap itself.

Answer 4

That's because Bootstrap uses a reset stylesheet (probably packed together with bootstrap into one minified version). The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
In this case the font-family reset is redundant because Boostrap changes the font right away on the body. Removing all redundant reset CSS would be a lot of work compared to very little gain.