Mobile first Workflow, CSS Grid

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  This looks good and the html is spot on!

  I recommend some changes to how you are writing scss.

  You are nesting very heavily at the moment. As well as making it very hard to read, you're really increasing specificity there and it is not recommended.

  Instead, try writing your scss where you only nest pseudo states, pseudo selectors, media queries or direct children selectors.

  // eg. Instead of this 
  .my-class {
    // styles
    .child-class {
      p {
       ... 
      } 
    } 
  } 
  
  // Try this
  .my-class {
    // styles
  
    @media-query... {
      ... 
    } 
  } 
  
  .child-class {
    ... 
  } 
  

  I can't understand what you're doing with the grid and position relative I'm afraid. The whole point of css grid is you create the grid template and let that handle the layout, sizes and spacing of the grid children. It sounds like you are breaking children out of their grid position unnecessarily. Create the grid and place the cards on it where they need to be.

  Last pointer - make sure you put the font size on the body in rem not px. Never put font size in px as it cannot scale for people with different zoom settings.

  I hope this helps.

  1

  ---

  

  Gilang Aditya•425

  @madegilangadityaPosted over 3 years ago

  @grace-snow thanks for your suggestion grace, I will fix my SCSS for future challenge. I use position relative because I didn't figure out how to make the grid column position more to the top.

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Learn more how to use grid. You need to plan out the grid and set up rows and columns. Maybe look into grid-template areas too you might find that easier

  0

  

  Gilang Aditya•425

  @madegilangadityaPosted over 3 years ago

  @grace-snow thanks grace I will look it up..

  0

  

  Roc Tanweer•2,500

  @RocTanweerPosted over 3 years ago

  @grace-snow Hello, how deep nested should be in sass? And what to do if it goes any deeper?

  I totally follow BEM and 4-5 level nesting is very common in my code...

  Please help me

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @RocTanweer I rarely go deeper than 1-2 levels. I only nest media queries and pseudos usually.

  Even if you follow an approach of a parent class with element selectors, there is no good reason to nest deeper than 3 levels I think

  0
• 

  Roc Tanweer•2,500

  @RocTanweerPosted over 3 years ago

  You did really good, Almost pixel perfect 🎉 there are multiple ways to do the same job...

  Every developer has their own way to complete a task

  Good luck 😃

  1

  ---

  

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  @RocTanweer Agreed 😂

  0

  

  Gilang Aditya•425

  @madegilangadityaPosted over 3 years ago

  @RocTanweer thanks man really apreciate

  1
• 

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  Using position is also an acceptable approach. I used grid layout & it worked as well.

  1

  ---

  

  Gilang Aditya•425

  @madegilangadityaPosted over 3 years ago

  @jmnyarega thanks for your feedback

  0