是否有理由仍然使用“@import”？ CSS规则？
我最近在 Coda.com 上发现了 @import 规则的使用。 他们实际上用于导入网站的主样式表，特别是格式：
<style type="text/css" media="screen">
@import url(./coda.css);
</style>
这将隐藏 Netscape 3 和 IE 3 和 4 的规则。由于 Web 开发工具的主要受众将使用现代浏览器，还有什么其他原因可以使用这个而不是链接吗？
I recently came across a use of the @import rule on Coda.com. They're actually using to import the main style sheet for the site, specifically the format:
<style type="text/css" media="screen">
@import url(./coda.css);
</style>
Which will hide the rules from Netscape 3 and IE 3 and 4. Since a web development tools primary audience will be using modern browsers, what other reasons would there be to use this rather then a link?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
没有任何。 使用
元素还具有摆脱编辑：在另一个样式表（
.css文件）中使用@import可以像 C 中的#include一样使用，但没有任何理由在None. Using a
<link>element also has the advantage of getting rid of the FOUC.EDIT: Using
@importin another stylesheet (.cssfile) can be used like an#includein C, but there isn't any reason to use@importin a<style>block.对于 Coda 的网站，我想他们这样做更多是出于习惯，而不是任何紧迫的技术需求。
实际 CSS 文件中的
@import语句（不在 HTML 中的当然，在生产环境中，使用一堆
@import语句是不受欢迎的，因为它会增加 Web 浏览器必须下载的文件数量。For Coda's site, I'd imagine they did that more out of force of habit rather than any pressing technical need.
@importstatements inside of actual CSS files (not in a<style>element in HTML) serve many purposes, such as making it easy to swap in and out other CSS files. The Blueprint CSS framework does this to let you easily remove certain portions of the framework such as the typography stuff or the grid stuff.Of course, in a production environment, using a bunch of
@importstatements is frowned down upon because it increases the number of files a web browser has to pull down.今天使用此规则的唯一原因是通过将 CSS 拆分为不同的文件（例如库）来使 CSS 更加模块化。
因此，虽然您的页面可能链接到一个样式表，但该样式表可以 @import 其他样式表以进行重置、排版等。
但是，这确实会减慢页面的加载速度，因为它只是更顺序的 http 请求。
The only reason to use this rule today is to make your CSS more modular by splitting it into different files, like libraries.
So, while your page might link to one stylesheet, that stylesheet can @import other stylesheets for reset, typography, etc.
However, this does slow the loading of your page since it's just more sequential http requests.
我同意安德鲁的观点。 我还使用导入来逻辑地拆分我的 css。 就我个人而言，我喜欢将它们分为 4 部分：重置、结构、排版、一般（bgs/边框等），
具体取决于执行此操作的人、他们的风格和偏好，CSS 文件也可以按页面部分进行拆分，例如 header.css、 footer.css 等。
不过，为了避免多个 http 请求，我做的另一件事是建立一个构建过程，该过程会合并（按导入顺序）并压缩 css 文件以进行实时部署。
希望这可以帮助
I agree with Andrew. I also use imports to split out my css logically. Personally I like to split them out in 4: reset, structure, typography, general (bgs/borders etc)
Depending on the person doing it, their style and preference, css files can also be split out by page section eg header.css, footer.css etc.
One extra thing I do however to avoid the multiple http requests is have a build process which merges (in order of import) and compresses the css files for live deployment.
Hope this helps
我自己使用模块化开发方法，通常最终会得到 10 多个单独的 CSS 文件。 如您所知，HTTP 请求的数量相当大，因此我喜欢使用
Blender 是一个 rubygem，可以将任意数量的 CSS 文件合并并缩小到单个样式表中。 它也适用于 JavaScript。
您可以在单独的样式表中定义@media，以便仅为正确的设备类型提供适当的规则。
I use a modular development approach myself, and often end up with 10+ individual CSS files. As you know, that's a pretty drastic number of HTTP requests, so I like to use Blender.
Blender is a rubygem that consolidates and minifies any number of CSS files into a single stylesheet. It also works for JavaScript.
You can define @media in your individual stylesheets to only serve the appropriate rules to the correct device types.