css - queries - sass mixin

¿Hay alguna ventaja al agrupar las consultas de medios css?

Question

(esto puede haber sido respondido ya, aunque no se pudo encontrar la respuesta)

La anulación de la consulta @media tradicional 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 @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 en tu css (tengo alrededor de 20 hasta ahora).

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 cuanto al rendimiento.

He probado el perfil de chrome css pero no pude ver nada específico de las consultas de @media.

( Más información sobre @media en sass en esta página )

Answer 1

Supongo que el hecho de tener que ejecutar la comprobación de consultas de medios una vez (y luego cargar todos los estilos dentro de ella) sería menos gravoso que revisar cada selector, pero no tengo pruebas sólidas de esto. Si obtienes el lanzamiento de Chrome de Canary, hay herramientas de consulta de medios allí.

Como está utilizando SASS, este artículo puede ser de interés - http://css-tricks.com/media-queries-sass-3-2-and-codekit/

Answer 2

Un poco tarde para la fiesta, pero según las pruebas por debajo del impacto en el rendimiento parece ser mínimo. La prueba muestra los tiempos de renderizado para una página de ejemplo con 2000 consultas de medios separados y combinados, respectivamente.

http://aaronjensen.github.com/media_query_test/

El principal beneficio parece estar en el tamaño del archivo más que en cualquier otra cosa, lo cual, si está comprimiendo su CSS para la producción, se reducirá sustancialmente de todos modos.

Pero en última instancia, como lo indica la publicación a continuación:

"Si tienes más de 2000 consultas de medios en tu CSS, creo que deberías reconsiderar tu estrategia de desarrollo de UI en lugar de usar una gema para volver a procesar tu CSS".

Publicación del blog que detalla el tema: http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries