Cómo estructurar las consultas de los medios en SASS

Sep 14, 2025

Cómo

[dieciséis]

En prácticamente, cada sitio ahora está construido con al menos un diseño web receptivo. La forma en que estructuramos estos estilos responsivos tiene una relación directa con la compleja que será el proyecto para mantener y editar en el futuro a medida que se realicen las actualizaciones y el proyecto crece en tamaño.

A pesar de esto, parece que un enfoque ampliamente aceptado para la forma en que y dónde estructurar estos estilos receptivos aún no se ha adoptado consistentemente por los desarrolladores. Aunque en ninguna parte tan malo como "los viejos tiempos" de CSS, antes de los preprocesadores y metodologías de nombres, esto está causando un enfoque inconsistente y con frecuencia desordenado para estructurar los estilos sensibles para los elementos.

¿Sólo empezar a empezar con su sitio? Elegir un top Creador de sitios web y Alojamiento web Servicio. ¿Trabajando con un gran equipo? Asegúrese de que su almacenamiento en la nube Mantiene a todos al día con su sistema de diseño.

¿Qué es el SASS?

CSS en el pasado

Para entender el problema que enfrentamos, volvamos al principio. Una de las razones por las que los preprocesadores de CSS como SASS o menos se crearon en primer lugar, en primer lugar, porque CSS puede ser extremadamente desordenado y es famoso de mantener. Solíamos encontrar que después de un tiempo, incluso los sitios web pequeños tenían líneas sobre líneas de estilos CSS que se dejaron en su lugar solo porque el desarrollador no estaba seguro de si se requiriera o los restos de una característica eliminada o un elemento desactualizado que pudiera eliminarse.

