Aprenda a crear la siguiente capacidad de respuesta con las variables CSS.

Cómo hacer que la capacidad de respuesta sea muy simple con las variables CSS

Un tutorial rápido sobre cómo crear sitios web receptivos en 2018.

Si nunca antes ha oído hablar de las variables CSS, es una nueva característica de CSS que le brinda el poder de las variables en su hoja de estilo, sin tener que hacer ninguna configuración.

En esencia, las variables CSS le permiten omitir la antigua forma de configurar estilos:

h1 {
  tamaño de fuente: 30px;
}
barra de navegación> a {
  tamaño de fuente: 30px;
}

... a favor de esto:

: root {
  --base-font-size: 30px;
}
h1 {
  font-size: var (- base-font-size);
}
barra de navegación> a {
  font-size: var (- base-font-size);
}

Si bien la sintaxis puede parecer un poco extraña, esto le brinda el beneficio obvio de poder cambiar los tamaños de fuente en toda su aplicación solo cambiando la variable - base-font-size.

Si desea aprender las Variables CSS correctamente, consulte mi curso gratuito e interactivo de Variables CSS en Scrimba:

El curso contiene ocho screencasts interactivos.

O si desea obtener más información sobre el curso, también puede leer un recorrido de lo que aprenderá en el siguiente artículo:

Ahora veamos cómo esta nueva tecnología puede facilitarle la vida al crear sitios web receptivos.

La puesta en marcha

Vamos a agregar capacidad de respuesta a un sitio web de cartera que se ve así:

Se ve bien cuando se ve en su escritorio. Sin embargo, como puede ver en la imagen de la izquierda a continuación, este diseño no funciona bien en dispositivos móviles.

A la izquierda: cómo se ve en dispositivos móviles inicialmente. A la derecha: cómo queremos que se vea.

En la imagen correcta, hemos cambiado algunas cosas en los estilos para que funcione mejor en dispositivos móviles. Esto es lo que hemos hecho:

  1. Reorganizó la cuadrícula para que se apile verticalmente en lugar de a través de dos columnas.
  2. Movió todo el diseño un poco más arriba
  3. Redujo las fuentes

Para hacer esto, necesitábamos cambiar el siguiente CSS:

h1 {
  tamaño de fuente: 30px;
}
#navbar {
  margen: 30px 0;
}
#navbar a {
  tamaño de fuente: 30px;
}
.cuadrícula {
  margen: 30px 0;
  cuadrícula-plantilla-columnas: 200px 200px;
}

Más específicamente, necesitábamos hacer los siguientes ajustes dentro de una consulta de medios:

  • Reduce el tamaño de fuente de h1 a 20px
  • Reduzca el margen por encima y por debajo de la #navbar a 15px
  • Reduzca el tamaño de fuente dentro de #navbar a 20px
  • Reduzca el margen por encima de la cuadrícula a 15 px
  • Cambie el .grid de dos columnas a una columna
Nota: Hay, por supuesto, mucho más CSS en esta aplicación, incluso dentro de estos selectores. Sin embargo, por el bien de este tutorial, he eliminado todo lo que no estamos cambiando en la consulta de medios. Echa un vistazo a este parque infantil Scrimba para obtener el código completo.

La vieja manera

Hacer todo esto sería posible sin CSS Variables. Pero requeriría una cantidad innecesaria de código, ya que la mayoría de los puntos anteriores necesitarían su propio selector dentro de la consulta de medios, como este:

@media all y (ancho máximo: 450 px) {
  
  barra de navegación {
    margen: 15px 0;
  }
  
  barra de navegación a {
    tamaño de fuente: 20px;
  }
  
  h1 {
    tamaño de fuente: 20px;
  }
  .cuadrícula {
    margen: 15px 0;
    cuadrícula-plantilla-columnas: 200px;
  }
}

La nueva forma

Ahora veamos cómo se puede resolver esto con las variables CSS. Para empezar, almacenaremos los valores que estamos reutilizando o cambiando dentro de las variables:

: root {
  --base-font-size: 30px;
  --columnas: 200px 200px;
  --base-margin: 30px;
}

Y luego simplemente usaremos estas variables en la aplicación:

#navbar {
  margen: var (- margen base) 0;
}
#navbar a {
  font-size: var (- base-font-size);
}
h1 {
  font-size: var (- base-font-size);
}
.cuadrícula {
  margen: var (- margen base) 0;
  grilla-plantilla-columnas: var (- columnas);
}

Una vez que tengamos esta configuración, simplemente podemos cambiar los valores de las variables dentro de la consulta de medios:

@media all y (ancho máximo: 450 px) {
  : root {
    - columnas: 200px;
    --base-margin: 15px;
    --base-font-size: 20px;
}

Esto es mucho más limpio que lo que teníamos antes. Solo nos dirigimos a: root, en lugar de especificar todos los selectores.

Hemos reducido nuestra consulta de medios de cuatro selectores a uno y de trece líneas a cuatro.

Y este es solo un ejemplo simple. Imagine un sitio web completo donde, por ejemplo, --base-margin controle la mayor parte del espacio libre alrededor de la aplicación. Es mucho más fácil simplemente cambiar su valor, en lugar de llenar su consulta de medios con selectores complejos.

En resumen, las variables CSS son definitivamente el futuro de la capacidad de respuesta. Si desea aprender esta tecnología de una vez por todas, le recomiendo que consulte mi curso gratuito sobre el tema en Scrimba.

Te convertirás en un maestro de Variables CSS en muy poco tiempo :)

¡Gracias por leer! Soy Per Borgen, desarrollador front-end y cofundador de Scrimba. No dude en comunicarse conmigo a través de Twitter si tiene alguna pregunta o comentario.