@MojtabaMosavi
Posted
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
