Tutorial de diseño CSS: desde enfoques clásicos hasta las técnicas más recientes

Publicado: 2022-03-11

Dominar el diseño web sin dominar CSS es tan factible como aprender a nadar en tierra firme. Pero a diferencia de la natación, que, una vez dominada, es una habilidad que permanece contigo de por vida, dominar CSS es un proceso que en realidad nunca termina, ya que CSS en sí está en constante evolución.

El desafío se ve agravado por las diferencias en la implementación y el soporte de CSS en diferentes navegadores (e incluso en diferentes versiones del mismo navegador), así como por las diferentes tasas de adopción de las recomendaciones de CSS. Durante más de una década, los diseñadores y desarrolladores web han estado lidiando con ráfagas esporádicas e inconsistentes de funciones CSS3 adicionales compatibles con cada nueva versión del navegador.

Pero sea como sea, dominar CSS es una necesidad absoluta para cualquier diseñador o desarrollador web sólido. Este artículo lo guiará a través de algunos principios fundamentales de diseño de CSS, desde técnicas clásicas de CSS2 hasta los últimos enfoques de diseño en CSS3.

NOTA: Todos los ejemplos de código de este artículo usan elementos HTML5 y sintaxis Sass. El código de trabajo completo se puede clonar desde https://github.com/laureanoarcanio/css-layout-examples.

Caso de uso

Una de las mejores maneras de aprender una tecnología es tener un caso de uso específico que esté tratando de respaldar o un problema particular que esté tratando de resolver. Con ese fin, nos centraremos en un caso de uso con un conjunto específico de requisitos.

Nuestro caso de uso consiste en un diseño de aplicación web con cierto comportamiento dinámico. Contará con elementos fijos en la página como encabezado, pie de página, menú de navegación y subnavegación, así como una sección de contenido desplazable. Estos son los requisitos de diseño específicos:

  • Diseño básico
    • El encabezado, el pie de página, el menú de navegación y la subnavegación permanecen fijos en el desplazamiento
    • Los elementos de navegación y subnavegación ocupan todo el espacio libre vertical
    • La sección de contenido usa todo el espacio libre restante en la página y tiene un área desplazable
  • Comportamiento dinámico
    • El menú de navegación solo muestra íconos de forma predeterminada, pero también se puede expandir para mostrar texto (y luego se puede contraer para mostrar nuevamente solo íconos)
  • Variaciones de diseño
    • Algunas páginas tienen navegación secundaria junto al menú de navegación y otras no.

Tutorial de CSS utilizando técnicas clásicas de CSS2

Tutorial CSS

Para empezar, aquí está el marcado HTML5 que usaremos con nuestra implementación de muestra usando CSS clásico:

 <body class="layout-classic"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Posicionamiento fijo

En CSS2, podemos lograr los elementos fijos en la página (encabezado, pie de página, etc.) empleando un modelo de diseño posicionado que utiliza un posicionamiento fijo.

Además, utilizaremos la propiedad CSS z-index para garantizar que nuestros elementos fijos permanezcan "sobre" el resto del contenido de la página. La propiedad z-index especifica el orden de apilamiento de un elemento, donde un elemento con mayor orden de apilamiento siempre está "encima" de un elemento con un orden de apilamiento más bajo. Tenga en cuenta que la propiedad z-index solo funciona con elementos posicionados . Para nuestro ejemplo, usaremos arbitrariamente un valor de z-index de 20 (que es más alto que el valor predeterminado) para garantizar que nuestros elementos fijos permanezcan visualmente a la vanguardia.

Además, estableceremos la propiedad de width al 100%, lo que le indica al navegador que use todo el espacio disponible horizontalmente para el elemento.

 #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }

Bien, ese es el encabezado y el pie de página. Pero, ¿qué pasa con #nav y #subnav ?

Expansión CSS

Para #nav y #subnav , usaremos una técnica un poco más sofisticada conocida como CSS Expansion , que se puede usar al colocar elementos como fijos (es decir, en una posición fija en la página) o como absolutos (es decir, en una posición especificada relativa a su ancestro más cercano o al bloque que lo contiene).

