Social Proof Section challenge using Flexbox & Grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋 Hi Calvin! My name is Vanza!

  🎉 Congratulations on finishing this challenge! I hope that you have so much fun on completing this challenge! I have a recommendation for your Sass code, instead of writing like this:

  .header {
    text-align: center;
    .header-txt {
      font-size: 3rem;
      line-height: 3rem;
    }
    .header-discription {
      font-size: 1.5rem;
      line-height: 1.5;
      padding: 1.5rem 0rem;
    }
  }
  

  If you want, in the future you can try to write it like this:

  
  // Scss
  .header {
    text-align: center;
  
    &-txt {
      font-size: 3rem;
      line-height: 3rem;
    }
  
    &-discription {
      font-size: 1.5rem;
      line-height: 1.5;
      padding: 1.5rem 0rem;
    }
  }
  
  // CSS Output
  .header {
    text-align: center;
  }
  
  .header-txt {
      font-size: 3rem;
      line-height: 3rem;
   }
  
  .header-discription {
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 1.5rem 0rem;
  }
  
  

  And then what's the deal?(you may ask) It's simply to make sure that everything is on low specificity. So, that way if you want to overwrite anything later on you can just increase the specificity and also you can avoid using !important to overwrite things.

  That's it! Hopefully this little tips is useful for you!

  Marked as helpful

  0

  ---

  

  Calvin.A.S•120

  @calvin17Posted over 3 years ago

  @vanzasetia , Thank you for the valuable feedback, what you have said makes a lot of sense.

  0