separate media queries for every class?

November 10, 2021

Will it make the site slower if I make a separate media query for every class?

I mean to write

.class1 {
   /* rules */
}  

@media only screen and (max-width: 800px) {
  .class1 {
     /* rules */
  }
}

.class2 {
 /* rules */
}

@media only screen and (max-width: 800px) {
  .class2 {
     /* rules */
  }
}

Instead of (which I see everywhere)

.class1 {
   /* rules */
}

.class2 {
   /* rules */
}

@media only screen and (max-width: 800px) {
  .class1 {
     /* rules */
  }
  .class2 {
     /* rules */
  }
}

>Solution :

Having multiple media queries shouldn’t impact performance. But in case your project will scale then and adding many queries will increase the size of the CSS file, which could impact site’s performance.