Refactorización de CSS en Angular con SMACS y SASS

¿Cómo aplicar SMACS a un proyecto de Angular con SASS?

¡Hola desarrolladores! Hoy exploraremos el emocionante mundo de la metodología SMACS aplicada a un proyecto de Angular usando SASS. La implementación de estructuras eficientes y ordenadas en nuestros proyectos CSS nunca ha sido tan accesible. La metodología SMACS nos brinda una visión clara para mantener el código CSS bien estructurado y fácil de mantener, sin importar el tamaño del proyecto.

¿Qué estructura sigue el proyecto?

Para comenzar, tomamos el proyecto del estudiante que ya contiene una carpeta llamada Components. Dentro de esta carpeta se encuentran elementos como Calendar y Reminder Calendar. Aquí es donde aplicaremos nuestra magia organizativa con SMACS.

Básicamente, la estructura inicial contiene archivos de HTML y SASS. Vamos a mejorarla siguiendo las buenas prácticas. SMACS nos ayuda a desmenuzar nuestra organización en diferentes categorías fácilmente manejables.

¿Qué modificaciones aplicamos al proyecto?

La implementación de SMACS incluye la creación de la carpeta adicional styles. Dentro de esta carpeta, se utilizarán los siguientes archivos, que corresponden a las categorías mencionadas por SMACS:

• base
• layout
• module
• state
• theme

También se creó un archivo adicional para variables.

¿Cómo se gestiona las variables?

Un aspecto crucial de nuestra organización es la correcta gestión de variables, eliminando por completo la práctica de valores "quemados" en el código. Se crea un archivo para las variables que se podrá referenciar de forma global en todos los archivos donde se necesiten. Esto permite un mantenimiento mucho más ágil y efectivo.

¿Cómo secciones SMACS afectan al código?

La metodología SMACS nos ayuda a definir cada sección del proyecto de manera específica:

• Modules: Agrupa las funcionalidades principales como datePicked, list, reminder, entre otras.
• Layout: Incluye las clases que afectan la disposición, como lCenter, lVerticalCenter, entre otras. Noten el prefijo L que denota pertenencia al layout.
• Base: Se aplican estilos básicos globales, como etiquetas h1 y input.

¿Cuáles son los retos al implementar SMACS en tu proyecto?

Implementar SMACS transforma la forma en que organizamos nuestros estilos, pero podría implicar un proceso de adaptación. Se anima a los desarrolladores a realizar sus propios pull requests y proponernos soluciones al aplicar SMACS. La clave es encontrar la estructura que funcione mejor para tus necesidades específicas.

¿Cómo mejorará tu proyecto con SMACS?

1. Organización y Mantenimiento: Los equipos pueden trabajar colaborativamente de manera más efectiva con un código organizado.
2. Escalabilidad: La estructura modular de SMACS proporciona una excelente base para proyectos a gran escala.
3. Reusabilidad: Facilita el reuso de estilo en diferentes partes del proyecto, impulsando la consistencia.

Te animamos a que tomes este conocimiento y lo apliques en tus propios proyectos, compartiendo tus experiencias y descubrimientos. Al aplicar SMACS, no solo estructuramos mejor nuestro código, sino que fortalecemos la calidad de nuestros proyectos a largo plazo. ¡Sigue aprendiendo y explorando nuevas metodologías para optimizar tus habilidades de desarrollo CSS!