Why do I have to put media queries at the bottom of the stylesheet?

Question

I am new learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regar

Answer 1

Media queries cascade with the rest of the stylesheet. You can intersperse media queries within your stylesheet, and so you can also cascade styles as needed.

For example:

.my-class {
    color: red;
}

.my-class--modifier {
    color: blue;
}

@media screen and (min-width: 760px) {
    .my-class--modifier {
        color: green;
    }
}

.some-other-class {
    width: 200px;
}

@media screen and (min-width: 760px) {
    .some-other-class {
        width: 700px;
        background-color: gray;
    }
    .some-other-class .my-class {
        border: 2px solid red;
        border-radius: 4pt;
    }
}

This works precisely due to CSS's cascading nature. You can organize media queries as required based on sections, individual selectors and more.