¿Hay alguna ventaja al agrupar las consultas de medios css?
(esto puede haber sido respondido ya, aunque no se pudo encontrar la respuesta)
La anulación de la consulta tradicional @media tiende a agrupar toda la anulación para un tamaño / medio en el mismo grupo de corchetes.
p.ej.
.profile-pic {
width:600px;
}
.biography {
font-size: 2em;
}
@media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
float: none;
}
.biography {
font-size: 1.5em;
}
}
En Sass, hay una manera realmente ingeniosa de escribir anulaciones de consultas de @media dentro de la declaración anidada, de esta manera:
.profile-pic {
width:600px;
@media screen and (max-width: 320px) {
width: 100px;
float: none;
}
}
.biography {
font-size: 2em;
@media screen and (max-width: 320px) {
font-size: 1.5em;
}
}
ahora, cuando se compila, sass no agrupa los bloques de consulta @media, por lo que la salida termina siendo algo como esto:
.profile-pic {
width:600px;
}
@media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
float: none;
}
}
.biography {
font-size: 2em;
}
@media screen and (max-width: 320px) {
.biography {
font-size: 1.5em;
}
}
He usado esta técnica para un proyecto reciente y cuando aplicas ese principio a un proyecto mucho más grande, terminas con una sección de consulta de @media múltiple diseminada a través de tu css (hasta el momento tengo 20).
Me gusta bastante la técnica sass, ya que hace que sea más fácil seguir el flujo de anulaciones (y también hace que sea más fácil mover las cosas).
Sin embargo, me pregunto si hay alguna desventaja en tener varias secciones de @media a través del CSS, particularmente en lo que respecta al rendimiento.
He probado el perfil de chrome css pero no pude ver nada específico de las consultas de @media.