基本上,我想知道使用@import将样式表导入到现有的样式表中,而不是仅仅添加另一个样式表的优势/目的是什么…

<link rel="stylesheet" type="text/css" href="" />

文件的开头?


当前回答

我经历了一个可以添加链接样式表的“高峰”。虽然添加任何数量的链接Javascript对我的免费主机提供商来说都不是问题,但在外部样式表数量翻倍后,我就崩溃/变慢了。 正确的代码示例是:

@import 'stylesheetB.css';

所以,就像Nitram提到的那样,我发现在硬编码设计时,拥有一个好的心理地图是很有用的。 祝成功。 如果有语法错误的话,我原谅你。

其他回答

在头部添加css样式表与使用导入功能并没有太大区别。使用@import通常用于链接样式表,这样可以轻松地扩展样式表。它可以用来轻松地交换不同的颜色布局,例如结合一些一般的css定义。我认为主要的优势/目的是可扩展性。

我也同意xbonez的评论,因为可移植性和可维护性是额外的好处。

我认为这里的关键是你为什么要编写多个CSS样式表的两个原因。

You write multiple sheets because the different pages of your website require different CSS definitions. Or at least not all of them require all the CSS definitions one other pages require. So you split up the CSS files in order to optimize what sheets are load on the different pages and avoid loading too many CSS definitions. The second reason that comes to mind is that your CSS is getting that large that is becomes clumsy to handle and in order to make it easier to maintain the large CSS file you split them up into multiple CSS files.

第一个原因是附加的<link>标记将应用,因为这允许您为不同的页面加载不同的CSS文件集。

对于第二个原因,@import语句似乎是最方便的,因为您可以获得多个CSS文件,但加载的文件总是相同的。

从装载时间的角度来看并没有什么不同。浏览器必须检查和下载分离的CSS文件,无论它们是如何实现的。

我使用@import的一个地方是当我处理一个页面的两个版本时,英语和法语。我将使用main.css用英文构建我的页面。在构建法语版本时,我将链接到一个法语样式表(main_fr.css)。在法语样式表的顶部,我将导入main.css,然后为法语版本中需要不同的部分重新定义特定的规则。

如果你使用的是CSS RESET,比如Eric Meyer的RESET CSS v2.0,在你的CSS中使用@import,这样它就能在应用你的CSS之前完成它的工作,从而防止冲突。

现代浏览器可以使用css文件定义全局变量。该文件可以导入到其他可以使用该变量的css文件中。

例如,要在站点中使用一致的颜色:

colors.css :根{ ——bg-dark: # ffffff; } home.css @ import“colors.css”; 身体:var(——bg-dark)