Соглашения об именовании в UI Toolkit
Соглашения об именах в UI Toolkit
Если отладка — это процесс удаления ошибок из программного обеспечения, то программирование должно быть процессом их добавления. — Эдсгер В. Дейкстра, один из пионеров информатики
До сих пор руководство было посвящено стилю кода C#, но стоит также рассмотреть соглашения об именах для UI Toolkit, UXML и CSS. В UI Toolkit визуальные элементы и Unity Style Sheets (USS) запрашиваются по строковым идентификаторам, поэтому единый набор правил сокращает число ошибок и делает код понятнее.
Для визуальных элементов в UXML и классах таблиц стилей обычно рекомендуется методология «Блок — Элемент — Модификатор» (Block Element Modifier, BEM). BEM широко применяется в CSS и современной веб-разработке, на идеях которых основан UI Toolkit. По имени элемента в стиле BEM можно сразу понять, что он делает, где находится и как связан с окружающими элементами. Соглашение BEM включает три основных компонента: block-name__element-name--modifier-name
Рассмотрим пример: navbar-menu__shop-button--small Каждая часть имени может содержать латинские буквы, цифры и дефисы. Части соединяются двойным подчеркиванием __ или двойным дефисом --. Имя блока (block-name) обозначает высокоуровневый компонент, например меню навигации или панель характеристик персонажа, то есть самостоятельную и значимую часть интерфейса. Для универсальной кнопки, не относящейся к конкретному блоку, имя блока можно опустить: например, button--small.
Элемент element-name является дочерней частью блока и семантически с ним связан. Иными словами, контекст элемента задается блоком, и отдельно от него элемент не существует. В примере shop-button стиль показывает, что эта кнопка отличается от других кнопок блока navbar-menu: navbar-menu__shop-button.
Если новый элемент создает дочерние элементы в конструкторе, назначайте этим дочерним элементам соответствующие классы, например my-block__first-child и my-block__other-child. Модификатор обозначает вариант или состояние блока либо элемента: нажатую кнопку, выбранный и подсвеченный элемент текстового поля или, как в нашем примере, уменьшенный вариант кнопки магазина. Это позволяет поддерживать разные состояния без дублирования кода.
Еще несколько примеров именования по BEM: — menu__home-button — menu__shop-button — navbar-menu__shop-button--small
Имена классов BEM описывают сами себя: разработчикам проще понимать структуру и назначение компонентов, а четкая иерархия облегчает сопровождение и обновление стилей по мере роста проекта. В этих примерах части имени разделены дефисами — это стиль kebab-case, распространенный в CSS. Как и в других вопросах стиля, команда может выбрать подходящую схему, но лучше сделать это в начале проекта и затем соблюдать ее последовательно. Подробнее о соглашениях об именах в CSS читайте в этой статье и в документации UI Toolkit.
Рекомендации по именованию в UI Toolkit Ниже приведены рекомендации по эффективному именованию: — Делайте имена короткими, понятными и однозначными. Они должны быть лаконичными, но достаточно информативными, чтобы передавать назначение и роль элемента в интерфейсе.
— Не используйте в BEM-селекторах имена типов (Button, Label) или имена элементов (#my-button). Это избавляет от избыточности и возможной путаницы. Имена BEM должны описывать роль и состояние, а не тип элемента. — Избегайте имен и модификаторов, смысл которых может измениться. Например, пока цветовая схема не утверждена, используйте button--quit, а не button--red. Семантические имена остаются актуальными даже после изменения оформления.
— Распространяйте эти соглашения на графические ресурсы интерфейса UI Toolkit, например спрайты и текстуры. Единое именование в коде и ресурсах сохраняет понятные связи и улучшает организацию проекта. — Если элемент будет использоваться в других проектах, добавьте префикс к классам, чтобы избежать конфликтов с существующими пользовательскими именами. Пространства имен и префиксы предотвращают коллизии при интеграции с другими проектами и библиотеками. — В конструкторе вызывайте AddToClassList(), чтобы назначить экземплярам элемента нужные классы USS. Классы добавляются при создании элемента, поэтому соответствующие стили применяются сразу, а код интерфейса остается последовательным и понятным.