Uso de Variables Custom en CSS para Optimizar Estilos

Clase 42 de 55 • Curso Definitivo de HTML y CSS

Clase anteriorSiguiente clase

Resumen

¿Cómo crear variables personalizadas en CSS?

Las variables personalizadas en CSS son una herramienta poderosa que nos permite definir y reutilizar valores en nuestros estilos de manera eficiente. Aunque las variables pueden sonar más asociadas a matemáticas o a lenguajes de programación como JavaScript, CSS también tiene esta capacidad. El uso de variables nos permite almacenar valores comunes que pueden ser reutilizados, evitando la repetición de código. Vamos a explorar cómo funcionan las variables en CSS a través de un ejemplo práctico.

¿Cómo se estructura un archivo HTML básico?

Primero, es esencial tener una estructura básica de archivo HTML donde podamos aplicar nuestros estilos CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Variables en CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main>
        <h1>Soy un título</h1>
        <section>
            <p>Lorem ipsum dolor sit amet.</p>
        </section>
    </main>
    <footer></footer>
</body>
</html>

En este ejemplo, hemos creado una estructura HTML con un header, main que contiene un h1 y un section con un párrafo, y un footer para la parte semántica.

¿Cómo definir estilos CSS básicos?

En el archivo CSS correspondiente, style.css, comenzaríamos con algunos códigos y técnicas básicas de CSS que ya conocemos:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

header {
    width: 100vw;
    height: 15vh;
    background-color: #003476; /* Color principal */
}

main {
    width: 100vw;
    height: 70vh;
    font-size: 1.8rem; /* 18 píxeles */
}

footer {
    width: 100vw;
    height: 15vh;
    background-color: #b4d2f7; /* Color secundario */
}

h1 {
    font-size: 4rem; /* 40 píxeles */
}

En este caso, hemos definido un tamaño de fuente base de 62.5% para que 1 rem equivalga a 10 píxeles, y hemos establecido estilos para el header, main, footer y h1.

¿Cómo se declaran y utilizan las variables en CSS?

Para declarar variables en CSS utilizamos el selector :root, que hace referencia a la raíz del documento HTML. Así, podemos declarar nuestras variables con la siguiente sintaxis:

:root {
    --primary-color: #003476;
    --secondary-color: #b4d2f7;
    --header-size: 4rem;
    --paragraph-font: 1.8rem;
}

Una vez declaradas, podemos utilizar estas variables en nuestro CSS con la función var():

header {
    background-color: var(--primary-color);
}

main {
    font-size: var(--paragraph-font);
}

footer {
    background-color: var(--secondary-color);
}

h1 {
    font-size: var(--header-size);
    color: var(--primary-color); /* Opcional para el texto */
}

¿Cuáles son los beneficios de usar variables en CSS?

Los beneficios de usar variables en CSS son especialmente notables en proyectos más grandes. Algunas de las ventajas incluyen:

  • Mantenimiento más fácil: Cambiar un valor en un solo lugar y ver los cambios reflejados en todo el proyecto.
  • Consistencia en el diseño: Evita discrepancias de color y tamaño de fuente.
  • Reusabilidad: Facilita la reutilización de estilos a través de diferentes módulos o componentes.

Las variables personalizadas son, sin duda, una herramienta valiosa para cualquier desarrollador CSS serio. Comienza a aplicarlas en tus proyectos y observa cómo mejoran tu flujo de trabajo y consistencia en el diseño. ¡Continúa explorando y perfeccionando tus habilidades en CSS!