HTML & SASS / Mobile First & BEM

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 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!

  Marked as helpful

  5

  ---

  

  Samyr Oliveira Ribeiro•215

  @SamyrORPosted over 3 years ago

  Hello @vanzasetia!

  I really apreciated the feedbacks, thank you!

  • I removed style tag, since i forget it there someway
  • Yes, i thinked this when i started, but i imagined if this was not all the content of some page, but some piece and there main tag will not make sense, but i changed it now, since this is all the content of the page.
  • Changed the img tag to a div, because i'm using content property of css instead src.
  • For the stats i changed the div's for ul and li, and the h3 to strong.

  Thats all make a lot of sense

  • I think vw unit fit well for the mobile first approach, avoiding the use of a bunch media queries, and other properties, could use a max-width, but has only one element. And with vw in other solutions never experimented a unexpected behavior (don't mean that could`t happen). And will aways fit the expected view width of the user.
  • I don't see how the font-size at the html with 62.5% could force the user to adjust, when its already flexible and listen to browsers default/user choise, and not hardcoded like px unit (that really will affect the user accessibility)

  This font-size make 1rem == 10px, making work with rem unit straightforward, that i prefer instead then using px unit.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @SamyrOR 👍Good job on improving your code!

  The vw is the unit that is relative to the user viewport width. Which mean if the user has wide screen then the card may become too large. I recommend to add max-width to prevent that from happening.

  About the root font size, let me give you an example. If the users that already set the browser font size to 20px and what do you think the users will expect?

  The users are expecting that at least most of the text is 20px size or larger than the default size. But when they see your site, they will see only 12.5px since you cut it off. For the worst case, the users that set smaller font size will see even smaller font size, like 14px will be equal to 8.75px.

  The math:

  user font size setting * html font size = what they will see
  

  I'm not sure that I explained this correctly. But, I will tag @grace-snow to see if she can help me to explain about root font size or correct me here.

  2

  

  Samyr Oliveira Ribeiro•215

  @SamyrORPosted over 3 years ago

  @vanzasetia Thanks again for the tips!

  About de vw, yes this is relative to the viewport user, and a max-width help a lot, how i placed the max-width at the card component level, this already prevent the card became to large in wide screens.

  At the html font-size the math is correct, but look at this, the user setting this to 20px, the 62.5% will really turn it to 12.5px, in a root level. Since the rem unit is relative to the root font-size, at the body tag i set the font-size to 1.6rem, making all content of the page match this size, therefore 1.6rem of 12.5px is 20px.

  So independent of what value the user set for him font-size, 1.6rem of 62.5% will aways match the value setted by him.

  This let me work with sizes a lot better, without awkwardly the user experience.

  It's not my creation you could find the describe of this implementation at some blogs, even at <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" target="_blank">mdn web docs</a>

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @SamyrOR Your explanation makes sense to me and I think you are right about the root font size, it's still accessible. Thanks for correcting me!

  I also see an article from CSS Tricks about Accessible font-size. In my opinion, there's nothing wrong with that, so nevermind on what I said before about that.

  Have a great day! 🤗

  1
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 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.

  11

  ---

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @grace-snow Hello Grace, its wrong also if I set font-size 16px in the html or root? By default rem has a value of 16px without a need to setup the value?

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  @correlucas yes that would be unnecessary and potentially add issues in by using a px value. It would be the exact same as saying font size 100% (which is fine as it’s a responsive unit) but totally unnecessary as that would already be the font size anyway. No benefit at all.

  1
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

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

  5