Only one @media query, is that correct?

[hariskar]

In my css I specify only what happens with

@media screen and (max-width:1000px)

Is that correct? Should I not specify what should happen with width > 1000px? Of course some rules are common for <1000px and >1000px, but some are only for >1000px. Now they are just overridden by the @media screen and (max-width:1000px) rules. Would it be better to add a

@media screen and (min-width:1001px)

for these?

*{box-sizing:border-box}
html{overflow-y:scroll;position:relative;height:100%}
header.top{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2}
header>.container{overflow:visible;white-space:nowrap}
#nav a{color:#d2dce6;display:block;padding:3px 4px;font-weight:bold}
#nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left}
#nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4}
#l1{color:#f2f2f2;font-size:19px}
#l2{color:#d2dce6;font-size:14px}
#logoArea{display:inline-block;float:none;vertical-align:top;font-weight:bold;font-family:Arial}
#logoArea>a{white-space:normal}
#logoArea>a div{margin-left:12px}
#nav{list-style:outside none none;overflow:hidden;margin:0;padding:0}
#navArea{display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap}
.container{width:81%;margin:0 auto;max-width:1000px}
aside{height:100%;margin:12px 0 15px 0}
h1{color:#4a6b98;font-size:21px}
h2{font-size:19px}
#block1{height:auto;margin-top:14px}
#block1 ul{height:auto;padding:0;margin:0}
#block1 li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9}
#block1 a{display:block;font-weight:bold}
#block1 a:hover,#block1 li a.selected{color:#262626}
#block1 li:first-child{border-top:1px solid #d9d9d9}
#block2,#block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px}
#block2 h2,#block3 h2{margin:0;font-size:18px}
#block2 p,#block3 p,#block2 form{font-size:13px}
body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:15px;color:#404040;line-height:1.5}
body a{text-decoration:none;color:#4a6b98}
#content{margin:26px 0 15px}
footer.col-12{position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;margin-top:-100px;background-color:#dae4f1;border-top:#6e98c2 2px solid}
footer p{font-size:12px;margin:0;line-height:1.43}
#iso{float:left;margin-right:5px}
#p1,#c{color:#1a3365}
#p2{color:#dae4f1}
ul.topnav li.icon{display:none}
.row::after{content:"";clear:both;display:block}
[class*="col-"]{float:left;padding:15px}
.col-2{width:16.6667%}
.col-3{width:25%}
.col-4{width:33.3333%}
.col-9{width:75%}
.col-12{width:100%}
#wrapper{min-height:100%}
aside:after,#content:after{content:"";display:block;padding-bottom:100px}
@media screen and (max-width:1000px){aside:after{padding-bottom:15px}
#content h1:first-child{margin:0 auto;display:block}
ul.topnav li:not(:first-child){display:none}
ul.topnav li.icon{float:right;display:inline-block}
#logoArea{display:block;text-align:center}
header.top{height:auto}
#navArea{display:block;height:30px;margin:1em 15px}
[class*="col-"]{width:100%}
#nav li{float:none;margin:0;background-color:#1a3365}
#nav{position:absolute;left:0;right:0}
ul.topnav li.icon{display:inline-block;position:absolute;right:0;top:0}
#nav a{font-size:16px}
#content{margin-top:0}
aside{margin-bottom:0}
.container{width:auto}
ul.topnav.responsive{position:relative}
ul.topnav.responsive li.icon{position:absolute;right:0;top:0}
ul.topnav.responsive li{float:none;display:block;margin:0}
ul.topnav.responsive li a{display:block;text-align:left}
#nav.topnav.responsive>li:not(:first-child):not(:last-child){margin-top:-2px}}

Edited November 11, 2016 by hariskar

[Ingolme]

Generally I just let the CSS cascade and override anything that needs to be changed, but there isn't a problem if you want to add a media query to exclude some of the styles on different screen sizes.

[hariskar]

Thank you, if I do this, is there any change that this message: "Eliminate render-blocking CSS in above-the-fold content"

in google pagespeed goes away?

Edited November 11, 2016 by hariskar

[Ingolme]

You can't make it go away, because CSS actually needs to block rendering. You can make it less of a problem by reducing the number of HTTP requests necessary to load stylesheets. Mainly, don't have more than one stylesheet on your page.

[hariskar]

I thought that if the css code for each screen would be eliminated, the message could go away. I have only one small 3366kB css. I can't understand why google suggests this. If I put the code of the css in the head, the message goes away and I get 100/100 for both Desktop and mobile. But noway will I put my css in every single page... This suggestion seems wrong to me.