Lección 6: Fundamentos de CSS y la cascada: Caso de estudio real

Explicación del concepto

Esta lección pasa de la práctica aislada a un pequeño problema de interfaz realista. Diseñarás un "theme switch" para un diseño tipo tarjeta usando propiedades personalizadas para que un solo cambio actualice varias partes del diseño a la vez. El enfoque no está en crear algo llamativo, sino en organizar los estilos de una manera que se sienta práctica: variables legibles, reglas de componentes claras y anulaciones predecibles. Al trabajar con un ejemplo realista, verás cómo la cascada apoya decisiones de diseño reutilizables en lugar de convertirse en una fuente de confusión.

Dónde poner el código

1. Comienza con variables y entradas. Coloca las reglas de estilo en selectores de clase reutilizables.
2. Agrega la lógica de procesamiento en la sección central.
3. Finaliza con la salida y una validación rápida.

Referencia de comandos

• Identifica qué valores deben cambiar entre temas y coloca solo esos en propiedades personalizadas.
• Prueba el componente en modos claro y oscuro para confirmar que el texto y el fondo siguen funcionando juntos.
• Ajusta un "token", como el color de acento o el espaciado, y observa cuántos lugares se actualizan automáticamente.
• Explica una razón por la que esta configuración es más práctica que duplicar las reglas completas del componente para cada tema.

Guía paso a paso

1. Comienza con las variables base y confirma que el tema claro se ve correcto.
2. Agrega la clase modificadora de tema y verifica qué propiedades cambian a través de la cascada.
3. Estiliza el componente usando variables en lugar de colores codificados donde sea posible.
4. Modifica un valor del tema, como el color de acento, y compara el resultado antes y después.
5. Revisa la estructura final y asegúrate de que las reglas del componente permanezcan separadas de las reglas del tema.

Ejercicios prácticos

• Crea un segundo componente, como un botón o una insignia, que reutilice las mismas variables de tema.
• Agrega un "token" de texto atenuado y aplícalo al texto de apoyo dentro de la tarjeta.
• Construye una variación que use el mismo sistema de tema pero un color de acento diferente para las advertencias.

Retos de código

• Escala la configuración del tema para soportar múltiples componentes sin copiar conjuntos completos de reglas.
• Mantén las reglas del tema fáciles de anular mientras evitas cadenas de selectores confusas.

Mini tareas de práctica

• Agrega un nuevo "design token" para espaciado o color.
• Renombra una clase para reflejar mejor su función.
• Describe en una línea qué problema resuelven las propiedades personalizadas en este ejemplo.