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

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 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)! 😁

  2

  ---

  

  Papa Elhadj Abdoulaye NDOYE•770

  @NDOY3M4NPosted almost 4 years ago

  @ApplePieGiraffe Oh, I didn't know you could use multiple CSS background images. I literally copied your implementation of the background-position, hope you don't mind. Thanks again for this useful tip.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @NDOY3M4N

  Haha, no problem! 😆

  Keep learning and having fun!

  0
• 

  Jessica Strachan•160

  @JessicaStrachanPosted almost 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*
  

  2

  ---

  

  Papa Elhadj Abdoulaye NDOYE•770

  @NDOY3M4NPosted almost 4 years ago

  @JessicaStrachan thanks for those precious tips. I'll use card__main and card__footer for now. Following the BEM naming convention is always tricky for me :)

  0