媒体查询作为代码区域的替代？

I thought it would be a neat idea to put my default css which has no width/height/.. dependencies in a media query like this:

我认为在媒体查询中放置我没有宽度/高度/ ..依赖关系的默认css是一个很好的想法，如下所示：

@media only all and (min-width: 0px){ ... }

Are there any possible drawbacks I've missed?

我错过了任何可能的缺点吗？

2 个解决方案

#1

It's not as readable to be honest with you. If I were to see that in a CSS file, I would assume it's some weird CSS hack.

对你说实话并不可读。如果我在CSS文件中看到它，我会认为它是一些奇怪的CSS黑客。

The other downside is you're adding an unnecessary media query. Setting all your default attributes through a media query is making more work for the CSS compiler.

另一个缺点是你正在添加一个不必要的媒体查询。通过媒体查询设置所有默认属性可以为CSS编译器提供更多功能。

Finally is support. Not all browsers support media queries, especially if you work in enterprise or with clients who have very old browsers. If you have all your defaults set through media queries you don't have an easy fallback if those queries fail.

最后是支持。并非所有浏览器都支持媒体查询，特别是如果您在企业或具有非常旧浏览器的客户端工作。如果您通过媒体查询设置了所有默认设置，那么如果这些查询失败，您将无法轻松回退。

#2

It's not a good idea to use anything that isn't really adding to your webpages.

使用任何未真正添加到您网页的内容并不是一个好主意。

The unnecessary use of media queries can also cause problems with old browsers (eg. IE 7,8,9) if there is no polyfilling. It will also add to the page load time.

如果没有填充，不必要地使用媒体查询也会导致旧浏览器（例如IE 7,8,9）出现问题。它还会增加页面加载时间。

There are other numerous ways to increase readablity:

还有其他许多方法可以提高可读性：

1.opening and closing comment lines to a set of CSS blocks

1.打开和关闭一组CSS块的注释行

/******default code******/
html{
..... 
}

body{
.....
}
/****--default code--****/

separate CSS files
单独的CSS文件
code collapsing in IDE
代码在IDE中崩溃

other tips are mentioned here at Improving Code Readability With CSS Styleguides

这里提到了使用CSS Styleguides提高代码可读性的其他技巧

#1