Testimonials Grid Section with SCSS, BEM, and CSS Grid

Community feedback

• 

  Mojtaba Mosavi•3,760

  @MojtabaMosaviPosted almost 3 years ago

  1- Whenever using a naming convention try to stick to it's rules for the sake of consistency and communication. In BEM exsistance of element is meaningless without a block, example temtimonial__container. A better appraoch is to creatue a resuable component testimonial which can look something like this:

  <article class="testimonial">
      <h3 class="testimonial__heading"></h3>
      <blockqoute class="testimonial__text"></blockqoute>
      <div class="testimonial__profile">
          <img class="testimonial__img">
           <div class="testimonial__user-info">
                  <span class="testimonial__name"> </span>
                 <span class="testimonial__status></span>
           </div>
     </div>
  </article> 
  

  A little explanation

  1- Article tag because it's a self-contained and resuable piece of content.

  2- blockqoute because the text is a qoute from the customer.

  3- span instead of h2 and p because the later choice is semantically incorrect. Firstly a word is not a paragraph and the profile name is not a heading the satuation is exactly as when you want to write markup for a aritcle with it's author mentioned which you don't expect ot be the heading of the article.

  4- h3 because this gonna be used in a context where you need the h2 for section headings.

  Keep coding :=)

  Marked as helpful

  0

  ---

  

  P

  Ken•4,915

  @kens-visualsPosted almost 3 years ago

  Hey @MojtabaMosavi 👋🏻 thanks for the suggestion 👨🏻‍💻 Cheers 👾

  0