Ветвление в Git и методология BEM.

Цель: изучить методологию BEM для именования классов и получить практические навыки по созданию веток в git их слиянию через запрос на слияния.

Содержание и порядок выполнения лабораторной работы:

Подготовка к выполнению лабораторной работы: повторение основных команд git и изучение новых связанных с созданием веток и их слиянием, изучение методологии именования классов BEM.

Задание по git

1. Создать на Github в репозиторий
2. Клонировать его
3. Создать новую ветку
4. Создать несколько коммитов связанных с заданием по BEM
5. Отправить новую ветку на удаленный репозиторий
6. Создать запрос на слияние веток (pull request) на github, добавить осмысленное название и описание слияния

Задание по BEM

1. C помощью BEM опишите человеческое тело (не менее 3 блоков, не менее 3 элементов, не менее 3 модификаторов) например: голова, тело, руки, ноги, на левой руке татуировка, на правой руке кольцо.
2. Из макета прошлого семестра (Ссылка на макеты) по варианту найти 4 различных блоков c точки зрения BEM: header, форма, карточка и один на выбор студента.
3. Подготовить их создание в нотации Emmet с использованием BEM. Например nav.nav>ul.nav__list>li.nav__item>a.nav__link.
4. Добавить в readme список блоков со скриншотами из макета и строками для emmet.
5. В качестве дополнительного задания для защиты необходимо будет добавить модификатор в один из блоков или элементов на усмотрение преподавателя.

Результаты выполнения лабораторной работы:

Запрос на слияние веток на github с выполненным заданием по BEM.

Источники

BEM

• Официальная документация - https://ru.bem.info/
• Проверка БЭМ - https://yoksel.github.io/html-tree/
• Шпаргалка - https://9elements.com/bem-cheat-sheet/
• Зачем нужен БЭМ? - https://htmlacademy.ru/blog/boost/frontend/short-5
• Примеры имен классов - https://tpverstak.ru/common-css-class-names/
• Emmet в VS Code - https://habr.com/ru/post/573032/
• https://getbem.com/
• Battling BEM CSS

GIT

• Git - https://git-scm.com/
• Работа с ветками - https://learngitbranching.js.org/?locale=ru_RU
• Набор готовых команд - https://github.com/Imangazaliev/git-tips
• “Как исправить” - https://habr.com/ru/company/flant/blog/419733/
• Лекция от Яндекса - https://youtu.be/yDSs80lu3ak

Дополнительные материалы

• GitFlow - https://nvie.com/posts/a-successful-git-branching-model/
• Про GitFlow на Хабре - https://habr.com/ru/post/106912/
• GitHub Flow на Хабре - https://habr.com/ru/post/346066/

Вопросы для защиты

1. Что такое Блок/Элемент/Модификатор?
2. Когда создавать блок, когда — элемент?
3. Что такое микс и для чего его можно использовать?
4. Как BEM обрабатывает именование вложенных элементов внутри блока или элемента?
5. Как связан BEM и специфичность CSS?
6. Как работать с глобальными утилитарными классами или стилями, которые не вписываются в соглашение об именовании BEM?
7. Как BEM может помочь с семантическим HTML?
8. Как создать новую ветку в Git?
9. Как переключаться между ветками в Git?
10. Как объединить ветку с другой веткой в Git?
11. Как просмотреть список всех веток в репозитории Git?