SASS/CSS: Media Queries prone to breaking

Question

I'm having some problems writing the media queries to make my site responsive. To keep everything tidy I have the mobile stylesheet written in a separate file (mobile.css.scss) like so:

@media (min-width: 340px) and (max-width: 767px){

    /* hide desktop only code and display mobile elements */

    .menu{display: none;}
    .banner-desktop{display: none;}
    .banner-mobile{
        display: block !important;
        img{width: 99%;}
    }

    /* general styling */

    .page-body{
        width: 99% !important;
    }
}

and my desktop styling is in application.css.scss:

body{

    /* Hide mobile only stuff */
    .banner-mobile{display:none;}

    /* General Styling */

    .page-body{
        width: 1167px;
        margin: 0 auto;
        padding: 0;     
    }
}

The problem is that some of the mobile styling is not being read unless I have !important next to it as shown above. I'm new to and not yet 100% comfortable with css/sass but I'm reasonably certain that this sort of approach is not the way to go about things. I could end up with !important down the entire stylesheet!

I'm really not sure what I'm doing wrong so any help at all would be very much appreciated.

Answer 1

Using !important should always be your last resort, they almost always cause more specifity problems than they solve. Media queries do not alter the specificity of the selectors. If the specificity of the selector is equal, then last matching selector wins.

When you have this:

@media (min-width: 30em) {
    .foo {
        color: red;
    }
}

.foo {
    color: blue;
}

For devices that are larger than 30em wide, it is the same as this:

.foo {
    color: red;
}

.foo {
    color: blue;
}

So, what you're actually looking for is something like this:

// styles that apply to *all* devices go here (see: mobile first methodology)
// repeatedly setting/unsetting styles is inefficient and should be
// avoided whenever it is reasonable to do so

@media (max-width: 767px) { // narrow viewport only
    .menu, .banner-desktop {
        display: none;
    }
}

@media (min-width: 767px) { // bigger than the narrow viewport
    .banner-mobile {
        display: none;
    }
}

There is zero benefit to having individual CSS files because all devices download them, even if they do not currently match against the media queries.

Answer 2

It's a common issue

--

!important

We've done responsive interface work before , and found you'll have to use !important to get things to work for many of the elements.

I think the problem is the @media query basically just appends a new set of styles to your elements (kind of like how inline styles work)

This means if you want to override specific values (from what I remember, width was one of these), you'll need to use !important

--

Bottom line is I don't think you're doing anything "wrong" by calling !important - you just need to be able to keep the code structured & clean