'What does it mean for media queries to be placed at the top level of the code?

I was looking into MDN Docs for media queries and it says that:

The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

Then I tried to test that with the following code:

@media (min-width: 375px) {
    .main {
        border: 5px dashed lightcoral;
    }
}

.main {
    height: 500px;
    border: 5px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <title>Document</title>
</head>
<body>
    <div class="main"></div>
</body>
</html>

It just works when I set the media query after the .main class. I understand this happens due to the cascade flow in the document, but if that, why the docs says to place it at the top level of my css code?

css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions