Profile card | SCSS, BEM and CSS animations.

Community feedback

• 

  Abed Fetrat•450

  @abedfetratPosted almost 3 years ago

  Hey! Good job on this solution! Some minor things I would consider:

  • changing card__header--age to something more like card__header-age (with one dash) or card__age, because two dashes implies it is a modifier. BEM modifier should only be added to the block/element it modifies (eg. changing appearance, state or behaviour) while keeping the original class. The age span in this case is more like a element of the card block. Read more here

  • add a background color from the image on the card__head beacuse right now it goes from white to background because the image takes a bit to load. This will ease the shift a bit.

  • Use rem/em for the font sizes. I see that you already use em for paddings and margins :like:

  Other than that it looks great!

  Marked as helpful

  0
• 

  Karol Binkowski•1,640

  @GrzywNPosted almost 3 years ago

  Thank you, you're right. I should have used one-dash approach as I did with stats. Also I added background-color as you wrote and I changed font-size variable to rem unit. I changed animation to be longer and card to transform out of the screen, so the image can load in that time. Thanks for the advice, have a nice day!

  0