HTML & SASS / Mobile First & BEM

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 4 years ago

  👋Hi Samyr Oliveira Ribeiro!

  I have some feedback on this solution:

  • Remove the style tag and its comment.
  • Wrap all your contents, expect the footer with main tag.
  • The img tag always needs src attribute.
  • In this case, the image is just for decoration. You can just leave the alt="" blank, so the screen reader will ignore that image.
  • For the stats, consider using ul and li tag and for the stats__title, I recommend to use strong tag instead of heading tags.
  • For the container width, I recommend to use max-width instead. That way, it would be more responsive. Also, use rem or em for the max-width instead of vw. The vw unit can result an unexpected behavior.
  • Leave the root font size or html font size 100% which is the default. Setting font-size to 62.5% will make the user have to adjust their font size to be able to your site.

  That's it! Hopefully this is helpful!

  54

  Marked as helpful
• 

  

  Grace•32,130

  @grace-snow

  Posted almost 4 years ago

  Yeah, I would never resize html/root font size down to 62.5% mainly because it is completely unnecessary, and it carries risk. You are correct you can mitigate against the accessibility issues by scaling the font size back up with 1.6rem on the body, BUT

  • not all elements inherit font size from the body so you have to remember to manually scale up them as well
  • you need to do extra testing for that reason
  • any rem sizes on third party components or plugins you bring in will need loads more overrides
  • because you’re changing an established default, you cannot guarantee it will work correctly for everyone on every device, operating system, browser and tech set up

  Basically it comes with a lot of risks for almost no benefit.

  There is no reason 1rem needs to equal 10px. As soon as you start thinking entirely in REM - building for alignment, proportionality and spacing - rather than thinking in pixels, the whole point disappears.

  112
• 

  

  Grace•32,130

  @grace-snow

  Posted almost 4 years ago

  That all said, this is a really nice solution! Looks great and semantically spot on. Well done 👏

  50