Por qué los desarrolladores front-end deberían considerar un enfoque de diseño modular (y cómo empezar)

Como desarrollador front-end, dominar los conceptos básicos de HTML, CSS y JavaScript es relativamente fácil. Lo que supone un desafío es aprender a escribir, diseñar y organizar el código de una manera que se pueda mantener.

UsandoCódigo modular para el desarrollo front-endPuede hacer que su experiencia sea mucho más agradable y eficiente. En pocas palabras, adoptar un enfoque de diseño modular le permite escribir código y crear patrones de bloques para un uso repetido. El resultado es poder agregar, eliminar y reemplazar elementos en su sitio con facilidad.

En este artículo, explicaremos qué es un enfoque modular del diseño y cuáles son sus beneficios. Luego, le brindaremos tres consejos para adoptarlo como desarrollador de WordPress. ¡Comencemos!

Introducción al diseño modular

Los módulos son los elementos básicos de un sitio web. Le permiten crear páginas web atractivas y sitios funcionales y estéticamente agradables para sus clientes:

En este contexto, un módulo se refiere a un elemento con funcionalidades definidas que no están vinculadas al diseño del sitio. Algunos ejemplos comunes son los formularios y los botones. Si bien pueden no tener el mismo estilo, se utilizan para realizar funciones similares.

El diseño modular, también conocido como “diseño atómico”, es la práctica de agrupar elementos del sitio en patrones que se pueden reutilizar. La mejor manera de pensar en el diseño modular es compararlo conConstruyendo con Legos.

En otras palabras, los módulos son bloques versátiles, cada uno independiente, que se pueden organizar y reorganizar en el orden que se desee. Cada uno tiene el mismo relleno entre los elementos. El resultado es un patrón similar a una cuadrícula que facilita el movimiento de los elementos sin interrumpir el resto del contenido de la página.

Los beneficios de un enfoque modular para el diseño web

Existen muchos beneficios de usar código modular para el desarrollo front-end. El primero es que te permite hacer cambios de manera rápida y sencilla. Como diseñador, sabes que las aprobaciones y los rediseños de los clientes pueden retrasar los plazos del proyecto.

Además, las plantillas pueden ser rígidas y, a veces, limitantes. A menudo, se limita el uso de ciertos elementos en los espacios de contenido preestructurados. Los diseños modulares, por otro lado, son más flexibles y más fáciles de modificar. Se necesitan menos maquetas, lo que minimiza el proceso de desarrollo, aprobación e implementación.

Además, puedes recrear páginas usando una variación diferente de los mismos módulos con facilidad. Esto puede hacer que la implementación de sitios futuros sea significativamente más rápida. Además, hace que la experiencia de diseño sea más manejable y organizada a medida que los proyectos se hacen más grandes y complejos.

El diseño modular también ofrece la oportunidad de crear sitios que tengan un aspecto más moderno y limpio. Este tipo de diseño crea una distinción clara entre los elementos, lo que hace que sea más fácil navegar por ellos y adaptarlos a dispositivos móviles, lo que en última instancia se traduce en una mejor experiencia de usuario (UX).

3 consejos para comenzar con un enfoque modular para el desarrollo front-end

Si está convencido de los beneficios del diseño modular, la buena noticia es que no es difícil adoptar esta estrategia. Veamos tres consejos que puede utilizar para comenzar a utilizar un enfoque modular para el desarrollo front-end.

1. Utilice un preprocesadorComo Sass

Los preprocesadores CSS son lenguajes de programación que facilitan la ampliación de las capacidades predeterminadas de CSS. Puedes incorporar variables, funciones, mixins, etc. para producir un código más lógico. Los preprocesadores son una forma eficaz de mejorar tu flujo de trabajo como desarrollador front-end.

Hay varios preprocesadores para elegir. Uno que podría considerarusando es Sass:

