Results Summary Component (SASS + GRID + Vite)

Community feedback

• 

  Julian•160

  @joewild90Posted over 1 year ago

  Hey Henry, thanks for your solution, it helped me a lot as I am currently learning BEM conventions and wanted to check my solution. My comment is more a question as I am a BEM beginner.

  In the block

  <div class="summary__item summary__item--accent-2">
      <div class="summary__item--main">
        <img src="./assets/img/icon-memory.svg" alt="" class="summary__icon">
        <h2 class="summary__item__title">Memory</h2>
      </div>
      <p class="summary__score">92 <span>/ 100</span></p>
  </div>
  

  you give the div the class .summary__item--main. Why are you working with a modifier here but use a grandchild element for the h2 .summary__item__title? It might be better to make summary__item a new component?

  Marked as helpful

  1

  ---

  

  Henry•340

  @devhnryPosted over 1 year ago

  Hi @Ragnar0. I really appreciate the comment

  I also happen to be learning BEM.

  I particularly made use of the modifier .summary__item--main in this case to style the main section of the summary__item component i.e the Icon and Title of the .summary__item.

  Based on your suggestion, I now realize it might have been of best practice to give it a class name of .summary__item__main and not to give the <h2> element a class since I already declared the color for .summary__item--accent-2.

  .summary__item--accent-2 {
        background-color: rgba(255, 176, 31, 0.1);
        color: #ffb01f; 
  }
  

  Hope this was helpful and I was able to answer your question.

  0