separate media queries for every class?-CodePudding

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 */
  }
}

CodePudding user response：

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.