La expansión vertical se logra al establecer las propiedades top e bottom de un elemento en un valor fijo, por lo que el elemento se expandirá verticalmente para usar el espacio vertical restante en consecuencia. Básicamente, lo que estás haciendo es vincular la parte superior del elemento a una distancia específica desde la parte superior de la página y la parte inferior del elemento a una distancia específica desde la parte inferior de la página, de modo que el elemento se expanda para llenar todo el espacio vertical. entre esos dos puntos.

De manera similar, la expansión horizontal se logra al establecer las propiedades left y right de un elemento en un valor fijo, por lo que el elemento se expandirá horizontalmente para usar el espacio horizontal restante en consecuencia.

Para nuestro caso de uso, necesitamos usar la expansión vertical.

 #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }

Posicionamiento predeterminado (estático)

El área principal de contenido desplazable puede basarse simplemente en el posicionamiento predeterminado (estático), mediante el cual los elementos se representan en el orden en que aparecen en el flujo del documento. Dado que todo lo demás en nuestra página está en una posición fija, este elemento es el único que está en el flujo del documento. Como resultado, todo lo que tenemos que hacer para colocarlo correctamente es especificar su propiedad de margin para evitar cualquier superposición con el encabezado fijo, el pie de página y la navegación/subnavegación:

 #main { margin: 6em 0 4em 20em; }

Y con eso, hemos satisfecho los requisitos básicos de diseño de nuestro caso de uso usando CSS2, pero aún necesitamos satisfacer los requisitos adicionales para la funcionalidad dinámica.

Comportamiento dinámico utilizando técnicas clásicas de CSS2

Los requisitos establecían que nuestro menú de Navegación mostraría de manera predeterminada solo íconos, pero también podría expandirse para mostrar texto (y luego podría contraerse para mostrar nuevamente solo íconos).

Tutorial de CSS2 y CSS3

Comencemos simplemente agregando 5em al ancho del menú de navegación cuando está expandido. Haremos esto creando una clase CSS "expandida" que podemos agregar o eliminar dinámicamente del elemento del menú de navegación:

 #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } }

Aquí hay un ejemplo del código JavaScript (en este ejemplo, usamos jQuery) que se puede usar para alternar dinámicamente el menú de navegación entre el modo expandido y contraído, según el usuario haga clic en el icono de alternancia de navegación:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav'').toggleClass('expanded'); });

Y con eso, nuestro menú de navegación ahora se puede expandir o contraer dinámicamente. Genial.

Bueno, algo genial, pero no del todo. Aunque el menú de navegación ahora puede expandirse y contraerse, no funciona bien con el resto de la página. El menú de navegación expandido ahora se superpone a la subnavegación, lo que definitivamente no es el comportamiento deseado.

Esto revela una de las limitaciones clave de CSS2; es decir, hay demasiado que necesita ser codificado con valores de posición fijos. Como resultado, para los otros elementos en la página que necesitan ser reposicionados para acomodar el menú de navegación expandido, necesitamos definir clases CSS "expandidas" adicionales con valores de posición aún más fijos.

 #subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

Luego, debemos extender nuestro código JavaScript para agregar un ajuste dinámico de estos otros elementos también cuando el usuario hace clic en el botón de navegación:

 $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

Bien, eso funciona mejor.

Variaciones de diseño utilizando técnicas clásicas de CSS2

Ahora abordemos el requisito de tener algunas páginas que ocultan el submenú de navegación. Específicamente, queremos que el submenú de navegación se oculte cuando el usuario haga clic en el icono de "usuarios" en el área de navegación principal.

Tutorial de diseño de CSS

Entonces, primero, crearemos una nueva clase "oculta" que aplique display: none :

 .hidden { display: none; }

Y nuevamente, usaremos JavaScript (jQuery) para aplicar la clase CSS "oculta" al elemento #subnav cuando el usuario haga clic en el ícono de usuarios:

 $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });

Con esta adición, el elemento #subnav se oculta correctamente cuando el usuario hace clic en el ícono de "usuarios", pero el espacio que había ocupado permanece sin usar , en lugar de que los otros elementos se expandan para usar el espacio vacío por el elemento #subnav .

