Question

在我的HTML5中有多个CSS，每个CSS都用于不同的事物，例如，用于按钮类型的CSS，用于特定效果的CSS ...

我应该如何“打包”所有这些CSS？

示例：

<link rel="stylesheet" href="/css/fonts/_font-icons.css">
<link rel="stylesheet" href="/css/fonts/_font-trebuchet.css">
<link rel="stylesheet" href="/css/fonts/_font-verdana.css">
<link rel="stylesheet" href="/css/utilities/_colors.css">
<link rel="stylesheet" href="/css/utilities/buttons/shapes/_circle.css">
<link rel="stylesheet" href="/css/utilities/buttons/types/_switch-indicator.css">
<link rel="stylesheet" href="/css/utilities/_sizing.css">
<link rel="stylesheet" href="/css/components/partials/cards/charts/main/_main.css">
<link rel="stylesheet" href="/css/components/partials/cards/charts/secondary/_sales.css">
<link rel="stylesheet" href="/css/effects/_no-select.css">

Answer 1

您不会缩短加载时间，但是，如果您不想拥有那么多的链接标签，则只能链接一个CSS文件，并使用@import来导入其他文件。

main.css（放在 / css / 内部）

@import 'fonts/_font-icons.css';
@import 'fonts/_font-verdana.css';
@import 'fonts/_font-trebuchet.css';
@import 'utilities/_colors.css';
@import 'utilities/buttons/shapes/_circle.css';
@import 'utilities/buttons/types/_switch-indicator.css';
@import 'utilities/_sizing.css';
@import 'components/partials/cards/charts/main/_main.css';
@import 'components/partials/cards/charts/secondary/_sales.css';
@import 'effects/_no-select.css';

然后在html文件中：

<link rel="stylesheet" href="/css/main.css">

如果可能的话，我建议使用sass，并将所有这些文件编译为一个。

当HTML5页面中有许多CSS链接时，最佳做法是什么？

1 个答案: