@media-common - Why do we need to use this?

Question

In the Magento 2 lib documentation it contains the following:

@media-common: true|false - sets whether to output common styles. For common styles every time you want to add some styles you should use

& when (@media-common = true) {
    your styles
}

Question

What is the difference between using this and just writing Less without it? Such as:

& when (@media-common = true) {
    body {
        background: blue;
    }
}

How does that compile differently to:

body {
    background: blue;
}

Won't it be outputted in styles-l.css and styles-m.css regardless?

Answer 1

Magento 2 follows Mobile First approach and @media-common = true was designed to define styles that are base (mobile) and must be present in styles-m.css. If you drop this declaration styles will be outputted both to styles-m.css and styles-l.css files.