Para obtener el comportamiento deseado cuando ocultamos el elemento #subnav , emplearemos uno de los selectores de CSS menos conocidos, pero muy útiles, conocido como el selector de hermanos adyacentes .

Selector de CSS hermano adyacente

El selector de hermanos adyacente le permite especificar dos elementos, seleccionando solo aquellas instancias del segundo elemento que siguen inmediatamente al primer elemento especificado.

Por ejemplo, lo siguiente seleccionará solo aquellos elementos con el ID main que siguen inmediatamente a un elemento con el ID subnav :

 #subnav + #main { margin-left: 20em; }

El fragmento de CSS anterior establece el margen izquierdo de #main en 20em si y solo si sigue inmediatamente a un #subnav mostrado.

Sin embargo, si se expande #nav (lo que hace que la clase expanded también se agregue a #main , según nuestro código anterior), movemos el margen izquierdo de #main a 25em.

 #subnav + #main.expanded { margin-left: 25em; }

Y, si #subnav está oculto, movemos el margen izquierdo de #main hasta 6em para estar justo al lado de #nav :

 #subnav.hidden + #main { margin-left: 6em; }

(Nota: una desventaja de usar el selector de hermanos adyacente es que nos obliga a tener siempre #subnav presente en el DOM, independientemente de si se muestra o no).

Finalmente, si #subnav está oculto y #nav está expandido, establecemos el margen izquierdo de #main en 11em :

 #subnav.hidden + #main.expanded { margin-left: 11em; }

Esto nos permite unir las cosas sin ningún código JavaScript pesado, pero también podemos ver cuán complicado puede volverse este código si agregamos más elementos a la página. Vemos una vez más que, con CSS2, se necesita mucha codificación de los valores de posición para que las cosas funcionen correctamente.

Aprovechando CSS3

CSS3 ofrece una funcionalidad significativamente mejorada y técnicas de diseño que lo hacen mucho más fácil de usar y mucho menos dependiente de valores codificados. CSS3 está inherentemente diseñado para admitir un comportamiento más dinámico y, en ese sentido, es más "programable". Examinemos algunas de estas nuevas capacidades en relación con nuestro caso de uso.

Función CSS3 calc()

La nueva función CSS3 calc() se puede utilizar para calcular los valores de las propiedades CSS de forma dinámica (tenga en cuenta, sin embargo, que la compatibilidad varía según los navegadores). La expresión proporcionada a la función calc() puede ser cualquier expresión simple que combine los operadores aritméticos básicos ( + , - , * , / ) usando reglas estándar de precedencia de operadores.

El uso de la función calc() puede ayudar a evitar gran parte de la codificación de valores requerida por CSS2. En nuestro caso, esto nos permite lograr la expansión de CSS de forma más dinámica. Por ejemplo:

 #nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }

Con la especificación de height anterior usando la función calc() , logramos el mismo resultado que logramos en CSS2 con top:6em y bottom:4em , pero de una manera mucho más flexible y adaptable, y sin necesidad de codificar las posiciones top e bottom valores.

Diseño de caja flexible CSS3

Flexbox es un nuevo diseño introducido en CSS3 (el soporte varía según los navegadores). El diseño de Flexbox simplifica la organización de elementos en una página de manera que se comporte de manera predecible en diferentes tamaños de pantalla, resoluciones y dispositivos. Por lo tanto, es particularmente útil en el contexto del diseño web receptivo.

Las características clave incluyen:

  • Posicionar elementos secundarios es mucho más fácil y los diseños complejos se pueden lograr de manera más simple y con un código más limpio.
  • Los elementos secundarios se pueden colocar en cualquier dirección y pueden tener dimensiones flexibles para adaptarse al espacio de exhibición.
  • Los elementos secundarios expanden automáticamente el contrato para adaptarse al espacio libre disponible.

Flexbox presenta su propio conjunto único de términos y conceptos. Algunos de estos incluyen:

  • Contenedor flexible. Un elemento con su propiedad de display establecida en flex o inline-flex que sirve como elemento contenedor para elementos flexibles.
  • Elemento flexible. Cualquier elemento dentro de un contenedor flexible. (Nota: el texto contenido directamente en un contenedor flexible se envuelve en un elemento flexible anónimo).
  • hachas Cada diseño de caja flexible tiene una flex-directio que designa el eje principal a lo largo del cual se distribuyen los elementos flexibles. El eje transversal es entonces el eje perpendicular al eje principal.
  • Líneas. Los elementos flexibles se pueden distribuir en una sola línea o en varias líneas según la propiedad flex-wrap .
  • Dimensiones. Los equivalentes de flexbox de alto y ancho son main size y cross size , que especifican los tamaños del eje principal y el eje transversal del contenedor flexible, respectivamente.

Bien, con esa breve introducción, aquí está el marcado alternativo que podemos usar si estamos usando un diseño de caja flexible:

 <body class="layout-flexbox"> <header></header> <div class="content-area"> <nav></nav> <aside></aside> <main></main> </div> <footer></footer> </body>

Para nuestro caso de uso de ejemplo, nuestro diseño principal (encabezado, contenido, pie de página) es vertical, por lo que configuraremos nuestro flexbox para usar un diseño de columna:

 .layout-flexbox { display: flex; flex-direction: column; }

Aunque nuestro diseño principal es vertical, los elementos de nuestra área de contenido (nav, subnav, main) están dispuestos horizontalmente. Cada contenedor flexible puede definir solo una dirección (es decir, su diseño debe ser horizontal o vertical). Por lo tanto, cuando el diseño requiere más que esto (un caso común es el diseño de una aplicación), podemos anidar varios contenedores uno dentro del otro, cada uno con un diseño direccional diferente.

Es por eso que agregamos un contenedor adicional (al que llamé content-area ) que envuelve #nav , #subnav y #main . De esta forma, el diseño general puede ser vertical, mientras que el contenido del área de contenido puede disponerse horizontalmente.

Ahora, para posicionar nuestros elementos flexibles, vamos a usar la propiedad flex que es una abreviatura de flex: <flex-grow> <flex-shrink> <flex-basis>; . Esas tres propiedades flexibles son las que determinan cómo nuestros elementos flexibles distribuyen el espacio libre que queda entre ellos en la dirección del flujo, de la siguiente manera:

  • flex-grow: especifica cuánto puede crecer un elemento en relación con el resto de elementos flexibles dentro del mismo contenedor
  • flex-shrink: especifica cómo un elemento puede encogerse en relación con el resto de los elementos flexibles dentro del mismo contenedor
  • base flexible: especifica el tamaño inicial de un elemento (es decir, antes de que se encoja o crezca)

Contenedores flexibles CSS: Cruz vs principal

Establecer flex-grow y flex-shrink en cero significa que el tamaño del elemento es fijo y no crecerá ni se reducirá para adaptarse a que haya más o menos espacio libre disponible. Esto es lo que hacemos para nuestro encabezado y pie de página ya que tienen un tamaño fijo:

 #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }

Para que un elemento ocupe todo el espacio libre disponible, establezca sus valores flex-grow flex-shrink y reducción flexible en 1 y establezca su valor flex-basis en auto . Esto es lo que hacemos para el área de contenido, ya que queremos que ocupe todo el espacio libre disponible.

Y como dijimos antes, queremos que los elementos dentro content-area se coloquen en la dirección de la fila, por lo que agregaremos display: flex ; y flex-direction: row; . Esto convierte a content-area en un nuevo contenedor flexible para #nav , #subnav y `#main.

Esto es lo que obtenemos para el CSS para content-area :

 .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ }

