La Navaja de Ockham en CSS: Menos es Mantenibilidad#
La Navaja de Ockham aplicada al desarrollo web postula que ante dos soluciones que resuelven el mismo problema visual, la que requiere menos código y selectores menos específicos es la correcta. Priorizar layouts intrínsecos y propiedades nativas reduce la deuda técnica y mejora el rendimiento al simplificar el árbol de renderizado del navegador.
Pluralitas non est ponenda sine necessitate.El Principio Filosófico#
Guillermo de Ockham, un fraile franciscano del siglo XIV, no sabía nada de z-index: 999999, pero su principio es la cura definitiva para el “CSS Hell”. La idea es cruda: no multipliqués las entidades sin necesidad.
En nuestro mundo, esto significa que si podés resolver un layout con una sola línea de CSS Grid, no deberías cargar un framework de 50KB ni pelearte con 15 capas de Flexbox y márgenes negativos. Si duele escribirlo, probablemente sobran líneas.
La Navaja en Acción: El Layout Intrínseco#
Mirá este ejemplo de una rejilla de tarjetas responsiva. Muchos devs todavía recurren a librerías pesadas o a un mar de Media Queries que hay que mantener a mano.
/* ❌ La solución compleja (Media Queries manuales) */
.grid {
display: flex;
flex-wrap: wrap;
}
.card {
inline-size: 100%;
}
@media (min-width: 600px) {
.card { inline-size: 50%; }
}
@media (min-width: 1000px) {
.card { inline-size: 33.33%; }
}
/* ✅ La Navaja (Layout Intrínseco) */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-md);
}Al usar auto-fit y minmax, le estás dando al navegador una intención, no una instrucción rígida. Dejás que el motor de renderizado tome la mejor decisión basada en el espacio disponible. Eso es Pragmatismo Técnico en estado puro.
Abstracción vs. Simplicidad#
A veces, la Navaja de Ockham nos obliga a cuestionar incluso nuestras herramientas favoritas. ¿Realmente necesitás esa abstracción o solo tenés miedo de tocar el CSS nativo?
Frameworks Utility-First vs. Vanilla CSS Moderno
Por qué Vanilla CSS gana en 2026
- Cero dependencias y cero tiempo de compilación
- Uso de CSS Layers (@layer) para control total de especificidad
- Soporte nativo para variables y funciones complejas como color-mix()
- Menor huella de carbono y mayor velocidad de carga (LCP)
Cuándo seguir con Frameworks
- Curva de aprendizaje en equipos acostumbrados a utilidades
- Requiere una base sólida de diseño sistémico (Design Tokens)
La Regla de Oro de la Especificidad#
Cada selector anidado que agregás (.header .nav .item .link) es una deuda con intereses altísimos. El navegador tiene que trabajar más y vos terminás atrapado en una guerra de selectores que solo se resuelve con el “martillo” del !important.
Resultados en el Mundo Real#
Al aplicar este principio en campa.dev, logré estos resultados tangibles que detallo en mi post sobre ingeniería de portafolio:
Como siempre digo en mis consultorías aquí en Paraguay: la mejor línea de código es la que no necesitás escribir. Si tu CSS se siente como una lucha constante contra el navegador, es hora de sacar la navaja y empezar a cortar lo que sobra.
¿Tenés algún bloque de código que te está volviendo loco? Escribime y lo simplificamos juntos.