E
E
EarthFM2016-02-23 00:08:13
BEM
EarthFM, 2016-02-23 00:08:13

How to multiply a block on a project?

Everywhere is an example of how to make one block. And I can not find how to reproduce it on the project.
There are two message and review blocks . The structure is the same (avatar on the left, description on the right), but the name is different (message and reviews). Plus, review is a few pixels less than message (Just clarified!)
How to make it right so as not to repeat (duplicate) css styles?
Which of these options is correct, and why? Maybe there is even better
#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.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question