En el área de contenido, tanto #nav como #subnav tienen tamaños fijos, por lo que simplemente configuramos la propiedad flex en consecuencia:

 #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }

(Tenga en cuenta que agregué overflow-y: hidden a estas especificaciones de CSS para superar el contenido que excede y desborda la altura del contenedor. Chrome en realidad no necesita esto, pero FireFox sí).

#main ocupará el resto del espacio libre:

 #main { flex: 1 1 auto; overflow-y: auto; }

Todo esto se ve bien, así que ahora agreguemos nuestro comportamiento dinámico a esto y veamos cómo va.

El JavaScript es idéntico al que teníamos antes (excepto aquí, la clase contenedora de elementos CSS que estamos especificando es layout-flexbox mientras que antes era layout-classic ):

 $('.layout-flexbox #nav').on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });

Agregamos la clase expanded a CSS de la siguiente manera:

 #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

¡Y voilá!

Tenga en cuenta que esta vez no necesitamos informar a otros elementos sobre el cambio de ancho, ya que el diseño de flexbox maneja todo eso por nosotros.

Lo único que queda entonces es ocultar el navegador secundario. ¿Y adivina qué? Eso "simplemente funciona" también, sin ningún cambio adicional, utilizando el mismo código JavaScript que antes. Flexbox conoce el espacio libre y automáticamente hace que nuestro diseño funcione sin código adicional. Muy genial.

