Variables CSS

Hola Fabian, espero que estés bien

Gracias por compartir tu ejercício práctico con nosotros! Tu contribución es fundamental para el crecimiento de nuestra comunidad en Alura. Sigue comprometido y no dudes en regresar al foro en caso que tengas alguna duda o dificultad.

¡Abrazos y buenos estudios!

1. Evitar variables duplicadas

Tienes dos veces --color-terciario, lo que significa que la última (#22D4FD) sobrescribirá la primera (#F6F6F6). Asegúrate de definir solo una versión de cada variable.

:root {
    --color-primario: #000000;
    --color-terciario: #22D4FD; /* O usa un nombre diferente si necesitas ambos colores */

    --fuente-monserrat: "Montserrat", sans-serif;
    --fuente-krona: "Krona One", sans-serif;
}

Si necesitas ambos colores, usa nombres más específicos, por ejemplo:

--color-terciario-claro: #F6F6F6;
--color-terciario-oscuro: #22D4FD;

2. Usar nombres de variables descriptivos

Si --color-primario es negro y --color-terciario es azul, podrías renombrarlos para mayor claridad:

--color-texto: #000000;
--color-acento: #22D4FD;

3. Definir una paleta más completa

Si planeas usar más colores en tu diseño, define variables adicionales para consistencia:

--color-fondo: #ffffff;
--color-texto: #000000;
--color-acento: #22D4FD;
--color-secundario: #F6F6F6;

Esto te ayuda a tener un esquema de colores más flexible.

4. Optimizar las fuentes

Si los usuarios no tienen Montserrat o Krona One, sus navegadores usarán la fuente predeterminada. Puedes agregar fuentes alternativas compatibles:

--fuente-monserrat: "Montserrat", Arial, sans-serif;
--fuente-krona: "Krona One", Helvetica, sans-serif;

5. Agrupar por categoría

Para mejorar la organización del código, puedes agrupar variables de color y tipografía:

:root {
    /* Colores */
    --color-texto: #000000;
    --color-fondo: #ffffff;
    --color-acento: #22D4FD;
    --color-secundario: #F6F6F6;

    /* Fuentes */
    --fuente-monserrat: "Montserrat", Arial, sans-serif;
    --fuente-krona: "Krona One", Helvetica, sans-serif;
}

Esto hace que tu código sea más fácil de mantener.

6. Compatibilidad con modo oscuro (opcional)

Si quieres un diseño adaptable, podrías definir variables específicas para prefers-color-scheme:

@media (prefers-color-scheme: dark) {
    :root {
        --color-texto: #ffffff;
        --color-fondo: #000000;
        --color-acento: #22D4FD;
    }
}

Esto ajustará los colores automáticamente cuando el usuario tenga activado el modo oscuro.