Sass es un lenguaje de hojas de estilo compilado en CSS, que puede hacer que su hoja de estilo…Tanto modular como más escalablePuede usarlo para convertir una hoja de estilo grande en una que esté más organizada y sea más fácil de mantener.Lenguaje Sassy CSS (SCSS) de SassEs similar a CSS, por lo que sus principios son bastante fáciles de adoptar.

Una vez que tuinstalar SassEn un entorno de ensayo local, puedes usarlo para crearmódulos incorporadosLe recomendamos que se familiarice conLos conceptos básicosAntes de empezar.

Afortunadamente, hay muchos recursos en línea disponibles que puedes aprovechar para comprender mejor la arquitectura CSS modular. Por ejemplo, podrías considerar tomar el cursoCSS modular con SassCurso para mejorar tuArquitectura escalable y modular para CSS (SMACSS)habilidades.

2. Descargue elCampos personalizados avanzadosComplemento

Como desarrollador front-end, no es ajeno a la comodidad que ofrecen los complementos de WordPress para ampliar las capacidades. Cuando se trata de diseño modular, una herramienta particularmente útil que puede considerar instalar esCampos personalizados avanzados:

Este complemento te permite agregar tus propios campos a las pantallas de edición de WordPress. Puedes colocarlos en cualquier lugar de los archivos de plantilla del tema.

Una vez que instale y active el complemento, puede usarlo para crear uno nuevoGrupo de campoCada ‘grupo de campos’ tiene un diseño designado donde puedes definir tus propios módulos específicos de cada puesto:

En cada módulo, puedes incluir un conjunto definido de campos, cada uno con una amplia gama de formatos para elegir. Con elContenido flexibleyCampo repetidorCaracterísticas (disponibles con elVersión Pro), puedes crear una serie de módulos para aplicar y reutilizar en cualquier página.

3. Sea claro y coherente al nombrar y definir elementos

Cuando se trata de escribir código mantenible, la coherencia es clave. Esta es otra razón por la que recomendamos familiarizarse conMejores prácticas de SMACSSEn el núcleo de esto hay cinco tipos de categorías:

1. Base
2. Disposición
3. Estilo
4. Módulo
5. Tema

Con las reglas CSS divididas en cinco categorías, es más fácil lograr claridad y comprensión a través de las convenciones de nombres. Jonathan Snook, el creador de SMACSS, sugiereusando clasessobre IDs y selectores de elementos para módulos.

Al nombrar las clases para el diseño modular, el objetivo es que sean lo suficientemente genéricas para que se puedan reutilizar. Sin embargo, deben ser lo suficientemente específicas para que sea fácil encontrarlas y comprenderlas. Es una buena idea separar las clases para definir cómo encajan los elementos en un diseño y cómo se les da estilo.

Supongamos que estás creando un módulo de llamada. Puedes simplemente nombrar la clase con el nombre del módulo:.gritarSi desea agregar un estado al módulo, puede agregar.es-estadoPor lo tanto, una llamada contraída se vería así:.callout.is-collapsed.

Sass ofrece más orientación y consejos sobreConvenciones de nombres CSS modularesUna vez que elija y establezca un enfoque para nombrar los elementos, la clave está en mantenerlo consistente a lo largo del tiempo.

Conclusión

Como cualquier desarrollador front-end, probablemente desee que su enfoque para crear sitios para clientes sea lo más sencillo, eficiente y manejable posible. Sin embargo, cuanto más grandes y complejos sean los proyectos de diseño, más difícil se vuelve esto. Por eso, vale la pena considerar el diseño modular para el desarrollo front-end.

Como comentamos en este artículo, tres consejos que puedes utilizar para empezar con el diseño modular incluyen:

1. Usando unpreprocesador como Sass.
2. Descargando elCampos personalizados avanzadoscomplemento.
3. Ser claro y consistente al nombrar y definir elementos.

¿Tienes alguna pregunta sobre el uso de un enfoque de diseño modular? ¡Cuéntanoslo en la sección de comentarios a continuación!