Flexbox también proporciona algunas formas interesantes de centrar elementos tanto verticales como horizontales. Aquí nos damos cuenta de lo importante que es para un lenguaje de presentación incluir la noción de espacio libre y lo escalable que puede llegar a ser nuestro código utilizando este tipo de técnicas. Por otro lado, los conceptos y la notación aquí pueden tomar un poco más de dominio que el CSS clásico.

Diseño de cuadrícula CSS3

Si Flexbox Layout está a la vanguardia de CSS3, entonces se podría decir que Grid Layout está a la vanguardia. La especificación W3C todavía se encuentra en un estado de borrador y todavía tiene un soporte de navegador bastante limitado. (Está habilitado en Chrome a través del indicador de "características experimentales de la plataforma web" en chrome://flags).

Dicho esto, personalmente no considero este borrador revolucionario. Más bien, como establecen los principios de diseño de HTML5: "Cuando una práctica ya está muy extendida entre los autores, considere adoptarla en lugar de prohibirla o inventar algo nuevo".

En consecuencia, las cuadrículas basadas en marcado se han utilizado durante mucho tiempo, por lo que ahora el diseño de cuadrícula CSS realmente sigue el mismo paradigma, ofreciendo todos sus beneficios y mucho más en la capa de presentación sin requisitos de marcado.

La idea general es tener un diseño de cuadrícula predefinido, fijo o flexible donde podamos colocar nuestros elementos. Al igual que el flexbox, también funciona según el principio de espacio libre y nos permite definir "direcciones" tanto verticales como horizontales en el mismo elemento, lo que brinda ventajas en el tamaño del código y la flexibilidad.

El diseño de cuadrícula presenta 2 tipos de cuadrículas; es decir, explícito e implícito . Para simplificar, nos vamos a centrar en cuadrículas explícitas en esto.

Al igual que flexbox, el diseño de cuadrícula presenta su propio conjunto único de términos y conceptos. Algunos de estos incluyen:

  • Contenedor de rejilla. Un elemento con su propiedad de display establecida en "cuadrícula" o "cuadrícula en línea" en el que los elementos contenidos se distribuyen al colocarlos y alinearlos en una cuadrícula predefinida (modo explícito). La cuadrícula es un conjunto de líneas de cuadrícula horizontales y verticales que se cruzan y dividen el espacio del contenedor de cuadrícula en celdas de cuadrícula. Hay dos conjuntos de líneas de cuadrícula; uno para definir las columnas y otro ortogonal a éste para definir las filas.
  • Pista de rejilla. El espacio entre dos líneas de cuadrícula adyacentes. A cada pista de cuadrícula se le asigna una función de tamaño, que controla qué tan ancho o alto puede crecer la columna o fila y, por lo tanto, qué tan separadas están sus líneas de cuadrícula delimitadoras.
  • Cuadrícula de celdas. El espacio entre dos filas adyacentes y dos líneas de cuadrícula de columnas adyacentes. Es la unidad más pequeña de la cuadrícula a la que se puede hacer referencia al colocar los elementos de la cuadrícula.
  • Longitud flexible. Una dimensión especificada con la unidad fr , que representa una fracción del espacio libre en el contenedor de cuadrícula.

Bosquejo de diseño de cuadrícula CSS

Aquí está el marcado alternativo que podemos usar si estamos usando un diseño de cuadrícula:

 <body class="layout-grid"> <header></header> <nav></nav> <aside></aside> <main></main> <footer></footer> </body>

Tenga en cuenta que con este diseño, no necesitamos un envoltorio adicional para el área de contenido como lo hicimos para el flexbox, ya que este tipo de diseño nos permite definir la designación del espacio del elemento en ambas direcciones en el mismo contenedor de cuadrícula.

Profundicemos en el CSS ahora:

 .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }

