Order summary component

Community feedback

• 

  Kent O'Sullivan•1,870

  @12Kentos

  Posted about 3 years ago

  Hey @MORVWY,

  Nice job on the project, it looks great!

  I looked through your project and noticed the following code.

  .order_card .order_text .order_text_button { margin-top: 20px; }

  You do this a lot in your code, where you are creating a LOT of unnecessary specificity. (Which isn't really a good thing, as it can lead to specificity wars)

  Instead of selecting it that way, why aren't you simply selecting it like so?

  .order_text_button { margin-top: 20px; }

  Here's a good video by Kevin Powell on specificity, and some of the problems that can arise with too much or too little specificity.

  Kevin Powell Specificity

  Keep up the great work!

  00

  Marked as helpful
• 

  Jeremy Tjahjana•140

  @JeremyTjahjana

  Posted about 3 years ago

  Your code is already great in my opinion the only thing i was able to find trouble was the background image.

  <--YOURS-->
  body {
    background: url('../images/pattern-background-desktop.svg') center center/cover no-repeat;
  }
  
  main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  <-- Since you put display flex and the height on the .main class
   i also suggest putting the background on it too, it fixes the background
   problem you had when putting it on the body -->
  
  <--MINE-->
  main {
    background-repeat: no-repeat;
    background-image: url('../images/pattern-background-desktop.svg');
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  
  

  And another tip maybe try using :root in your project

  :root {
      --Paleblue: hsl(225, 100%, 94%);
      --Brightblue: rgb(56, 41, 224);
      --Verypaleblue: hsl(225, 100%, 98%);
      --Desaturatedblue: hsl(224, 23%, 55%);
      --Darkblue: hsl(223, 47%, 23%);
      --Borderradius: 10px;
  }
  
  <-- Usage Example: -->
  
  p {
      line-height: 1.5rem;
      font-size: 14px;
      font-weight: 500;
      color: var(--Desaturatedblue);
  }
  h1 {
      margin: 1rem 0;
      color: var(--Darkblue);
      font-size: 26px;
      font-weight: 900;
  }
  
  

  Other than that i think your code is amazing :3

  *PS : Correct me if i'm wrong

  00

  Marked as helpful