Hojas de Estilo Centralizadas

Como Líder de Diseño de Producto en uPlanner, encabecé los esfuerzos de nuestro equipo en una evolución crucial en nuestro proceso de diseño de interfaces. Pasamos de usar estilos en línea, que generaban inconsistencia, redundancia y una reutilización limitada, a implementar hojas de estilo centralizadas para lograr mayor eficiencia y uniformidad. Inicialmente, migramos a archivos LESS centralizados durante nuestra fase con Angular, integrándolos con el framework Bootstrap para establecer un lenguaje de diseño consistente, mejorar la mantenibilidad y aumentar la modularidad. Posteriormente, al cambiar a Vue.js, avanzamos a SASS, aprovechando sus funciones más avanzadas para mejorar la reutilización, escalabilidad y eficiencia, al mismo tiempo que actualizábamos nuestra integración con Bootstrap. Esta transición a estilos centralizados ha mejorado significativamente nuestra capacidad para mantener, escalar y colaborar en el diseño de interfaces en todos nuestros productos digitales en uPlanner.

Desafío

Inicialmente, nuestro enfoque de diseño de interfaz de usuario implicaba el uso de estilos en línea directamente dentro del HTML de nuestras vistas:

Incoherencia: Los distintos desarrolladores aplicaban estilos diferentes, lo que daba lugar a un aspecto incoherente en toda la aplicación.
Redundancia: El uso repetido de estilos similares en varios elementos daba lugar a una base de código hinchada.
Reutilización limitada: Los estilos en línea no se podían reutilizar en varios componentes, por lo que el mantenimiento y las actualizaciones requerían mucho trabajo.

Objetivo

Nuestro objetivo era crear un sistema de estilos más eficaz y coherente centralizando nuestros estilos. Esto implicaría la transición de estilos en línea a hojas de estilo centralizadas para lograr lo siguiente:

Garantizar un lenguaje de diseño coherente en todas las vistas y componentes.
Minimizar la redundancia definiendo estilos reutilizables en una ubicación central.
Mejorar la escalabilidad y la capacidad de mantenimiento mediante una gestión de estilos organizada y modular.

Proceso

1. Implementación inicial: Estilos en línea

En la primera fase de desarrollo, nos basamos en estilos en línea incrustados en elementos HTML. Este enfoque era sencillo, pero pronto reveló sus limitaciones:

Difícil de mantener: A medida que la aplicación crecía, el mantenimiento de los estilos en línea se hacía cada vez más difícil. Actualizar un solo elemento de diseño requería encontrar y cambiar estilos en varias ubicaciones.
Falta de coherencia: Los distintos desarrolladores aplicaban a menudo estilos en línea diferentes, lo que daba lugar a una interfaz de usuario fragmentada e incoherente.
Falta de reutilización: Los estilos inline estaban vinculados a elementos específicos, lo que hacía imposible reutilizarlos en distintas partes de la aplicación.

2. Transición a hojas de estilo centralizadas con LESS

Reconociendo las limitaciones de los estilos en línea, hicimos la transición a un enfoque más estructurado mediante la adopción de LESS, un preprocesador de CSS, durante nuestro desarrollo con Angular. Los cambios clave incluyen:

Archivos LESS centralizados: Creamos hojas de estilo centralizadas utilizando LESS, que albergaba todos los estilos para la aplicación en una estructura única y organizada. Esto nos permitió definir variables, mixins y estilos reutilizables que podían aplicarse a diferentes componentes.
Integración de Bootstrap Framework: Basamos nuestra arquitectura de hojas de estilo en el framework Bootstrap, personalizándolo para alinearlo con nuestros requisitos de diseño específicos. Esta integración nos permitió aprovechar el sistema de cuadrícula adaptable de Bootstrap y los estilos predefinidos, manteniendo al mismo tiempo nuestra propia marca.
Diseño coherente: Al centralizar los estilos en LESS, garantizamos un lenguaje de diseño coherente en toda la aplicación. Todos los desarrolladores utilizaron el mismo conjunto de estilos, lo que redujo las incoherencias.
Mantenimiento mejorado: Los archivos LESS centralizados facilitaron la actualización de los estilos. Los cambios realizados en un único valor de los archivos LESS se propagaban automáticamente por toda la aplicación, lo que reducía el tiempo y el esfuerzo necesarios para las actualizaciones.
Modularidad: LESS nos permitió dividir los estilos en archivos modulares, cada uno de los cuales representaba diferentes aspectos de la interfaz de usuario (por ejemplo, tipografía, esquemas de color, diseños). Esta modularidad mejoró tanto la organización como la escalabilidad de nuestros estilos.

3. Avance a SASS con Vue.js

Al pasar de Angular a Vue.js, vimos la oportunidad de mejorar aún más nuestro enfoque de estilo adoptando SASS, un preprocesador de CSS más potente:

Arquitectura basada en SASS: Estructuramos nuestras hojas de estilo basándonos en SASS, aprovechando al máximo sus características como reglas anidadas, herencia y funciones más avanzadas. Esto nos proporcionó un mayor control y flexibilidad sobre nuestro estilo.
Actualización del marco Bootstrap: Mantuvimos la arquitectura de nuestra hoja de estilo en el framework Bootstrap, actualizándola a la siguiente versión y personalizándola mediante variables y funciones SASS para alinearla con nuestros requisitos de diseño específicos.
Modularidad y reutilización mejoradas: Las funciones avanzadas de SASS nos permitieron crear estilos altamente reutilizables y modulares. Por ejemplo, definimos variables globales para colores, fuentes y espaciado, garantizando la coherencia y facilitando la actualización del diseño en toda la aplicación.
Eficacia y escalabilidad: La combinación de archivos SASS centralizados y las capacidades de personalización de la nueva versión de Bootstrap nos permitieron escalar nuestro sistema de diseño de forma eficiente. Podíamos añadir fácilmente nuevos estilos o modificar los existentes sin alterar la coherencia general del diseño.

Resultados

En general, la transición de estilos específicos para cada vista a hojas de estilo centralizadas ha aportado varias ventajas significativas:

Coherencia: Los estilos centralizados garantizaron un diseño uniforme en todos los componentes, reduciendo la probabilidad de incoherencias en el diseño.
Reducción de la redundancia: Con un enfoque centralizado, los estilos comunes se definían una vez y se reutilizaban en varios componentes, lo que reducía la duplicación y mantenía limpia la base de código.
Facilidad de mantenimiento: Actualizar los estilos se convirtió en algo sencillo, ya que los cambios realizados en las hojas de estilo centralizadas se aplicaban automáticamente a toda la aplicación. Extraer la capa de estilo de cada vista también significa que los desarrolladores ya no tienen que preocuparse de dar estilo al html, ahora todas las mejoras visuales de la interfaz de usuario se aplican automáticamente.
Colaboración mejorada: Las hojas de estilo centralizadas proporcionaban una única fuente de verdad para todos los estilos, lo que facilitaba la colaboración de los diseñadores y garantizaba que todos siguieran las mismas directrices de diseño.
Escalabilidad: A medida que la aplicación crecía, las hojas de estilo centralizadas nos permitían escalar el sistema de diseño de forma eficiente, añadiendo nuevos componentes o actualizando estilos sin alterar la coherencia general.

Conclusión

Nuestra evolución de los estilos en línea a las hojas de estilo centralizadas, primero con LESS y luego con SASS, ha mejorado significativamente nuestro proceso de diseño de la interfaz de usuario. Los estilos centralizados nos han proporcionado un sistema escalable, eficiente y fácil de mantener que garantiza la coherencia en todos nuestros productos digitales.