Profile Card Component -- SASS and BEM

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi, this looks pretty sweet, well done

  Only real issue I see is the bottom of the card gets cut off on mobile landscape and the background doesn't seem to reach the bottom of my screen.

  I think you should add aria-hidden="true" focusable="false" to both inline svgs (and fix the duplicate ID issue from the report, but that's not as major when it's flagging ids in an svg)

  Lastly, when you write alt text you don't need to say photo of or image of etc. The element is already announced as an image, so just write a description. In this case, the person's name would be fine.

  I hope that helps you. Good luck with your coding, you're off to a good start here

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  I just realised on slack you asked about other solutions and BEM!

  Your BEM looks fine on this except for card--grey-text. That's not BEM, well it could be if it was placed on the same element as card and intending to modify the whole thing.

  This type of reusable class would probably be a utility class used throughout a project where needed. So I would make it color--grey or similar and not tie it to the compoment styles at all.

  You can see how I used scss, BEM and positioned bg images in pseudo elements in my solution and see what you pick up

  1

  

  Adam•430

  @aemann2Posted almost 4 years ago

  @grace-snow

  Wow, thanks for all the good feedback. I hadn't caught the landscape problem, but I fixed it by adding a media query for landscape mode. For the SVG problem, I decided to just take the SVGs out of the HTML and set them / position them as background images. That solved my validation problems and also tided up my code.

  I followed your advice for the BEM class...I believe what you're saying is that, because a color modifier could be used to modify other things on the page and not just the card, that I shouldn't tie it to just one block? I found BEM extremely useful for this project, especially when combined with SASS, but I'm still trying to get my head around when to use what and how.

  Anyway, thanks again!

  0