Web Ninja 101 | Profile card component with BEM (I'm trying)

Community feedback

• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hey, Papa Elhadj Abdoulaye NDOYE! 👋

  Good work on this challenge! Your solution looks good! 👍

  I suggest using CSS background images to add and position the two background SVGs since they are... background images! That'll make your HTML markup a little cleaner. Here's a helpful article on using multiple CSS background images, if you'd like to take a look. 😉

  Keep coding (and happy coding, too)! 😁

  22
• 

  Jessica Strachan•160

  @JessicaStrachan

  Posted over 4 years ago

  Naming can be so tricky sometimes! Good effort on the BEM so far, however I did notice one thing:

  Lines 27 and 32 card__content__top and card__content__bottom are quite different and going by your css they don't have many styles in common for them to be considered the same element of __content. I would personally call them card__main and card__footer. Or if it was a section at the top card__header.

  In the instance that you did have styles that were mostly the same, just a different positioning you would use a BEM class like so: class="card__content card__content--top" and class="card__content card__content--bottom" and this is where using SASS really helps with using BEM classes because of the nesting:

  .card
      *card styles here*
  
      &__content
          *card__content styles here*
  
          &--top
              *Unique styles for the top*
  
          &--bottom
              *Unique styles for the bottom*
  

  21