¿Dónde colocar las consultas de medios de CSS3?

Question

Estoy teniendo un debate filosófico conmigo mismo sobre el mejor lugar para poner consultas de medios dentro de las hojas de estilo. Estoy intentando estructurar mi CSS modularmente (como OOCSS o SMACSS, etc.). Dado ese contexto, veo dos opciones:

1. Coloque todas las consultas multimedia juntas en una hoja de estilo o sección de la hoja de estilo principal.
2. Ponga las consultas de medios debajo de sus equivalentes de base. Por ejemplo, si tengo un módulo llamado "noticia-artículo", podría colocar cualquier estilo de consulta de medios necesario justo debajo de la definición de ese módulo.

Me inclino por este último, pero significaría que tendría muchas más consultas de medios separadas (por separado para cada bloque lógico de CSS que requieren un ajuste sensible).

¿Alguna idea de esto?

Answer 1

¿Cómo sobre el uso de preguntas de los medios sólo para cargar dispositivo de hojas de estilo específicas

como:

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

o:

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

... si usted está buscando en los ajustes específicos del dispositivo como una especie de "subtemas" para un diseño principal (sobrescribiendo algunas propiedades), esto también tendría sentido para mí.

Answer 2

Con Sass es más fácil utilizar las consultas de medios directamente debajo de las contrapartes. Pero si su CSS está bien comentado en sus módulos, no veo un problema para poner las consultas a continuación, ya que sería fácil de encontrar.

Terminará escribiendo un poco más de código reescribiendo las consultas, pero no es un gran problema.

Answer 3

Enfoque # 2 funciona mejor para mí.

Cuando era novato, estaba usando Método n.º 1 - Estaba escribiendo mis consultas de medios juntas (en la parte inferior de mi hoja de estilo o en otro archivo).

.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 { ... } 
} 

Este enfoque tiene algunas desventajas. Según mi experiencia, la más notable es que la capacidad de mantenimiento es difícil. La razón principal: la lógica .news-item se extiende a través de múltiples líneas de CSS no relacionadas.

Más tarde, naturalmente, decidí mantener juntos los estilos relacionados. Enfoque # 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 */ 

Sin embargo, en este enfoque, la repetición de los medios de comunicación consulta max-width valores de todo alrededor no se ve lo suficientemente fácil de mantener. Resolví este problema usando un preprocesador CSS (como SASS) que me permite reemplazarlos por variables y definirlos una vez.

Para aumentar la capacidad de mantenimiento y para hacer que estas definiciones sean mucho más elegantes, comencé a usar una abstracción en la parte superior de las consultas de medios.

Si usted está interesado en más detalles, por favor :-) read on my blog post

Answer 4

Puede ser que usted puede intentar css variables, que es el soporte nativo reutilizar el 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/