Testimonials grid section with Grid Areas

Community feedback

• 

  Sunny•525

  @statanasovaPosted almost 4 years ago

  Hello! This is by far one of the best solutions to this challenge that I've seen :) Good job!

  I am also learning to stick to BEM, so here is a bit of feedback on that:

  Your block is called .card so all elements within that block should start with .card__

  For example, you have .card__header and .card__body, which is the way to go. Then in .card__header you have .header__info and in it you have .info__name and .info__status. This work for this challenge, but can get messy on real websites, where there might be other blocks with the same inner elements - those styles will collide.

  That is why we use the block name as a unique identifier for all the elements inside it. In your case that means having .card, .card__header, .card__info, .card__name, .card__status. That was bugging me at the beginning, because it is a bit repetitive, but mostly because it doesn't really convey the structure of the nested elements, which I thought it should :) Then I read more about BEM and discovered that conveying structure is not really its purpose, rather it aims to encapsulate styles for a given block and keep the specificity of the selectors consistent.

  Here is a great and easy to read article on BEM naming: https://seesparkbox.com/foundry/bem_by_example

  Hope that helps :) Keep up the good work!

  3

  ---

  

  Jesús Alejandro Atao•970

  @JesusAtao96Posted almost 4 years ago

  Hello Statanasova

  BEM is something new for me and I will be improving in the next challenges. Thank you very much for the feedback 🙌.

  1