CSS Tip

Write better CSS with modern CSS

A lot of new CSS features can help you optimize your code and reduce redundancy.

Here is an example of a CSS code with a lot of redundancy

/*
  The same selector 3 times!! 🤮
  max-width? does it mean bigger or smaller?? 🫣
  grid-template-columns everywhere !! 😬
*/
.container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
@media (max-width: 800px) {
  .container {
    grid-template-columns: repeat(2,1fr);  
  }
}
@media (max-width: 400px) {
  .container {
    grid-template-columns: 1fr;  
  }
}

It can be optimized like below using the modern features

/*
  one selector 🤩
  one property 🤩
  clear media queries 🤩
*/
.container {
  display: grid;
  grid-template-columns: repeat(var(--n,3),1fr);
  gap: 10px;
  @media (width < 800px) {
    --n: 2;
  }
  @media (width < 400px) {
    --n: 1;
  }
}