Explicación del concepto
El rendimiento en CSS suele depender menos de la velocidad pura y más de mantener los estilos predecibles, fáciles de aplicar y económicos de mantener a medida que una página crece. En esta lección, diseñarás un pequeño diseño de tarjeta prestando atención a la simplicidad de los selectores, las reglas de espaciado reutilizables y evitando anulaciones innecesarias. El objetivo es ver cómo una estructura clara puede reducir el trabajo de estilo futuro y hacer los cambios más seguros. Al final, deberías poder identificar cuándo una hoja de estilos se está volviendo más difícil de escalar y reescribirla en una versión más ligera y consistente.
Dónde poner el código
- Comienza con variables y entradas. Coloca las reglas de estilo en selectores de clase reutilizables.
- Agrega la lógica de procesamiento en la sección central.
- Finaliza con la salida y una validación rápida.
Referencia de comandos
- Comienza con dos tarjetas que compartan la misma estructura, luego confirma que ambas reciban el mismo estilo base.
- Cambia un token de diseño como `--card-padding` o `--border-color` y observa cuántos elementos se actualizan a la vez.
- Compara una versión que repite estilos en cada selector con una versión que usa clases y variables compartidas.
- Anota una razón por la que los selectores simples son más fáciles de mantener cuando un diseño crece.
Guía paso a paso
- Pega el CSS inicial en una pequeña página de demostración con dos o tres tarjetas.
- Verifica que el espaciado, los bordes y el color del texto provengan de reglas compartidas en lugar de declaraciones repetidas.
- Cambia un valor de token y confirma que la actualización aparece de forma consistente en todas las tarjetas.
- Agrega un modificador o variación adicional sin romper los estilos base de la tarjeta.
- Revisa el resultado y anota qué regla facilita la extensión de la hoja de estilos más adelante.
Ejercicios prácticos
- Crea una variante de tarjeta compacta con espaciado más ajustado manteniendo la misma clase base de tarjeta.
- Reescribe el ejemplo sin tokens de diseño, luego compara qué versión es más fácil de ajustar.
- Crea una pequeña lista de tres elementos de UI que podrían reutilizar las mismas variables de espaciado o borde.
Retos de código
- Refactoriza un conjunto verboso de selectores de tarjeta repetidos en un sistema más pequeño con estilos base compartidos.
- Agrega una variación de tema oscuro cambiando variables en lugar de duplicar cada regla de componente.
Mini tareas de práctica
- Renombra una clase para que su propósito sea más claro.
- Agrega una pequeña mejora que reduzca los valores repetidos.
- Resume en una línea por qué esta hoja de estilos es más fácil de escalar.
Error común
Skipping input validation or mixing logic/output in one unstructured block.
Mini reto de la vida real
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.