Рекомендации по пользовательскому интерфейсу

Проверка кода и форматирование

Доступны следующие команды:

• make lint выполнит всю проверку кода, make lint-server проверит шаблоны, make lint-client проверит JS/CSS.
• make format выполнит все форматирование и исправление проблем проверки кода. Также есть make format-server и make format-client.

Посмотрите наши Makefile задачи и package.json скрипты, если вам нужны более детальные параметры.

Рекомендации по HTML

Мы используем djhtml для форматирования и Curlylint для проверки кода.

• Пишите валидный, семантический HTML.
• Следуйте практикам написания ARIA, особенно Нет ARIA лучше, чем плохое ARIA.
• Используйте классы для стилизации, data- атрибуты для поведения JavaScript, идентификаторы только для семантики.
• Для комментариев используйте синтаксис шаблонов Django вместо HTML.

Рекомендации по CSS

Мы используем Prettier для форматирования и Stylelint для проверки кода.

• Мы следуем BEM и ITCSS, с большим количеством утилит, созданных с помощью Tailwind.
• Ознакомьтесь с нашей конфигурацией stylelint-config-wagtail, в которой подробно описан наш предпочтительный стиль кода.
• Используйте rems для font-size, так как они обеспечивают абсолютный контроль над текстом. Кроме того, предпочтительны безразмерные line-height , так как они не наследуют процентное значение родительского элемента, а вместо этого основаны на множителе font-size.
• Всегда используйте переменные для токенов дизайна, таких как цвета или размеры шрифтов, а не жёсткую кодировку конкретных значений.
• Мы используем префикс w- для всех стилей, предназначенных для повторного использования разработчиками сайтов Wagtail.

Рекомендации по JavaScript

Мы используем Prettier для форматирования и ESLint для проверки кода.

• Мы следуем несколько ослабленной версии руководства по стилю Airbnb.
• Ознакомьтесь с нашей конфигурацией eslint-config-wagtail, в которой подробно описан наш предпочтительный стиль кода.

Поддержка нескольких языков

Эта область активно улучшается в Wagtail, с постоянными обсуждениями.

• Всегда используйте атрибут trimmed на тегах blocktrans , чтобы предотвратить добавление ненужных пробелов в строки перевода.