Mejores prácticas de Salesforce Lightning UI con SLDS – DevFacts | Blog de tecnología | Comunidad de desarrolladores

Introducción

En Salesforce podemos personalizar la interfaz de usuario con la ayuda del enfoque declarativo de Salesforce y los componentes Aura/LWC (Lightning Web Components). Además, utilizamos SLDS para una interfaz de usuario enriquecida.

¿Por qué SLDS?

En el desarrollo de UI personalizado, SLDS proporciona elementos de UI HTML y CSS (hojas de estilo en cascada) listos para usar para la experiencia de Salesforce.

Criterios de diseño

Durante el desarrollo front-end, debemos centrarnos en las siguientes áreas

• Claridad – Permite a las personas ver, comprender y actuar con confianza.
• Eficiencia – Anticipa inteligentemente las necesidades para ayudar a las personas a trabajar mejor, de forma más inteligente y más rápida.
• Consistencia – Crear familiaridad y fortalecer la intuición aplicando la misma solución al mismo problema..
• Belleza – Muestre respeto por el tiempo y la atención de las personas a través de una artesanía elegante y reflexiva. Muestre respeto por el tiempo y la atención de las personas a través de una artesanía elegante y reflexiva.

Personalizar: no cambiar el kernel

Si está escribiendo CSS personalizado que anula los gráficos de Lightning Design System, está anulando en lugar de personalizar.

Ejemplo:

LWC

Aura

En el ejemplo anterior, hemos tomado ejemplos CSS de los componentes LWC y Aura.

• En el ejemplo de LWC estamos intentando aplicar relleno. Aquí las dos primeras líneas plantean las propiedades de relleno estándar del núcleo slds.

• En el ejemplo de Aura, intentamos aplicar margen. La primera línea en ganar en el margen central de slds. La segunda línea es la mejor manera.

Fichas de diseño

Los tokens de diseño son entidades con nombre que almacenan atributos de diseño visual, como valores de margen y espaciado, tamaños y familias de fuentes, o valores hexadecimales para los colores.

Los componentes web Lightning pueden utilizar cualquier token de diseño de Lightning Design System marcado como Acceso Global.

Para hacer referencia a un token de diseño en el CSS de su componente web Lightning, utilice el prefijo –lwc- y ​​consulte el nombre del token en camelCase.

Un ejemplo

¿Por qué es importante el token de diseño?

Tomemos un ejemplo: construiremos un nuevo portal comunitario en la nube de experiencias. Está completamente basado en Figma. Todas las páginas web tendrán las siguientes secciones.

• Encabezamiento
• Barra lateral
• Contenido
• Pie de página

A lo largo de esta sección algunas de las propiedades serán comunes a todas las páginas, por ejemplo

Color de fuente, Tamaño de letra, Familia de tipos, Margen o Relleno, este tipo de propiedades se pueden mantener en tokens de diseño para que el archivo CSS tenga una estructura limpia.

Estilo CSS

La primera es practicar una buena higiene CSS. Algunas reglas generales (¡obtenga más información en MDN!):

• No utilice selectores de tipo con clases, por ejemplo,

Aumentan la especificidad de su CSS y crean una dependencia de su marcado que probablemente causará problemas en el futuro.

• Evite selectores largos y acortados. Esta es una señal de alerta importante de que su CSS tiene problemas de especificidad y solo empeorarán a menos que los solucione.

• Evite el selector universal, por ejemplo, *{rules}. Su alcance es demasiado amplio, lo que lo hace demasiado impredecible; te estás preparando para conflictos gráficos.

• No utilice una declaración importante como un martillo. A pesar de raras excepciones, esta es otra señal de alerta; Si utiliza la declaración !important como último recurso, debe diagnosticar el motivo.

En otras palabras, ¡no escribas CSS así! Esto es como el jefe final del CSS malo.

Áreas de enfoque

Hay algunos puntos clave que puede seguir para garantizar una implementación coherente y eficaz.

• Siga la documentación de SLDS: El La guía para desarrolladores de Salesforce Design System es su recurso principal. Proporciona pautas detalladas, factores con ejemplos.

Consulte: https://www.lightningdesignsystem.com/

• Diseño para la respuesta: SLDS viene con componentes responsivos que funcionarán en diferentes tamaños de pantalla. Desarrolle sus componentes y diseño para que sean responsivos, garantizando una experiencia consistente en todos los dispositivos.

• Clases SLDS CSS y clases de utilidad: SLDS proporciona un conjunto de clases CSS y clases de utilidad que puede utilizar para diseñar sus componentes. Siga estas clases tanto como sea posible para mantener la coherencia y minimizar el CSS personalizado.

• Utilice componentes SLDS: SLDS proporciona una colección de componentes prediseñados, como

• botones,
• formas,
• modal,
• Vista de la lista
• Mesa y más.

Utilice estos componentes en lugar de crear otros personalizados. Están bien probados, son accesibles y garantizan una experiencia de usuario consistente.

• Accesibilidad web: Verifique su implementación SLDS con las siguientes pautas de accesibilidad.

• Utilice marcado semántico,
• proporcionar texto alternativo para imágenes,

Pruebe sus componentes con herramientas de accesibilidad para asegurarse de que puedan ser utilizados por todos.

Consulte: https://www.w3.org/

• Optimización del rendimiento web: Optimice su implementación SLDS.

• Minimizar el número de solicitudes HTTP
• Utilice SLDS CDN para CSS y JavaScript
• Optimice cualquier código personalizado que escriba.

• Manténgase al día con las actualizaciones de SLDS: Salesforce perfecciona periódicamente SLDS con nuevos componentes, funciones y directrices. Manténgase conectado con estas actualizaciones e impleméntelas en su diseño. Esto le ayudará a aprovechar las últimas mejoras y garantizar la compatibilidad con versiones futuras.

• Pruebe en todos los principales navegadores y dispositivos: SLDS fue creado para funcionar en múltiples navegadores y dispositivos. Pruebe exhaustivamente su implementación en diferentes navegadores, sistemas operativos y dispositivos para asegurarse de que todo funcione bien.

• Documente sus personalizaciones: Si necesita personalizar un componente SLDS o crear uno nuevo, documente sus cambios en el módulo mismo, lo que facilitará que otros desarrolladores comprendan y mantengan su código.

Simplemente siguiendo estas mejores prácticas, puede crear una aplicación web eficaz, fácil de mantener y fácil de usar utilizando SLDS.