Hemos definido display: grid; en nuestro contenedor. Las propiedades grid-template-columns y grid-template-rows se especifican cada una como una lista de espacios entre las pistas de la cuadrícula. En otras palabras, esos valores no son la posición de las líneas de la cuadrícula; más bien, representan la cantidad de espacio entre dos pistas.

Tenga en cuenta que las unidades de medida se pueden especificar como:

  • una longitud
  • un porcentaje del tamaño del contenedor de la cuadrícula
  • una medida del contenido que ocupa la columna o fila, o
  • una fracción del espacio libre en la cuadrícula

Entonces con grid-template-columns: auto 0 auto 1em 1fr; tendremos:

  • 1 pista que define 2 columnas de ancho auto (espacio #nav )
  • 1 gutter de 0 (el margen para #subnav está a nivel de elemento, ya que puede estar presente o no, así evitamos tener doble gutter)
  • 1 pista que define 2 columnas de ancho auto (espacio #subnav )
  • 1 canalón de 1em
  • 1 pista usando 1fr para #main (ocupará todo el espacio restante)

Aquí usamos mucho el valor auto para la pista, lo que nos permite tener columnas dinámicas donde la posición y el tamaño de las líneas se definen por su contenido máximo. (Por lo tanto, necesitaremos especificar los tamaños de los elementos #nav y #subnav , lo cual haremos en breve).

De manera similar, para las líneas de fila tenemos grid-template-rows: 5em 1em 1fr 1em 3em; eso establece que nuestro #header y #footer de página sean fijos y todos los elementos intermedios usen el espacio libre restante mientras usan medianeras de 1em .

Ahora veamos cómo colocamos los elementos reales que se colocarán en nuestra cuadrícula definida:

 #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }

Esto especifica que queremos que nuestro encabezado esté entre las líneas de cuadrícula 1 y 6 (ancho completo) y entre las líneas de cuadrícula 1 y 2 para nuestras filas. Lo mismo para el pie de página, pero entre las dos últimas líneas (en lugar de las dos primeras). Y el área principal está configurada apropiadamente para el espacio que se supone que debe ocupar.

Tenga en cuenta que las propiedades grid-column y grid-row son abreviaturas para especificar grid-column-start / grid-column-end y grid-row-start / grid-row-end , respectivamente.

Bien, volvamos a #nav y #subnav . Dado que anteriormente colocamos #nav y #subnav en la pista con valores automáticos, debemos especificar el ancho de estos elementos (lo mismo para el modo expandido, solo cambiamos su ancho y el diseño de cuadrícula se encarga del resto).

 #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; }

¡Así que ahora podemos alternar nuestra #nav y también ocultar/eliminar la #subnav y todo funciona perfectamente! El diseño de cuadrícula también nos permite usar alias para nuestras líneas, por lo que eventualmente cambiar las cuadrículas no dividirá el código, ya que está asignado a un nombre y no a una línea de cuadrícula. Definitivamente espero que esto sea más ampliamente compatible con más navegadores.

Conclusión

Incluso con las técnicas clásicas de CSS, se puede lograr mucho más de lo que muchos desarrolladores web se dan cuenta o aprovechan. Dicho esto, gran parte de esto puede ser bastante tedioso y puede implicar la codificación de valores repetidamente a lo largo de una hoja de estilo.

CSS3 ha comenzado a ofrecer técnicas de diseño mucho más sofisticadas y flexibles que son significativamente más fáciles de programar y que evitan gran parte del tedio de las especificaciones CSS anteriores.

Dominar estas técnicas y paradigmas, tanto para CSS2 como para CSS3, es esencial para aprovechar todo lo que CSS tiene para ofrecer a fin de optimizar tanto la experiencia del usuario como la calidad de su código. Este artículo realmente solo representa la punta del iceberg de todo lo que hay que aprender y todo lo que se puede lograr con el poder y la flexibilidad de CSS. ¡Tienen en él!

Relacionado: *Explorando SMACSS: arquitectura escalable y modular para CSS*