Я здесь накидал скриншотов разных часто встречающихся блоков, нужно будет написать плоскую структуру блока, о которой говорили в видео №2. Примеры именования блоков и элементов. Пример как оформлять привел для картинки №1. Все остальные нужно придумать самим. Всего их 11, если считать первую.
Pic 1
// Pic 1qwe
.info-block {
&__img {}
&__container {}
&__title {}
&__text {}
&__btn {}
}Pic 2
// Pic 2
.twitter-post {
&__message {}
&__timestamp {}
&__logo {}
}Pic 3
// Pic 3
.option {
&__name {}
&__descrition {}
&__btn {}
}Pic 4
// Pic 4
.article {
&__title {}
&__subline {}
&__text {}
&__text--attention {}
}Pic 5
// Pic 5
.profile {
&__note {}
&__note--attention {}
&__disclaimer-message {}
}
.index {
&__count {}
&__description {}
}Pic 6
// Pic 6
.product {
&__title {}
&__subline {}
&__description {}
}
.btn-details {
&__text {}
}Pic 7
// Pic 7
.tab-panel {
&__tab {}
&__tab--trash {}
&__tab--search {}
&__tab--settings {}
}Pic 8
// Pic 8
.contacts {
&__title {}
&__address {}
&__phone {}
}
.estimate {
&__star {}
&__star--filled {}
&__estimate {}
&__like {}
&__like--selected {}
}Pic 9
// Pic 9
.rate {
&__title {}
&__subline {}
&__cost {}
&__period {}
&__btn {}
}
.rate-option {
&__status {}
&__label {}
}Pic 10
// Pic 10
.reviews-panel {
&__title {}
&__subline {}
&__count {}
}
.review {
&__rate {}
&__rate--filled {}
&__user {}
&__date {}
&__subline {}
}
.review-details {
&__title {}
&__description {}
}Pic 11
// Pic 11
.product {
&__image {}
&__title {}
&__subline {}
&__breadcrumb {}
&__btn-navigate {}
&__price {}
&__rate {}
&__rate--filled {}
&__reviews {}
&__description {}
&__quality {}
&__btn-submit {}
&__btn-bookmark {}
&__detail {}
}
.counter {
&__btn {}
&__text {}
}
.social {
&__title {}
&__item {}
}