Boot boot and grouping of requests first

Question

I am using the latest download for the project. I am confused about bootstraps bootstrap and less file structure

my file structurte

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

All of my custom files are smaller in the Custom Files folder. I am trying to create another stylesheet for custom css without touching bootstrap.min.css at all

In the main.less file, I imported all the files with fewer components (component1.less, components.less)

To achieve the first mobile match, in each component file I included mobile styles as the default style rules and desktop styles at the end 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 css is generated, it looks useless as a combination of css default queries and media queries instead of using css by default 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)***/ .... /**************************************/ ...... 

This is normal? Or if this is wrong, which is the correct way to execute ths

Answer 1

According to the style code written by @mdo (bootstrap creator) http://codeguide.co/#css-media-queries media queries should be "as close to their respective rule as possible"

Answer 2

I think that the answer to this question should depend on how you address it. When you are a developer and want to write reusable code, you must agree to the @mdo rule because:

Doing this only makes it easier for people to skip them in the future.

But when you are a user (browser), you want your style sheets to be displayed as quickly as possible. Using many (same) media queries without grouping them, you make CSS code longer and (theoretically) slower. Yes, indeed, people claim that it doesn’t matter ( Is there an advantage to combining css media requests together? ) And that the big code gets small when you fasten it ( Merging multimedia requests using SASS and a breakpoint (Respond-to ) ).

When sharing both views, you must use the @mdo rule when writing Less code and execute a post handler to group your media queries after compiling the code.

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

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

If you do not need grouping of media queries, .make-grid(sm); can also iterate over .make-sm-column() mixin in mixins/grid.less , which looks like the one shown below, instead of using complex loops to build 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)); } }