Везде пример, как делать один блок. А как его размножить на проекте не могу найти.
Есть два блока
message и
review. Структура одна и та же(слева аватарка, справа описание), но разные название(сообщение и отзывы). Плюс review на несколько пиксилев меньше, чем message(Просто уточнил!)
Как правильно сверстать, чтобы не повторять(дублировать) css стили?
Какой из этих вариантов правильный, и почему? Может есть ещё правильнее
#1.message
.message__avatar
= image_tag 'avatar.jpg', :class => 'message__img message__img_size_min'
.message__info-user
p.message__name
| Ilya
p.message__date
| 23.11.2016
p.message__text
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde iusto asperiores eum voluptatum cumque, numquam, sunt facilis cum rem nesciunt illum minima labore temporibus, nobis veritatis. Quis illo temporibus ipsum.
.review
.review__avatar
= image_tag 'avatar.jpg', :class => 'review__img review__img_size_min'
.review__info-user
p.review__name
| Ilya
p.review__date
| 23.11.2016
p.review__text
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde iusto asperiores eum voluptatum cumque, numquam, sunt facilis cum rem nesciunt illum minima labore temporibus, nobis veritatis. Quis illo temporibus ipsum.
#2.message
.message__avatar
.avatar
= image_tag 'avatar.jpg', :class => 'avatar__img avatar__img_size_min'
.message__info-user
.describe
p.describe__name
| Ilya
p.describe__date
| 23.11.2016
p.describe__text
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde iusto asperiores eum voluptatum cumque, numquam, sunt facilis cum rem nesciunt illum minima labore temporibus, nobis veritatis. Quis illo temporibus ipsum.
.review
.review__avatar
.avatar
= image_tag 'avatar.jpg', :class => 'avatar__img avatar__img_size_min'
.review__info-user
.describe
p.describe__name
| Ilya
p.describe__date
| 23.11.2016
p.describe__text
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde iusto asperiores eum voluptatum cumque, numquam, sunt facilis cum rem nesciunt illum minima labore temporibus, nobis veritatis. Quis illo temporibus ipsum.
#3.row.row_message
.avatar.avatar_message
= image_tag 'avatar.jpg', :class => 'avatar__img avatar__img_size_min'
.describe.describe_message
p.describe__name
| Ilya
p.describe__date
| 23.11.2016
p.describe__text
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde iusto asperiores eum voluptatum cumque, numquam, sunt facilis cum rem nesciunt illum minima labore temporibus, nobis veritatis. Quis illo temporibus ipsum.
.row.row_review
.avatar.avatar_review
= image_tag 'avatar.jpg', :class => 'avatar__img avatar__img_size_min'
.describe.describe_review
p.describe__name
| Ilya
p.describe__date
| 23.11.2016
p.describe__text
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde iusto asperiores eum voluptatum cumque, numquam, sunt facilis cum rem nesciunt illum minima labore temporibus, nobis veritatis. Quis illo temporibus ipsum.
