Esta es la solución diferente que propongo
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
¡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.
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.
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:
También se creó un archivo adicional para 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.
La metodología SMACS nos ayuda a definir cada sección del proyecto de manera específica:
datePicked
, list
, reminder
, entre otras.lCenter
, lVerticalCenter
, entre otras. Noten el prefijo L
que denota pertenencia al layout.h1
y input
.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.
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!
Aportes 4
Preguntas 1
Esta es la solución diferente que propongo
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?