El antipatrón de generar CSS sin metodología

El error que cometes (y no lo sabes)

Abres ChatGPT. Subes un diseño o describes un componente. Escribes:

"Hazme el CSS para esta tarjeta de producto"

La IA te escupe esto:

.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 16px;
  width: 300px;
}

.card h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 12px;
}

.card p {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}

.card .price {
  font-size: 20px;
  font-weight: bold;
  color: #e74c3c;
}

.card .button {
  background-color: #3498db;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 16px;
}

Lo copypasteas. Funciona. Sigues adelante.

Por qué esto es un suicidio profesional

1. Especificidad descontrolada

.card h2          /* Especificidad: 0,0,1,1 */
.card .price      /* Especificidad: 0,0,2,0 */
.card .button     /* Especificidad: 0,0,2,0 */

Cuando necesites modificar el h2 en otro contexto, tendrás que luchar contra .card h2. Bienvenido al infierno de !important.

2. Zero escalabilidad

¿Qué pasa cuando necesitas:

• Una tarjeta más pequeña?
• Una tarjeta sin sombra?
• Una tarjeta en modo oscuro?

Respuesta: Más CSS específico o clases modificadoras random.

3. Acoplamiento brutal

El CSS está casado con la estructura HTML. Cambias el markup → se rompe todo.

La realidad: tu codebase en 6 meses

/* El código original */
.card { /* ... */ }

/* Las "mejoras" que fuiste añadiendo */
.card.small { width: 200px !important; }
.card.no-shadow { box-shadow: none !important; }
.card.dark { background-color: #333 !important; }
.card.dark h2 { color: white !important; }
.card.dark p { color: #ccc !important; }

/* El hotfix de última hora */
.product-page .card .button {
  background-color: #2c3e50 !important;
}

Resultado: Un CSS que nadie puede mantener.

Cómo hacerlo bien: Prompting con metodología

Prompt mejorado:

Crea CSS para una tarjeta de producto usando metodología BEM.

Requisitos:
- Componente reutilizable con variantes
- Sin anidar selectores más de 1 nivel
- Usa custom properties para theming
- Incluye modificadores para: size (small, medium, large) y theme (light, dark)

Estructura HTML esperada:
<div class="card card--large card--dark">
  <h2 class="card__title">Título</h2>
  <p class="card__description">Descripción</p>
  <span class="card__price">€99</span>
  <button class="card__button">Comprar</button>
</div>

El CSS que obtienes:

.card {
  --card-bg: #ffffff;
  --card-text: #333333;
  --card-text-muted: #666666;
  --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --card-padding: 1.25rem;
  --card-radius: 0.75rem;

  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  width: 100%;
}

/* Elementos */
.card__title {
  font-size: 1.5rem;
  color: var(--card-text);
  margin: 0 0 0.75rem 0;
}

.card__description {
  font-size: 1rem;
  color: var(--card-text-muted);
  line-height: 1.5;
  margin: 0 0 1rem 0;
}

.card__price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e74c3c;
  display: block;
  margin-bottom: 1rem;
}

.card__button {
  background-color: #3498db;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: calc(var(--card-radius) / 2);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Modificadores de tamaño */
.card--small {
  --card-padding: 1rem;
  max-width: 200px;
}

.card--large {
  --card-padding: 2rem;
  max-width: 400px;
}

/* Modificadores de tema */
.card--dark {
  --card-bg: #2c3e50;
  --card-text: #ffffff;
  --card-text-muted: #bdc3c7;
  --card-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

Por qué esto SÍ funciona

1. BEM = Especificidad plana: Cada clase tiene el mismo peso
2. Custom properties = Theming fácil: Cambias variables, no CSS
3. Modificadores claros: .card--dark vs .card.dark
4. Escalable: Nuevas variantes = nuevos modificadores
5. Mantenible: Cada clase tiene una responsabilidad

El resultado real

<!-- Tarjeta normal -->
<div class="card">...</div>

<!-- Tarjeta pequeña y oscura -->
<div class="card card--small card--dark">...</div>

<!-- Tarjeta grande con tema personalizado -->
<div class="card card--large" style="--card-bg: #f8f9fa;">...</div>

Zero conflictos. Zero !important. Zero dolor de cabeza.

Takeaways

1. La IA solo es tan buena como tu input
2. "Funciona" ≠ "Es mantenible"
3. Invierte 30 segundos más en el prompt, ahorra 30 horas de refactor
4. Especifica la metodología SIEMPRE (BEM, SMACSS, lo que uses)
5. Pide custom properties para theming desde día uno