Структура объясняет назначение элементов
HTML задаёт смысл: заголовок, навигацию, ссылку или кнопку. Элемент для перехода и элемент для действия не следует выбирать только по внешнему виду. Кнопка имеет встроенные способы активации, включая клавиатуру; простая надпись с похожим оформлением не получает их автоматически. В примере сайта ссылки ведут к разделам, а кнопка управляет раскрытием меню. До работы над цветами стоит описать, что пользователь сможет сделать каждым элементом и какой результат ожидается.
SCSS и БЭМ упорядочивают оформление
SCSS — синтаксис Sass, который компилируется в CSS. Браузер получает результат этой обработки, а не выполняет исходные возможности препроцессора как обычный JavaScript. БЭМ предлагает мыслить независимыми блоками, их элементами и модификаторами. Например, меню является блоком, его пункт — элементом, а раскрытое состояние можно выразить модификатором. Название должно отражать роль или состояние. БЭМ не заменяет семантику HTML и не открывает меню самостоятельно: это организация компонентов и их реализации, а не готовое поведение.
Код подготовки и код браузера различаются
Код в служебной верхней части Astro-компонента выполняется на сервере, в том числе при сборке статических страниц. Он не становится автоматически доступным в браузере. Для реакции на действия пользователя нужен соответствующий клиентский механизм. Astro позволяет добавлять браузерные скрипты без обязательного подключения отдельного интерфейсного фреймворка. Поэтому при ошибке сначала выясняют, где должен выполняться конкретный фрагмент. Переменная, существовавшая при подготовке HTML, не превращается сама собой в браузерную глобальную переменную.
Проверяйте состояние целиком
Оформление раскрытого меню, видимость содержимого и сообщение о состоянии для вспомогательных технологий должны согласовываться. Если меняется только цвет кнопки, пользователь может не получить ожидаемого результата. Проверьте повторное нажатие, управление клавиатурой и узкий экран. Стили внутри Astro-компонента по умолчанию ограничиваются его областью, поэтому правило родителя нельзя автоматически считать правилом для внутренностей любого дочернего компонента. При непредвиденном виде полезно проверять границы стилей отдельно от обработчика действия, а не менять всё одновременно.
Попробуйте на практике
Спроектируйте небольшую навигацию на бумаге, прежде чем писать её реализацию.
- Нарисуйте название сайта, три ссылки на разделы и кнопку раскрытия дополнительных пунктов.
- Для каждого элемента подпишите назначение и решите, относится ли он к переходу или действию.
- Разделите заметки на структуру HTML, правила оформления и браузерное поведение.
- Опишите два состояния меню и переходы между ними при первом и повторном нажатии.
- Добавьте проверки клавиатуры, узкого экрана и согласованного сообщения о раскрытии; отметьте, какой код работает до отправки страницы, а какой после её загрузки.
Как проверить результат. У каждого поведения есть механизм, у каждого элемента — смысл. SCSS не принят за обработчик нажатия, а серверный код не считается автоматически исполняемым в браузере.
Частые вопросы
БЭМ обязателен для Astro?
Нет. Это самостоятельный подход к организации интерфейса. Его применяют, если он помогает поддерживать понятные границы и согласованные имена.
Нужно ли для простой кнопки добавлять React или другой фреймворк?
Не обязательно. Astro поддерживает обычные клиентские скрипты. Выбор инструмента зависит от требуемого поведения, а не от самого наличия интерактивного элемента.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.