Order summary component solution using HTML and CSS only

Community feedback

• 

  Abdur Rahman•70

  @nuraf9607Posted 5 months ago

  While you did fairly well, there could be some improvements such as "plan__plan-description" Instead of doing this you could do "plan-description", and also "text__upper-text" you could do "plan-description__lower-text" which Is more descriptive and follows BEM rules.

  Marked as helpful

  1

  ---

  

  Novan Afandi•40

  @novanAfndPosted 5 months ago

  @nuraf9607 Wow... thanks for the advice you gave. The advice you give makes sense. I read several blogs about BEM. But I'm confused about implementing the solution they provided into my code. For example I used code from BEM Grandchildren: How To Handle Deeply Nested Elements

  They have code like this:

  <div class=“nav”>
      <ul class=“nav__menu”>
          <li class=“nav__menu__item”>
              <a class=“nav__menu__item__link”>Home</a>
          </li> 
      </ul>
  </div>
  

  Then the solution they provide is to make it like this:

  <div class=“nav”>
      <ul class=“nav__menu”>
          <li class=“nav__item”>
              <a class=“nav__link”>Home</a>
          </li> 
      </ul>
  </div>
  

  Then what about my code like this:

   <p class="plan-change__text">Change</p>
  

  if I make it like this:

  <p class="card__text">Change</p>
  

  It might conflict with the "card__text" class element in the top row that I already have. So I am very grateful for the advice you gave. And sorry for my weak English.

  0