Architecture [SCSS]

🔍 Introducción

La arquitectura de SCSS nace de la necesidad de estructurar y optimizar el tiempo de desarrollo en la parte visual de un proyecto web.

Ayudando a organizar por carpetas los archivos necesarios para trabajar individualmente o en equipo con otros colaboradores. El orden es indispensable cuando se inicia un proyecto ayuda a mejorar el flujo de trabajo y más si se habla de trabajo en equipo.

🔥 Problema

Anteriormente para iniciar a maquetar un proyecto se iniciaba creando los archivos necesarios con extensión scss, sin ninguna estructura o orden. Esto ocasiona bastantes problemas al momento de realizar mantenimiento, escalabilidad o soporte del proyecto.

Pero principalmente a la hora de trabajar en equipo con otros desarrolladores, causaba numerosos conflictos en el instante que se compilaban los archivos.

💡 Solución

La solución para esta problemática se fundó en organizar una secuencia de carpetas con nombres y nomenclaturas que se adoptan de Frameworks de CSS como lo son Superkube, Bulma y Bootstrap.

Cada una de las carpetas contiene una serie de archivos en los cuales se puede escribir el respectivo código para modular y dividir por páginas, secciones o componentes cada una de ellas.

Esta ordenación ayuda principalmente a no generar conflictos al instante de compilar nuestro núcleo de importaciones llamado main.scss, debido a que no se manipula dicho archivo.

• scss
• compile
• css
• minify
• dist

📚 Documentación

1.0 Estructura de carpetas

Listado de las 6 carpetas que conforman la arquitectura para la compilación de archivos. Todo estos archivos generan nuestro archivo final llamado main.css

📦 scss
└── 📁 vendors
└── 📁 helpers
└── 📁 base
└── 📁 components
└── 📁 layout
└── 📁 pages
📄 main.scss

Estrucrura y orden de la carpeta con el nombre scss.

📁 1.1 Carpeta vendors

Esta carpeta almacena los archivos que hacen referencia a frameworks, librerías o plugins que se van a necesitar en el proyecto. Por ejemplo, si en el proyecto necesitamos utilizar un carousel se requiere importar el archivo de css de flickity.

📁 vendors
└── @import '_reset.scss'
└── @import '_framework.scss'
└── @import '_animate.scss'
└── @import '_carousel.scss'
.
.
.
└── 📄 vendors.scss

📁 1.2 Carpeta helpers

La carpeta helpers contiene los archivos para declarar nuestras @functions, @mixins, @extends y breakpoints esenciales los cuales nos ayudarán a agilizar nuestra escritura de código scss.

📁 helpers
└── @import '_mixins.scss'
└── @import '_modifiers.scss'
└── @import '_breakpoints.scss'
.
.
.
└── 📄 helpers.scss

📁 1.3 Carpeta base

Esta carpeta incluye los archivos que determinan el estilo del proyecto. Debido a que guarda las variables de scss para nuestra paleta de colores, tipografía e iconos que estaremos utilizando a lo largo de la maquetación visual del proyecto web.

📁 base
└── @import '_root.scss'
└── @import '_fonts.scss'
└── @import '_icons.scss'
└── @import '_variables.scss'
└── @import '_typography.scss'
.
.
.
└── 📄 base.scss

📁 1.4 Carpeta components

La carpeta components agrupa los archivos de scss con relación al estilo de los componentes que se requieren en el proyecto. Como por ejemplo los botones, formularios, checkbox, selects entre otros.

Esto ayuda a que se asigne de manera rápida y sencilla el estilo definido a cada componente al momento de maquetar la parte visual del proyecto web.

📁 components
└── @import '_forms.scss'
└── @import '_buttons.scss'
└── @import '_select.scss'
└── @import '_checkbox.scss'
└── @import '_modal.scss'
└── @import '_video.scss'
└── @import '_slider.scss'
└── @import '_whatsapp.scss'
.
.
.
└── 📄 components.scss

📁 1.5 Carpeta layout

Esta carpeta contiene los elementos que componen el diseño de la parte visual del proyecto. Principalmente son partes fijas o estandarizadas que se utilizan en todas las páginas o secciones como lo es navegación, el pie de página, el menú móvil entre otros.

📁 layout
└── @import '_header.scss'
└── @import '_navigation.scss'
└── @import '_menu.scss'
└── @import '_aside.scss'
└── @import '_container.scss'
└── @import '_loader.scss'
└── @import '_footer.scss'
.
.
.
└── 📄 layout.scss

📁 1.6 Carpeta pages

La carpeta pages reúne los archivos relacionados a las páginas del sitio web. Los archivos deben de llamarse igual a la página referente. Por ejemplo para la página contacto, podemos crear un archivo de scss llamada _contacto.scss y dentro de este mismo agregar el código de dicha página.

📁 pages
└── @import '_home.scss'
└── @import '_about.scss'
└── @import '_contact.scss'
└── @import '_404.scss'
.
.
.
└── 📄 pages.scss