Why make an exception for this 1 line in bootstrap css?

Question

The starter template for bootstrap css includes the following inline:

body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

What practical reasons are there for including this style in-line, while all the other code is in an external .css file?

Answer 1

The inline style was deliberately inserted between bootstrap.css and bootstrap-responsive.css. Moving it to main.css (and so after bootstrap-responsive.css) will show the padding above the black menu bar when it adjusts to a smaller window, at least in IE 10 and Chrome 22.

Ideally it should have been added to bootstrap.css but it wasn't for some reason.

Another solution would be to put it in a separate css file but that would require downloading an additional very small file.

Loading main.css between the two bootstrap*.css files would make it more difficult to override specific settings.

So I presume it's a compromise.

Answer 2

There could be several cases,

• Maybe they wanted this rule to override anything declared in the external stylesheet (aside from !important rules). As inline <style> elements are automatically considered more specific.
• Maybe they wanted this specific rule to be unique to this page, and not globally available on the entire website. It's possible that the 60px topbar only exists on that page.