XuLaLa.Tech

层叠样式表(CSS)是大多数网站的设计基础。它描述了元素应该如何在屏幕上呈现。这就是CSS @import at-rule介入的地方。@import规则告诉CSS引擎将一个外部样式表导入另一个样式表。这允许将一个样式表中的样式规则添加到另一个样式表中。此规则还可以与媒体查询结合使用，以导入基于设备类型的样式表。@import样式规则是有益的，因为它可以用来避免重复的样式规则，甚至可以根据访问设备导入特定的样式。@import规则必须位于样式表的顶部。

@import "style.css"; /* using a string */
@import url("rebrand.css"); /* using a URL */
@import "print.css" print; /* using a media query */

问题不在于语言的复杂性，也不在于编码的难度。问题在于，即便是创建一个中等规模的网站，也需要大量的信息。如果您考虑创建一个简单的设计特性所需要的HTML的数量，然后将其推广到许多页面，每个页面上都有设计和信息，那么这个任务可能会让人望而生畏。

如此大量的信息也很难掌握。如果你想复制粘贴某些规则，那么你必须回去找到它们。即使你在组织CSS方面做得很好，但网站的庞大规模和信息量可能会让你完全不知所措。@import规则是组织大量样式规则的好方法。

@import的优点

CSS @import最好的一点是它节省了你的时间和挫折。如果您没有使用@import，那么您至少可以回到旧的CSS来复制和粘贴您需要的信息，或者在单个样式表中管理所有样式规则。当你的网站变得越来越大，代码变得越来越难找的时候，这可能会很耗时，令人沮丧，甚至是困难的。更糟糕的是，重复的样式会导致更大的样式表，从而降低网站的性能。
在这些优点之上，

• 它甚至比复制粘贴方法或添加链接方法节省时间。
• 使用@import方法很难出错。
• 它提供组织帮助时，建立一个大中型网站。涉及的信息和编码太多了，任何帮助都很重要。
• 您可以创建您想要导入的任意多的CSS文件。您可以创建一个主文件，然后拥有额外的文件，如排版或图像。
• 它是一个免费、省时、简单而有效的web构建工具。

@import的缺点

与CSS @import相关的唯一真正的负面影响是，如果在构建过程中没有使用它，它可以增加页面加载时间到您的网站。当页面使用@import命令加载时，它必须读取并导入规则中指定的样式表，然后将其应用于当前页面。这不会花很多时间，即使是使用@import命令的最大的网站也不会在加载时间上有明显的差异。然而，对于那些利用加载时间来计算你的搜索排名的机器人来说，这可能会使你在令人垂涎的搜索引擎列表中上升或下降

其他CSS导入的方法：

链接:使用标签在HTML头文件中链接CSS文件，允许下载而不是调用CSS文件。这意味着浏览器不必转到另一个样式表来导入它，而是可以立即下载它。链接是一个优点，因为它不会增加加载时间，但是也有一些缺点。最大的问题是，如果你想链接到你的CSS文件，你必须知道它在哪里。如果你没有，而你的网站又大又复杂，那么你可能要花很长时间才能找到那个链接。

重写相同的样式规则:这是合并的一种方法，但不是真正有效的替代方法。在不同的页面上一遍又一遍地重写相同的内容，这不仅难以处理，而且效率也很低。虽然可以这样做，而且可以有效地这样做，但是出错的风险和所需的大量时间使它变得无关紧要。