Responsive design with CSS Variable and plain HTML

Community feedback

• 

  hitmorecode•7,240

  @hitmorecode

  Posted almost 2 years ago

  I don't understand this. Why would you repeat yourself more than once?

  :root {
  --clr-primary-hsl-400: 252, 100%, 67%;
  --clr-primary-hsl-500: 256, 72%, 46%;
  
  --clr-secondary-hsl-400: 241, 81%, 54%;
  --clr-secondary-hsl-500: 241, 72%, 46%;
  
  --clr-neutral-hsl-100: 0, 0%, 100%;
  --clr-neutral-hsl-200: 221, 100%, 96%;
  --clr-neutral-hsl-300: 241, 100%, 89%;
  --clr-neutral-hsl-700: 224, 30%, 27%;
  
  /* I don't understand this, this is exactly the same as above. why repeat again here? */
  --clr-primary-400: hsl(var(--clr-primary-hsl-400));
  --clr-primary-500: hsl(var(--clr-primary-hsl-500));
  
  --clr-secondary-400: hsl(var(--clr-secondary-hsl-400));
  --clr-secondary-500: hsl(var(--clr-secondary-hsl-500));
  
  --clr-neutral-100: hsl(var(--clr-neutral-hsl-100));
  --clr-neutral-200: hsl(var(--clr-neutral-hsl-200));
  --clr-neutral-300: hsl(var(--clr-neutral-hsl-300));
  --clr-neutral-700: hsl(var(--clr-neutral-hsl-700));
  

  Why three times the same media query? Why not place all under one media query?

  @media (min-width: 600px) {
  body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  }
  }
  
  @media (min-width: 600px) {
  .result-summary {
  grid-template-columns: 1fr 1fr;
  border-radius: var(--border-radius);
  box-shadow: 0.5rem 1rem 3rem hsl(var(--clr-neutral-hsl-700), 0.2);
  margin-inline: 1rem;
  }
  }
  
  @media (min-width: 600px) {
  .results {
  border-radius: var(--border-radius);
  }
  }
  
  

  For best practice try to make it DRY (Don't Repeat Yourself) as possible

  13