I'm working with bootstrap and I want to (where applicable) have specific CSS for each screen size. I'm wondering if it's better to have 1 media query for each screen size in it's own section of my CSS sheet, or if I should do a media query in each spot where needed.
So let's say I have this for my standard screen size:
.example-class{
padding: 10px;
}
And then for mobile screens, I want this:
@media(max-width: 480px){
.example-class{
padding: 5px;
}
}
Should I have 1 media query for mobile screens in it's own section of my CSS where all mobile screen styling will go, or should I do a media query each time I need to have custom styling for mobile screens.
From what I can tell, having multiple media queries shouldn't necessarily impact performance. Adding many will increase the size of the CSS file though, which can impact performance.
Additionally, I want to make sure that my CSS is easily understandable to others. I think it might be easier to have a media query in each instance it's needed, that way the CSS for a particular element is all in one spot.