Responsive design with CSS Variable and plain HTML

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year 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

  1

  ---

  

  Collins Adaigho•30

  @DonsmattPosted over 1 year ago

  For the variable styles, i made one without the hsl() function and one with hsl() function, so i can manipulate the opacity within the code. Makes it less stressful for me, and if you look closely, you'd notice it too.

  Then for the media query appearing at different parts of the code, it's just a preference i learnt from Kevin Powell about work flow. It goes with the workflow. But then again, i heard some servers compile it down to one code during production, so it didn't hurt to try. I basically tried a different approach than i normally do anyway. Thanks for the comment. It's very much appreciated @hitmorecode

  0

  

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  @Donsmatt you could have done someting like this

  :root {
  --text-color: 230, 25%, 78%;
  }
  
  body {
  color: hsla(var(--text-color), 0.5);
  }
  

  Without repeating, anyways it's just a tip 😁. Can you send me a link to the Kevin Powell video you are talking about? Most of the thing I know about CSS I've learned from him. Maybe i missed something.

  0

  

  Collins Adaigho•30

  @DonsmattPosted over 1 year ago

  Yeah, i understand the issues with the naming convention. Thanks.

  https://youtu.be/g1kF45K-q7o @hitmorecode

  0