Bootstrap mobile prima e raggruppamento di query multimediali

Question

Sto utilizzando l'ultimo bootstrap per un progetto. Sono confuso circa il bootstrap cellulare prima approch e la struttura dei file meno

mio file structurte è

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

Tutta la mia abitudine meno file vivono nella cartella dei file personalizzati. Sto cercando di creare un foglio di stile diverso per CSS personalizzato, senza toccare la bootstrap.min.css affatto

Nel file di main.less Ho importato tutta la componente meno file (component1.less, components.less)

Per ottenere cellulare prima approch, in ciascun file componente ho incluso stili mobili come regole stili predefiniti e gli stili del desktop alla fine del file

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


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

la mia domanda è quando il CSS è generato sembra un pasticcio come una combinazione di default css e media query invece di avere default css prima e poi media query

/****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)***/ 
.... 
/**************************************/ 
...... 

Va bene? O se è sbagliato ciò che è il modo corretto di fare THS

Answer 1

Secondo la codeguide stile scritto da @mdo (il creatore di bootstrap) http://codeguide.co/#css-media-queries di media query dovrebbe essere 'il più vicino al loro set di regole importanti quando possibile'

Answer 2

Penso che la risposta a questa domanda dipenda dal modo in cui la si guarda. Quando sei uno sviluppatore e vuoi scrivere codice riusabile, dovresti essere d'accordo con la regola di @ mdo, causa:

In questo modo è più facile per la gente mancarli in futuro.

Ma quando si è un utente (browser) si desidera che i fogli di stile vengano visualizzati il ​​più velocemente possibile. L'utilizzo di molte (o le stesse) query multimediali senza raggrupparle rende il codice CSS più lungo e il rendering (teoricamente) più lento. Sì, in effetti le persone sostengono che non importa (Is there an advantage in grouping css media queries together?) e che il codice grande diventa piccolo quando lo si fa zip (Merging media queries, using SASS and Breakpoint (Respond-To)).

Mettendo insieme entrambe le viste, è possibile utilizzare la regola di @ mdo quando si scrive il codice less e si esegue un post processor to group your media queries dopo aver compilato il codice.

PS quando si studia Bootstrap's grid Less code più in dettaglio troverete che grid.less contiene il codice seguente:

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

Quando non si cura di raggruppamento dei media interroga il .make-grid(sm); potrebbe anche iterare il .make-sm-column() mixin in mixins/grid.less che sembra simile a quello mostrato di seguito, invece di utilizzare loop complessi per costruire le classi della griglia:

// 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)); 
    } 
}