Desktop first using SASS

Community feedback

• 

  Martin•1,150

  @ringmPosted over 4 years ago

  Hi @Dheyson! Greay job on completing this one! It looks really good. I took the liberty of downloading your code and check it in detail, I have some ideas that could really improve your project.

  • You have nested all your styles inside media queries, I would advice you too try a mobile first approach. That means you code all the styles for the mobile design, and then just 1 or 2 media queries for specific breakpoints.

  • Regarding the media queries, I would advice you to always work with min-width, instead of max-width. Right now, you have set the destkop styles with a media query that works for devices with a max-width of 1920px. What happens when the site is opened on a screen that has a resolution bigger than 1920px? There are no styles defined and the site breaks. Try doing a mobile first approach and you will definetly avoid this issues.

  • I checked the css file and you have too many nested selectors, some goes 6 or 7 levels deep! That's totally not reccomended, you should always avoid specificity when possible. In your case in particular much of this selector aren't doing anything.

  For example, this code:

  .container .information .form button:hover, .container .information .form button:active, .container .information .form button:focus {
    opacity: 0.5;
    box-shadow: 0px 5px 20px #ce9797;
  }
  

  And this code:

  .form button:focus {
    opacity: 0.5;
    box-shadow: 0px 5px 20px #ce9797;
  }
  

  Work exactly the same, however, the second one is much cleaner and easy to read. Try removing all the nesting selector when possible.

  I think if you implement this changes you'll fix most of you layout problems. Keep it up! I'm looking forward on seeing your next projects :D

  2
• 

  Dheyson Alves•220

  @dheysonalvesPosted over 4 years ago

  Hey @ringm! thank you very much for taking the time to reply. So great to read feedback, definitely gonna check. And thank you for warning me about this nested CSS, it got really huge. I got your point about the resolutions and media-queries, gonna check those.

  Thank you :b!

  0