Bootstrap mobile first and media query grouping

Question

I am using latest bootstrap for a project. I am confused about the bootstraps mobile first approch and the less file structure

my file structurte is

---css
---js
---less
---mixins
-----..
-----...
----Custom_files
---------main.less
--------- component1.less
--------- component2.less

All my custom less files live in Custom files folder. I am trying to generate a different stylesheet for custom css without touching the bootstrap.min.css at all

In main.less file i have imported all the component less files (component1.less, components.less)

To achieve mobile first approch, in each component file I have included mobile styles as default styles rules and the desktop styles at last of the file

/****Default Styles go here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

My question is When the css is generated it looks like a mess as a combination of default css and media queries instead of having default css first and then media queries

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/
......

Is this ok? Or if it is wrong what is the proper way of doing ths

Answer 1

According to the style codeguide written by @mdo (the creator of bootstrap) http://codeguide.co/#css-media-queries media queries should be 'as close to their relevant rule sets whenever possible'

Answer 2

I think the answer of this question should depend on the way you look to it. When you are a developer and want to write reusable code, you should agree with @mdo's rule indeed, cause:

Doing so only makes it easier for folks to miss them in the future.

But when your are a user (browser) you want your styles sheets render as fast as possible. Using many (of the same) media queries without grouping them make your CSS code longer and (theoretically) rendering slower. Yes, indeed people argue it does not matter (Is there an advantage in grouping css media queries together?) and that large code become small when you zip it (Merging media queries, using SASS and Breakpoint (Respond-To)).

Putting both views together you possible should use @mdo's rule when writing your Less code and the run a post processor to group your media queries after compiling your code.

PS when you study Bootstrap's grid Less code in more detail you will find that grid.less contains the following code:

@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}

When you do not care about grouping media queries the .make-grid(sm); could also iterate over the .make-sm-column() mixin in mixins/grid.less which looks like that shown below, instead of using complex loops to construct the grid classes:

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}