Usando SMACSS y SASS en un proyecto de Angular

Curso de Arquitecturas CSS

Fundamentos de Arquitectura en CSS

Arquitecturas CSS: Organización y Buenas Prácticas

Principios SOLID aplicados a la escritura de CSS eficiente

BEM

Metodología BEM en HTML y CSS: Bloques, Elementos y Modificadores

Maquetación HTML con metodología BEM: Bloques, Elementos, Modificadores.

Refactorización CSS con BEM y Sass

Refactorización de Codificación con Metodología BEM

Refactorización de Footer con Metodología BEM en Vue.js

Metodología BEM y Styled Components en React

Atomic Design

Estructura de Atomic Design: Átomos, Moléculas y Organismos

Refactorización de Componentes con Atomic Design en React

Refactorización con Atomic Design en proyectos Vue

OOCSS

Principios de OOCSS: Separación de Estructura y Diseño en CSS

Refactorización de Componentes en Angular con OOCSS y Sass

SMACSS

Organización de proyectos CSS con SMACS

Refactorización SMACSS en Proyectos Angular con SASS

ITCSS

Arquitectura ITCSS: Triángulo Invertido de CSS y Sus Capas

Arquitectura ITSS en Proyectos Reales: Lecciones Aprendidas

TailwindCSS

Uso de Tailwind CSS para Proyectos Web Realistas

Metodologías CSS: Cuándo usar BEM, SMACSS, OOCSS e ITCSS

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿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?

Organización y Mantenimiento: Los equipos pueden trabajar colaborativamente de manera más efectiva con un código organizado.
Escalabilidad: La estructura modular de SMACS proporciona una excelente base para proyectos a gran escala.
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!