[SOLVED] Is it better to have multiple media queries for different element, or different widths?

Is it better to have multiple media queries for different element, or different widths?

I'm creating a responsive site, and I'm currently making some media queries. I write them as I go, like this for example:

.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;  
    }
}

then a little later I'll have 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;   
    }
}

Would it be better, for processing times, to have all media queries of, say, 600px in one big querie? 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

    ...

}

or is what I'm doing fine?

Solution

If you don't have a HUGE amount of code, it doesn't really matter concerning performance. Lately I prefer to write media several media queries, always close to the general rule of a particular element, simply to keep control over things (like in your first two codeblocks). I actually like that more. In terms of speed if wont make much difference.