css - 当 HTML5 页面中有很多 css 链接时，最佳做法是什么？

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 ，并将所有这些文件编译成一个文件。