Elegir una arquitectura CSS no siempre garantiza que funcione a la perfección en todos los escenarios. A veces, el tamaño y la complejidad del proyecto determinan si una metodología aporta valor real o si, por el contrario, genera estructura innecesaria. Eso es exactamente lo que ocurre al aplicar ITCSS en un proyecto pequeño, y entender este tipo de casos resulta fundamental para tomar mejores decisiones técnicas.
¿Qué sucede cuando ITCSS se aplica a un portafolio personal?
El proyecto analizado es un portafolio personal de un estudiante, compuesto por secciones como perfil, educación y experiencia [0:14]. En su estructura original, todos los estilos viven dentro de una única carpeta llamada Components, sin mayor organización.
Al intentar aplicar ITCSS, se creó una carpeta styles donde se colocaron las distintas capas que propone la arquitectura [1:07]. Sin embargo, el resultado fue un caso de no éxito. ¿La razón? El proyecto tiene tan pocos componentes que no logra cubrir todas las capas que ITCSS requiere para funcionar de manera completa.
- Solo se aprovecharon las capas de componentes y settings [1:20].
- Las demás capas quedaron vacías o sin propósito claro.
- La estructura terminó siendo más robusta de lo que el proyecto necesitaba.
¿Qué beneficios sí se obtuvieron del refactor?
Aunque la arquitectura no encajó al cien por ciento, el proceso de reorganización trajo mejoras concretas [1:28]:
- Los archivos quedaron distribuidos en fracciones más claras, facilitando la lectura.
- Los nombres de clases se volvieron más específicos y entendibles.
- La mantenibilidad mejoró gracias a una nomenclatura más coherente.
Esto demuestra que incluso cuando una arquitectura no se implementa por completo, el ejercicio de pensar en organización siempre aporta valor.
¿Por qué ITCSS no es para todos los proyectos?
ITCSS (Inverted Triangle CSS) es una arquitectura que organiza los estilos en capas jerárquicas, desde lo más genérico hasta lo más específico. Su fortaleza radica en proyectos con una base de código CSS amplia, donde múltiples componentes, utilidades, objetos y configuraciones coexisten.
Cuando un proyecto es pequeño, como un portafolio con pocos componentes, la mayoría de las capas quedan sin contenido [1:15]. Esto genera carpetas vacías y una complejidad estructural que no se justifica. La arquitectura necesita un proyecto más robusto para poder utilizarse a cabalidad [1:55].
¿Cómo identificar si tu proyecto necesita ITCSS?
Antes de elegir esta metodología, considera estos criterios:
- Cantidad de componentes: si tienes menos de diez, probablemente no necesites tantas capas.
- Equipo de trabajo: ITCSS brilla cuando varios desarrolladores mantienen los estilos.
- Escalabilidad esperada: si el proyecto va a crecer significativamente, la inversión inicial vale la pena.
El pull request del repositorio, llamado "ITCSS Methodology", muestra exactamente cómo se reorganizó la estructura de carpetas y archivos [0:49]. Puedes revisarlo en el repositorio "curso Arquitectura CSS, proyecto ocho" disponible en los recursos.
¿Qué aprendemos de un caso de no éxito en arquitectura CSS?
La lección más importante es que no existe una arquitectura universal. Cada proyecto tiene necesidades distintas, y forzar una metodología puede generar más problemas que soluciones. Un caso de no éxito no significa fracaso; significa aprendizaje sobre los límites y el alcance de cada herramienta.
En la práctica, lo valioso fue reorganizar archivos, mejorar nombres de clases y reflexionar sobre la estructura del código. Eso ya representa un avance significativo, aunque ITCSS no se haya implementado con todas sus capas.
Si tienes un proyecto donde quieras experimentar con este tipo de refactor, comparte tu experiencia en los comentarios. Probar distintas arquitecturas en proyectos reales es la mejor forma de entender cuándo y dónde aplicar cada una.
