Explicación del concepto
Refactorizar en CSS significa mejorar la estructura sin alterar el resultado visual. En esta lección, tomarás un pequeño conjunto de reglas repetidas y las reorganizarás en estilos más limpios y fáciles de mantener. El objetivo es identificar cuándo las declaraciones pertenecen a una utilidad compartida, cuándo un componente merece su propio selector y cómo las propiedades personalizadas pueden reducir la duplicación. Al finalizar, deberías ser capaz de examinar una hoja de estilos desordenada y transformarla en algo más consistente, legible y seguro de extender.
Dónde poner el código
- Comienza con variables e inputs. Coloca las reglas de estilo en selectores de clase reutilizables.
- Añade la lógica de procesamiento en la sección intermedia.
- Finaliza con la salida y una validación rápida.
Referencia de comandos
- Comienza por encontrar declaraciones que aparecen más de una vez y agrúpalas intencionalmente.
- Mueve los valores repetidos de espaciado, borde o color a propiedades personalizadas cuando claramente pertenezcan juntos.
- Verifica la página antes y después de refactorizar para confirmar que el diseño sigue viéndose igual.
- Anota una razón por la que tus selectores actualizados son más fáciles de mantener que la versión original.
Guía paso a paso
- Lee el CSS inicial y marca cualquier valor o patrón de selector repetido.
- Elige una refactorización primero, como fusionar estilos de tarjeta duplicados o extraer una variable compartida.
- Ejecuta la página de nuevo y confirma que el resultado visual no cambió accidentalmente.
- Revisa la nueva estructura y decide si los nombres de los selectores siguen teniendo sentido para otra persona que lea el archivo.
- Finaliza con una breve lista de verificación: menos repetición, nombres más claros, misma salida.
Ejercicios prácticos
- Refactoriza una hoja de estilos de botón que repite las mismas reglas de `padding`, `border radius` y `font` en tres clases.
- Toma un grupo de estilos de alerta y extrae reglas compartidas manteniendo separadas las variantes de éxito y error.
- Reescribe una pequeña hoja de estilos para que los valores de espaciado provengan de variables en lugar de números codificados.
Retos de código
- Crea dos refactorizaciones válidas para la misma hoja de estilos y compara cuál es más fácil de extender posteriormente.
- Refactoriza un componente sin aumentar la especificidad del selector ni dificultar las anulaciones.
Mini tareas de práctica
- Renombra un selector para que su propósito sea más claro a primera vista.
- Extrae un valor repetido en una propiedad personalizada.
- Resume el principal beneficio de tu refactorización en una frase.
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.