Наилучшая практика использования пользовательского интерфейса Salesforce Lightning с SLDS

Введение

В Salesforce мы можем настраивать пользовательский интерфейс с помощью декларативного подхода salesforce и компонентов Aura/LWC (Lightning Web Components). Кроме того, мы используем SLDS для расширенного пользовательского интерфейса. 

Почему именно SLDS? 

При разработке пользовательского интерфейса SLDS предоставляет готовые к использованию HTML и CSS (каскадные таблицы стилей). Элементы пользовательского интерфейса для Salesforce experience. 

Принципы проектирования  

При разработке интерфейса нам необходимо сосредоточиться на следующих областях  

• Ясность – Позволяет людям видеть, понимать и действовать уверенно. 
• Эффективность – Разумно предвидеть потребности, чтобы помочь людям работать лучше, умнее и быстрее. 
• Последовательность &#8211 Создавайте привычку и укрепляйте интуицию, применяя одно и то же решение к одной и той же проблеме. 
• Красота – Демонстрируйте уважение ко времени и вниманию людей с помощью продуманного и элегантного мастерства. Продемонстрируйте уважение ко времени и вниманию людей с помощью продуманного и элегантного мастерства. 

Настройка – Не меняйте ядро 

Если вы пишете пользовательский CSS, который отменяет стиль дизайна Lightning Систему, которую вы переопределяете, а не настраиваете. 

Пример :  

LWC 

Aura 

В приведенном выше примере мы взяли примеры CSS компонентов LWC и Aura.  

• В примере LWC мы пытаемся применить отступы. Здесь первые две строки переопределяют стандартные свойства заполнения slds core. 

• В примере Aura мы пытаемся применить отступ. Первая строка переопределяет отступ slds core. Лучше всего использовать вторую строку. 

Дизайнерские токены 

Дизайнерские токены — это именованные объекты, которые хранят атрибуты визуального дизайна, такие как поля и интервалы, размеры и семейства шрифтов или шестнадцатеричные значения для цветов. 

Веб-компоненты Lightning могут использовать любой маркер дизайна системы Lightning Design с пометкой Global Access. 

Чтобы ссылаться на маркер дизайна в CSS вашего веб-компонента Lightning, используйте –lwc-префикс и укажите название токена в camelCase. 

Пример  

Почему дизайн токена важен? 

Приведем пример: мы собираемся создать новое сообщество портал в облаке experience cloud.  Он полностью основан на Figma. Все веб-страницы будут иметь следующие разделы. 

• Верхний колонтитул 
• Боковая панель 
• Содержимое 
• Нижний колонтитул 

В этом разделе «все» некоторые свойства будут общими для всех страниц, например 

Цвет шрифта, Размер шрифта, семейство шрифтов, поля или отступы, такие свойства могут быть сохранены в дизайне токены, чтобы CSS-файл имел чистую структуру. 

CSS-стиль 

В первую очередь, это соблюдение правил гигиены CSS. Несколько практических правил (подробнее на MDN!): 

• Не используйте селекторы типов с классами, например,  

Они повышают специфичность вашего CSS и создайте зависимость от вашей разметки, которая может вызвать проблемы в будущем. 

• Избегайте длинных вложенных селекторов. Это серьезный признак того, что в вашем CSS есть проблемы со специфичностью, и они будут только усугубляться, если вы их не устраните. 

• Избегайте универсального селектора, например, * { rules }. Его диапазон слишком широк, что делает его слишком непредсказуемым; вы рискуете столкнуться с конфликтами стилей. 

• Не используйте объявление !important в качестве предупреждения. Несмотря на редкие исключения, это еще один тревожный сигнал; если вы используете объявление !important в качестве последнего средства, вам нужно выяснить, почему. 

Другими словами, не пишите CSS таким образом! Это похоже на финальную часть bad CSS.  

Основные направления 

Есть несколько ключевых моментов, которым вы можете следовать, чтобы обеспечить последовательную и эффективную реализацию. 

• Ознакомьтесь с документацией SLDS: Руководство разработчика системы проектирования Salesforce Lightning — это ваш основной ресурс. В нем приведены подробные рекомендации, факторы с примерами. 

См.: https://www.lightningdesignsystem.com/ 

• Дизайн для повышения быстродействия: SLDS поставляется с адаптивными компонентами, которые будут работать на экранах разных размеров. Разрабатывайте свои компоненты и макеты таким образом, чтобы они были адаптивными и обеспечивали согласованную работу на всех устройствах. 

• Классы CSS и служебные классы SLDS: SLDS предоставляет набор классов CSS и служебных классов утилит, которые вы можете использовать для стилизации ваших компонентов. Придерживайтесь этих классов, насколько это возможно, чтобы сохранить согласованность и сократить количество пользовательских CSS. 

• Используйте компоненты SLDS: SLDS предоставляет набор готовых компонентов, таких как  

• кнопки,  
• формы,  
• режимы, 
• Просмотр списка  

Используйте эти компоненты вместо создания пользовательских. Они хорошо протестированы, доступны и обеспечивают стабильное взаимодействие с пользователем. 

• Веб-доступность: Ознакомьтесь со следующими рекомендациями по обеспечению доступности в вашей SLDS.  

• Используйте семантическую разметку,  
• предоставляйте альтернативный текст для изображений,  

протестируйте свои компоненты с помощью специальных инструментов, чтобы убедиться, что они доступны всем. 

См.: https://www.w3.org/ 

• Оптимизация веб-производительности: Оптимизируйте внедрение SLDS.  

• Минимизируйте количество HTTP-запросов 
• Используйте SLDS CDN для CSS и JavaScript 
• Оптимизируйте любой пользовательский код, который вы пишете. 

• Следите за обновлениями SLDS: Salesforce регулярно обновляет SLDS новыми компонентами, функциями, и руководящие принципы. Следите за этими обновлениями и внедряйте их в свой дизайн. Это поможет вам воспользоваться преимуществами последних улучшений и обеспечить совместимость с будущими версиями. 

• Тестирование во всех основных браузерах и устройствах: SLDS был создан для работы в различных браузерах и устройствах. Тщательно протестируйте свою реализацию в различных браузерах, операционных системах и устройствах, чтобы убедиться, что все работает нормально. 

• Задокументируйте свои настройки: Если вам нужно настроить компонент SLDS или создать новый, задокументируйте свои изменения в самом модуле, что облегчит другим разработчикам понимание и поддержку вашего кода. 

Просто следуйте этим рекомендациям, и вы сможете создать эффективное, поддерживаемое и удобное в использовании веб-приложение, использующее SLDS. 

Другие новости:

---