Bloque 4: Proyecto final

Arquitectura CSS en proyectos reales

En una web de tres archivos da igual cómo escribas el CSS. En un proyecto real —decenas de páginas, varias personas editando— el orden es supervivencia. La receta más sencilla y efectiva: organizar por capas.

/* ========== 1. TOKENS Y BASE ========== */
:root { /* ... */ }

/* ========== 2. LAYOUT ========== */

/* ========== 3. COMPONENTES ========== */

/* ========== 4. UTILIDADES ========== */

1.1 · Nombres que no explotan: BEM ligero

No necesitas la ceremonia completa de BEM, pero sí su idea central: bloque__elemento--modificador. El nombre describe estructura, no apariencia ni posición:

• .card__titulo ✔️ — «el título dentro de tarjeta».
• .card--destacada ✔️ — «la variante destacada de tarjeta».
• .margen-izquierdo-rojo ❌ — describe pintura; mañana será azul y estará a la derecha.

1.2 · Orden interno de propiedades

Dentro de cada regla, un criterio fijo evita discusiones y hace los diffs legibles: primero caja y layout (display, position, tamaño), después visual (colores, bordes, sombras) y al final tipografía y detalles.

.tarjeta {
  /* 1. caja y posición */
  display: grid;
  position: relative;
  padding: 24px;

  /* 2. visual */
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);

  /* 3. tipografía y transiciones */
  font-size: 1rem;
  transition: transform .3s ease;
}

Componentes reutilizables

Un componente CSS es una clase que funciona igual dondequiera que la pegues: botones, tarjetas, campos de formulario. La técnica clave es clase base + modificadores:

.btn {
  padding: .6em 1.2em;
  border-radius: 999px;
  font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease;
}

.btn--primario   { background: var(--primario); color: #fff; }
.btn--fantasma   { background: transparent; border: 2px solid var(--primario); }
.btn--pequeno    { font-size: .85rem; }

/* uso: <button class="btn btn--primario"> */

Cambias el radio del botón en .btn y las tres variantes se actualizan. Cada modificador solo declara lo que difiere.

2.1 · Formularios que dan gusto

.form-field input {
  width: 100%;
  padding: .7em 1em;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.form-field input:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

2.2 · Composición sobre duplicación

Necesitas una tarjeta igual pero con borde dorado. Antes de escribir CSS nuevo: ¿puede ser un modificador? ¿Puede heredar variables? Casi siempre sí.

.card-oro {
  border-radius: 14px;
  padding: 20px;
  box-shadow: ...;
  border: 2px solid gold;
}

.card--oro {
  border: 2px solid gold;
}
/* el resto ya lo aporta .card */

Detalles de calidad y accesibilidad

3.1 · Estados completos en interactivos

Un botón profesional responde a todos sus estados, no solo al hover:

.btn:hover         { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--foco); }
.btn:active        { transform: translateY(1px); }
.btn:disabled      { opacity: .5; cursor: not-allowed; }

3.2 · Contraste y movimiento

• Contraste mínimo WCAG AA: texto normal 4.5:1; grande (≥24px) 3:1. Las DevTools lo calculan en el inspector de color.
• Respeta las preferencias de movimiento: hay gente a la que las animaciones le provocan mareo. Es una media query:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* único caso donde !important es razonable:
   ganarle a cualquier especificidad ajena */

3.3 · Auditoría express antes de entregar

1. Navega la página completa solo con Tab: ¿sabes dónde estás siempre?
2. Prueba en móvil, tablet y escritorio (modo dispositivo).
3. Sube el zoom al 200 %: ¿sigue siendo usable?
4. Revisa la consola: cero errores y cero recursos rotos (404).

El proyecto final, paso a paso

Vas a construir «mi-portafolio.html»: una página completa que presenta quién eres y tus mejores trabajos. Es tu carta de presentación como desarrollador/a y el examen práctico de este curso.

4.1 · El plan de ataque

1. Estructura semántica: header + nav + main + footer, secciones con <section> e ids anclables.
2. Tokens: paleta, espaciados y radios en :root.
3. Layout mobile-first: una columna por defecto; media queries min-width para ampliar.
4. Componentes: botón, tarjeta de proyecto y campo de formulario como clases reutilizables.
5. Motion: transición en interactivos + una animación de entrada sutil.
6. Auditoría: la checklist de la lección 3, ítem por ítem.

4.2 · Esqueleto recomendado

<header>   logo + nav (flex, sticky)
<main>
  <section id="inicio">     hero con degradado
  <section id="proyectos">  grid auto-fit de tarjetas
  <section id="contacto">   formulario accesible
</main>
<footer>    columnas con grid + copyright

4.3 · Cómo se evalúa

La Parte B del examen valida automáticamente los ocho criterios de graduación: viewport, semántica, variables, layout moderno, responsive, interactividad animada, acabado visual y limpieza del código. Aprueba con 7/8… pero apunta al 8/8.