SASS nested structure messes up #media queries precedence - css

Question

See following fiddle:
HTML:
<div class='header'>Header</div>
<div class='main'>
<div class='row'>
<div class='cell lg-4'>
content
</div>
<div class='cell lg-4'>
content
</div>
<div class='cell lg-4'>
content
</div>
</div>
</div>
SASS:
.header {
display: none;
}
.main {
.row {
width: 100%;
.cell {
width: 100%;
background-color: red;
margin-bottom: 10px;
}
}
}
#media (min-width: 600px) {
.header {
display: block;
}
.cell {
margin-bottom: 0;
margin-left: 1px;
float: left;
&.lg-4 {
width: 33%
}
}
}
By looking at this code you would think it does the following:
Show by default a mobile design: i.e. cells are stacked vertically and take all screen space and the header is hidden
Above 600px: Become a row of 3 cells taking up 1/3 of the horizontal space each and show the header.
If you try it in the fiddle, you will see that in both viewports (above and below 600px) the cells are shown stacked vertically however the header does get hidden or shown as specified in the media query.
After searching for quite some time, I realised the query becomes effective for cells only if the media query adopts the exact same nested structure as the normal sass code, i.e.:
#media (min-width: 600px) {
.header {
display: block;
}
.main {
.row {
.cell {
margin-bottom: 0;
margin-left: 1px;
float: left;
&.lg-4 {
width: 33%
}
}
}
}
}
Why does this happen, and more importantly, how to avoid having to reuse the same structure in media queries? (the workaround for this fiddle is simple, but my actual code has more than 10 to 20 nested variables so adding a media query for the 20th element would force me to add 19 useless lines of nested variables, quickly overloading the code and making it difficult to read)
Maybe I am doing this wrong, as I am rather new to making my own responsive design, so am I missing some best practices that avoid this situation?

Answer 1

It's because .main .row .cell is more specific than .cell in a #media query.
It's good practice to reduce nesting as much as possible in order to prevent this exact situation happening as it's a pain to get around. Some other problems that come out of a lot of nesting is that it makes styles non-modular and difficult to reuse, as they rely on the exact structure, it can also bad for performance.
I recommend splitting up the top section like this:
Demo
.header {
display: none;
}
.main {
/* ... */
}
.row {
width: 100%;
}
.cell {
width: 100%;
background-color: red;
margin-bottom: 10px;
}
#media (min-width: 600px) {
.header {
display: block;
}
.cell {
margin-bottom: 0;
margin-left: 1px;
float: left;
&.lg-4 {
width: 33%
}
}
}