Lección 9: Fundamentos de CSS y cascada: Punto de control de arquitectura

Explicación del concepto

La arquitectura en CSS consiste en decidir dónde deben ir los estilos antes de que una hoja de estilos se vuelva un desorden. En esta lección, organizarás una pequeña sección de página usando estilos base, estilos de componente y un patrón de nombres simple para que cada regla tenga una función clara. En lugar de añadir declaraciones donde parezcan funcionar, las agruparás de una manera que facilite futuras ediciones. Este tipo de estructura es importante una vez que un proyecto tiene más de una página o más de una persona editando los estilos.

Dónde poner el código

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

Referencia de comandos

• Separa los valores base, las reglas de componente y las variaciones para que cada grupo tenga un propósito claro.
• Prueba el modificador `featured` y confirma que cambia el componente sin reescribir cada propiedad.
• Asigna cada selector a su función: token base, bloque de componente, elemento hijo o modificador.
• Anota una elección de arquitectura que ayudaría si el proyecto creciera a varias tarjetas similares.

Guía paso a paso

1. Identifica qué reglas definen valores reutilizables y qué reglas pertenecen solo al componente de tarjeta de perfil.
2. Aplica los estilos a una tarjeta normal y a una tarjeta destacada para comparar la estructura y la variación.
3. Añade un nuevo elemento hijo, como una descripción, sin romper el patrón de nombres existente.
4. Verifica que el modificador solo cambie lo necesario y no duplique los estilos base.
5. Revisa la hoja de estilos y observa cómo la estructura ayudaría al añadir más componentes más adelante.

Ejercicios prácticos

• Crea un segundo componente, como una tarjeta de notificación, usando la misma capa de tokens pero diferentes clases de componente.
• Refactoriza la tarjeta para que el espaciado y los colores sean más fáciles de actualizar desde un solo lugar.
• Construye un pequeño ejemplo con una tarjeta base y dos variaciones de modificador.

Retos de código

• Diseña una estructura de mini componente para un panel de tablero con un título, subtítulo y estado resaltado.
• Compara una hoja de estilos plana con un enfoque de tokens más componentes y explica cuál es más fácil de mantener.

Mini tareas de práctica

• Añade una clase modificadora sin duplicar todo el componente.
• Renombra un selector para que coincida mejor con su función en la estructura.
• Resume la arquitectura en una frase clara.