Can I combine CSS media queries with CSS selectors?

Question

I'm styling a web page for displaying articles. The main content is the article body, but there's also a list of links to related articles. I want the list normally to be displayed to one side of the article, but to be displayed underneath the article in either of the following situations:

• The viewport is < 992px wide
• There is wide content in the article, e.g. a large table

I've achieved this with the following CSS...

.article-sidebar {
    text-align: left;
}
@media (min-width: 992px) {
    .article-sidebar {
        float: right;
        max-width: 28%;
    }
}
@media (max-width: 991px) { 
    .article-sidebar {
        padding-top: 46px;
        border-top: 1px solid #eeeeee;
        padding-left: 5%;
        padding-right: 5%;
    }
}

.article-sidebar-bottom {
    text-align: left;
    padding-top: 46px;
    border-top: 1px solid #eeeeee;
    padding-left: 5%;
    padding-right: 5%;
}

...plus some JavaScript that works out if the article has any "wide children" and removes the 'article-sidebar' class and adds the 'article-sidebar-bottom' class if so.

However, I don't like all the duplication of the styling between >= 991px .article-sidebar and .article-sidebar-bottom. I understand that if there was duplication between different media queries for the same class I could combine them as explained here, and if media queries weren't involved I could just comma separate the CSS selectors, but is there any way to avoid repeating myself in this case?

Answer 1

I've now played about with this a bit more and come up with a solution that doesn't duplicate the code in the same way:

.article-sidebar, .article-sidebar-bottom {
    text-align: left;
    padding-top: 46px;
    border-top: 1px solid #eeeeee;
    padding-left: 5%;
    padding-right: 5%;
}

@media (min-width: 992px) {
    .article-sidebar {
        float: right;
        max-width: 28%;
        border-top: initial;
        padding-left: initial;
        padding-right: initial;
    }
}

I think my problem was that I was thinking 'top down', i.e. starting with large screens and then adding support for smaller devices in the media query. If it's the larger screens that are handled by the media query then I think it becomes much neater.

Thanks to everyone who's commented so far. Although I've found a better solution to my own problem I'd still be interested in an answer to the original phrasing of the question... i.e. whether anyone can provide the syntax to use the same style for different combinations of class & media query (if this syntax exists...)

Answer 2

If you use a preprocessor like SCSS, then this could be done as a mixin.

@mixin my-name() {
    padding-top: 46px;
    border-top: 1px solid #eeeeee;
    padding-left: 5%;
    padding-right: 5%;
}

@media (max-width: 991px) { 
    .article-sidebar {
        @include my-name();
    }
}

.article-sidebar-bottom {
    text-align: left;
    @include my-name();
}