Tome el siguiente escenario como ejemplo:

 .Heading {Fondo: # 000000; };
.title {talla de fuente: 16px; };
.title_small {talla de fuente: 14px; }
.title_alt {font-family: sans-serif; }

Aunque puede pensar que es seguro asumir que el elemento .itle es el título del elemento. En este contexto, de hecho, en realidad, no puede estar completamente seguro de que no se utiliza para diseñar ningún otro elemento de título en el sitio. . Además, ¿dónde se usa la clase Title_alt y todavía se requiere o en uso? Puede ver cómo incluso con un ejemplo tan simple, puede convertirse en un ejercicio que requiere mucho tiempo para verificar todo esto antes de realizar cambios.

Debido a esto, muchos desarrolladores ahorrarían tiempo agregando una nueva clase al elemento o utilizando un selector de CSS más complejo para hacer los cambios que deseaban, lo que a su vez aumentaba la complejidad de los CSS para la próxima vez que se necesitaba un cambio. .

Preprocesadores, convenciones de nombramiento y CSS modulares.

Gracias a la capacidad de anidar los estilos, usar variables, extender otras clases y más, los preprocesadores revolucionaron la forma en que creamos y mantenemos CSS. Desafortunadamente, no resuelven completamente el problema de los estilos desordenados y desactualizados que se propagan y crecen a lo largo de un proyecto, ya que envejece como una infección.

A lo largo, vino a nombrar convenciones y metodologías CSS, como Becerro , que cuando se aplica, da un nivel mucho mayor de contexto a los estilos.

Cuando se combina con la fabricación de variaciones, modificaciones y los estilos de elementos anidados autónomos usando [sesenta y cinco] Módulos CSS

, nació una forma muy fuerte de estructurar tus estilos.

A continuación, puede ver cómo estas mejoras pueden resolver los problemas que encontramos con nuestro ejemplo de código anterior:

 .Heading {
Fondo: $ negro;
}

.Heading__title {
Tamaño de fuente: 16px;

& amp; .hheading__title - pequeño {
Tamaño de fuente: 14px;
}
}

.post__itlle - alt {
Fuente-familia: sans-serif;
}

Está claro al instante que los estilos de título aquí están específicamente contenidos dentro del elemento de encabezado. Puede eliminar / editarlos de forma segura sin preocuparse por afectar a otros elementos. También puede ver que el pequeño título fue una variación del título del encabezado, pero que el estilo del título Alt fue para otro elemento.

En mi opinión, cuando siga esta combinación de estructura y metodología de nombres, es bastante fácil crear estilos CSS limpios y fácilmente mantenibles. El contexto se puede obtener rápidamente y los módulos autónomos de CSS pueden copiarse y pegarse en otros proyectos, o modificar y eliminarse con facilidad.

Puede parecer que si se resolviera el problema del código desordenado y no reincorporable. Pero como el diseño receptivo se hizo cada vez más relevante, se hizo evidente que estábamos repitiendo muchos de nuestros errores nuevamente y generando enfoques maltratados, demasiado complejos para crear sitios web sensibles.

Resolver este problema es donde la burbuja de la consulta de los medios entra en juego.

Ubicaciones de estilo responsivo

Gracias a las mejoras mencionadas en nuestro enfoque para crear CSS, siempre que hare o colabore en un proyecto en estos días, rara vez experimento el temor o la preocupación de que me estaba abriéndome con el fuego de la especificidad del infierno o la desorganización estructural que usé. Tener en esas situaciones. Ahora sé que puedo encontrar y entender rápidamente las clases y estilos relevantes gracias a las metodologías de nombramiento, y hacer mis cambios sin consecuencias inimaginables para otros elementos, gracias a los CS modulares.

Desafortunadamente, una causa importante de la frustración que encuentro es que los estilos receptivos todavía están ubicados de manera inconsistente en todo el proyecto. Bien, pueden estar contenidos dentro de una estructura modular y se denominaron adecuadamente en una metodología de nombres, pero el proyecto por proyecto, veo muchas formas diferentes de que los desarrolladores eligen incluir sus estilos de respuesta.

Algunos crean un SASS separado parcial llamado _mobile.scsss o _tablet.scss, por ejemplo. Algunos colocan las consultas de los medios en la parte inferior del archivo relevante en orden ascendente o descendente y otros solo los colocan al azar entre estilos para otros elementos. Con este enfoque, me encuentro tabulando entre archivos y desplazamiento a la parte superior e inferior de los archivos solo para obtener una comprensión completa de los estilos de un elemento en diferentes interruptores.

Consulta de medios burbujeante

Como puede ver, hay muchos problemas con esto que se combinan para hacer que el desarrollador pase más tiempo trabajando en cambios / enmiendas de las que realmente se necesita.

Duplica los estilos y hace que el proceso mantenga y encuentra todos los estilos relevantes para un componente más duro. Tienes que buscar en múltiples ubicaciones o archivos para obtener una imagen completa de los estilos de un elemento.
El elemento ya no es autónomo. No puede reutilizarlo fácilmente en otro proyecto o eliminar confiadamente / modificarlo sin efectos adversos o código persistente restante.
Para cada nuevo proyecto, el tiempo se desperdicia a quienes el proyecto se acerca a los estilos sensibles.
El cambio entre los proyectos se vuelve más difícil porque tiene que cambiar entre los enfoques en su cabeza. Esto puede llevar a proyectos accidentalmente tener una mezcla de enfoques, lo que nuevamente conduce a CSS desordenados.

La solución que me gusta implementar para solucionar esto se llama burbujea de consulta de medios. La forma más sencilla de explicarlo es considerar que las consultas de medios sean como cualquier otra variación de su elemento modular. Lo mismo que una clase de variación de BEM de .Heading__title es .Heading__Title-variación, por ejemplo. Esto significa que la consulta de los medios debe ser anidada dentro, al igual que sus clases de modificación. Vea el siguiente código como un ejemplo de esto:

 .Heerder {
Fondo: $ negro;

Pantalla @media solo y (Min-Anchth: 640px) {
Fondo: $ blanco;
}
}

En este ejemplo, puede ver claramente en un lugar donde el fondo para el encabezado cambia a blanco a 640px o superior. Al automatizar la consulta de los medios junto con los estilos del elemento, una vez más ha creado un módulo totalmente autónomo que se puede reutilizar o editar con confianza. No hay necesidad de verificar un archivo _mobile.scss o buscar el proyecto para otras menciones de la clase para asegurarse de que haya cubierto todos los puntos de interrupción.

Consulta de medios anidados burbujeantes

Una vez más, he visto muchas variaciones de cómo los desarrolladores eligen estructurar los estilos sensibles de sus elementos. Esto debe considerarse diferente al estilo del elemento padre y todas las consultas y estilos de los medios deben ser autónomos. Vea el siguiente ejemplo:

 .Heading__title {
Tamaño de fuente: 16px;

Pantalla @media solo y (Min-Anchth: 640px) {
Tamaño de fuente: 18px;
}

& amp; .hheading__title - pequeño {
Tamaño de fuente: 14px;

Pantalla @media solo y (Min-Anchth: 640px) {
Tamaño de fuente: 16px;
}
}
}

Puede ver que el tamaño de fuente para el encabezado, elitle se hace más grande cuando la ventana electrónica es 640px o más grande y cómo la variación más pequeña del título del encabezado también se amplía, pero se define para ser más pequeña que la norma. Usando esta técnica, es muy importante aplicar firmemente la metodología BEM para asegurarse de que no termine anidando varios niveles profundos. Por ejemplo, asegúrese de que el elemento .Heading__title sea un módulo CSS autónomo que no esté innecesamente anidado dentro del elemento.

Limpiador de estilos de respuesta

Al tomar lo que aprendimos de los beneficios proporcionados por BEM y CSS modulares y la aplicamos a las consultas de los medios dentro de la misma estructura, nos detendramos repitiendo los errores de nuestro pasado.

Al trabajar con las consultas de los medios de este modo, no tiene que aprender una metodología o estructura totalmente nueva para sus estilos. Básicamente, estamos tomando el enfoque de CSS modular y la aplicamos a nuestras consultas de medios, que deben sentirse bastante naturales.

También estamos creando CSS más limpios con menos duplicación de clases CSS a través de archivos y ahorro de tiempo de desarrollo eliminando la necesidad de verificar múltiples ubicaciones al hacer las modificaciones.

Este artículo fue publicado originalmente en neto , la revista para diseñadores y desarrolladores profesionales web. Suscríbete a la red aquí .

Artículos relacionados:

Crea animaciones frescas de UI CSS con SASS
10 cosas que nunca sabías que podrías hacer con sass
Herramientas de diseño web para ayudarlo a trabajar más inteligentemente.

Cómo estructurar las consultas de los medios en SASS

CSS en el pasado

Preprocesadores, convenciones de nombramiento y CSS modulares.

Ubicaciones de estilo responsivo

Consulta de medios burbujeante

Consulta de medios anidados burbujeantes

Limpiador de estilos de respuesta

Cómo - Artículos más populares

Cómo dibujar los músculos

Cómo dibujar un león

Cómo crear una página cómica

Comienza con Babel 7

Cómo construir un sitio de blogs con Gatsby

Aprende a modelar una persona 3D en Zbrush y Maya

Diseñe un sitio receptivo con dimensionamiento basado en EM

Cómo crear efectos asombrosos con formas CSS

Categorías