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