Dove inserire le query multimediali CSS3?

Question

Sto avendo un dibattito filosofico con me stesso sul posto migliore per porre domande sui media all'interno di fogli di stile. Sto tentando di strutturare il mio CSS in modo modulare (come OOCSS o SMACSS, ecc.). Dato questo contesto, vedo due scelte:

1. Mettere tutte le query multimediali insieme in un foglio di stile separato o in una sezione del foglio di stile principale.
2. Metti le query multimediali sotto le loro controparti di base. Per esempio, se ho un modulo chiamato "news-item", potrei mettere tutti gli stili necessari per le query dei media proprio sotto la definizione di quel modulo.

Sono propenso a quest'ultimo, ma significherebbe che avrei molte più query multimediali separate (separate per ogni blocco logico di CSS che richiede un adattamento reattivo).

Qualche idea su questo?

Answer 1

ne dite di usare media query solo per caricare i fogli di stile specifici dispositivo

come:

@import url(mydevice.css) this and (that); 

o:

<link rel="stylesheet" media="only this and (that)" href="mydevice.css" /> 

... se stai guardando le regolazioni specifiche dei dispositivi come una sorta di "sottotemi" di un layout principale (semplicemente sovrascrivendo alcune proprietà), anche questo avrebbe senso.

Answer 2

Con Sass è più facile utilizzare le query multimediali direttamente sotto le controparti. Ma se il tuo CSS è ben commentato nei tuoi moduli, non vedo un problema a mettere le query in secondo piano poiché sarebbe facile da trovare.

Finirai per scrivere un po 'più di codice che ridigita le query, ma non è un grosso problema.

Answer 3

L'approccio n. 2 funziona meglio per me.

Quando ero un novizio, stavo usando Approccio # 1 - stavo scrivendo le mie domande dei media insieme (in fondo del mio foglio di stile o in un altro file).

.header { ... } 
.news-item { ... } 
.footer { ... } 

/** 
* ... 
* 
* bla bla, imagine a huge amount of styles here 
* 
* ... 
*/ 

/** All style tweaks for screens < 1024px */ 
@media screen and (max-width: 1024px) { 
    .header { ... } 
    .news-item { ... } 
} 

Questo approccio ha alcuni aspetti negativi. In base alla mia esperienza, il più notevole è che la manutenibilità è un duro. Il motivo principale: la logica .news-item è distribuita su più righe di CSS non correlate.

In seguito, naturalmente, ho deciso di mantenere insieme gli stili correlati. Approccio # 2:

/** Header's styles and media queries */ 
.header { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .header { ... } 
} 
@media screen and (max-width: 720px) { 
    .header { ... } 
} 

/** News-item's styles and media queries */ 
.news-item { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .news-item { ... } 
} 
@media screen and (max-width: 720px) { 
    .news-item { ... } 
} 

/** ... and so on */ 

Tuttavia, in questo approccio, ripetendo i media interroga max-width valori a tutto tondo non ha un aspetto abbastanza gestibile. Ho risolto questo problema utilizzando un pre-processore CSS (come SASS) che mi consente di sostituire tutti con variabili e definirli una volta.

Per aumentare la manutenibilità e rendere queste definizioni molto più eleganti ho iniziato a utilizzare un'astrazione in cima alle Media Queries.

Se siete interessati a maggiori informazioni, si prega di read on my blog post :-)

Answer 4

Può essere che si può provare css variables, che è il supporto nativo riutilizzare il CSS!

:root { 
 
    --main-color: #F06D06; 
 
} 
 

 
.main-header { 
 
    color: var(--main-color); 
 
} 
 
.main-footer { 
 
    background-color: var(--main-color); 
 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care

https://css-tricks.com/difference-between-types-of-css-variables/