As I work on creating a responsive site, I find myself in the midst of crafting media queries. My process involves writing them out as I go along, like this example illustrates:
.status-reply-disabled {
color: #B1B1B1;
font-size: 14px;
margin-top: 10px;
position: absolute;
margin-left: 65px;
}
@media screen and (max-width: 600px) {
.status-reply-disabled {
font-size: 10px;
margin-left: 35px;
}
}
Later on, my code might look something like this:
.status-reply-avatar {
border: 1px solid #d8d8d8;
width: 45px;
border-radius: 50%;
position: absolute;
}
@media screen and (max-width: 600px) {
.status-reply-avatar {
display:none;
}
}
I've been pondering whether consolidating all media queries for a specific width, such as 600px, into one larger query would be more efficient for processing times. It might look something like this:
@media screen and (max-width: 600px) {
.status-reply-avatar {
display:none;
}
.status-reply-disabled {
font-size: 10px;
margin-left: 35px;
}
...
All other styles for this width
...
}
Do you think it's advisable to structure my media queries this way for optimization purposes, or do you believe my current approach is sufficient?