Question

According to bootstrap-responsive.css file,the media query @media (max-width: 767px) is repeated meaning it occurs twice in the file.Why is it repeated?.

You can see the file here http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

Answer 1

Hmmm, I certainly can’t claim to understand what the developers intended when they wrote the CSS, but here’s what I think…

I believe the repetition of media queries is just to provide greater modularization of the CSS file. Note that both @media (max-width: 767px) and @media (min-width: 768px) and (max-width: 979px) are actually present twice in the file, so it’s not likely an anomaly.

The first declarations of these media queries appear to deal with classes that are added to elements to hide/show them at certain browser widths, so in effect selectively on different devices (specifying the display property). The second declarations seem to deal with the various classes that are foundational to Twitter Bootstrap’s design principles, specifying styles (width, margin, min-height, etc.) of the various classes used in the 12-column grid system.

Classes of the first set can be applied at the whim of the developer, to hide/show certain elements when the page is viewed on various devices. Classes of the second set are applied a bit more rigidly than the first set, since they are a more defining characteristic of the framework’s grid system (eg. You can give an element classes of both hidden-phone and visible-tablet from the first set and see the effects of both, but giving an element classes of span12 and span6 will cause only the last-given class to take effect).

It is because the first set of classes differs significantly in application from the second set of classes that the media queries declarations are declared twice, one for each set.

In Scalable and Modular Architecture for CSS (2012), Jonathan Snook comments on this concept of modularization, stating,

Yes, this does mean that the media query declaration may (and likely
will) get declared multiple times but it also allows for all
information about a module to be kept together.

(I apologize if I used the wrong terms when referring to styles/CSS/HTML! I’m still learning…)