Using SCSS and BEM naming

Community feedback

• 

  T

  Grace•30,990

  @grace-snowPosted over 3 years ago

  Hi

  This looks really good! Viewing on mobile the top left bg circle isn't visible but the rest looks spot on.

  BEM naming looks fine ☺

  But html markup needs some attention:

  • alt text should be intentionally blank on meaningless / decorative images like the bg pattern.
  • if that meaningless image happens to be an svg you should also include aria-hidden true on it
  • meaningful images (like the profile picture do need alt text, but it needs to be readable text describing the image. So in this case it should be his name
  • not sure why your first heading is a h4? What three levels of headings would you expect to come before this if it was included on a webpage? Remember heading levels are 100% about semantics and 0% about styling.
  • similarly, would numbers like 80k make sense on a contents page as headings for an element? Nope. So they shouldn't be headings. Their meaning is tied very closely to the word that accompanies them so the html elements chosen need to reflect that. Think list items or paragraphs with spans inside, think the description list element, think tables with the numbers as tds and words as ths.... Any of those would be valid semantic html to present this information.

  I hope that all makes sense and helps you

  1

  ---

  

  SuzuMantan•370

  @agusthasPosted over 3 years ago

  @grace-snow Hello 👋.

  Thank you so much for your feedback, really appreciate it.

  Considering your feedback on headings, I wasn't really paying attention on how it was structured if this profile card was used on a web page, and since the name was small but bold text i used h4 for that, and i use h4 again for the numbers because it used the same style with the name. Now as i look back to my HTML, it really doesn't make sense to use h4 😅.

  0