当HTML5页面中有许多css链接时,最佳做法是什么



在我的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">

你不会改善加载时间,但如果你只是不想有这么多链接标签,你可以只链接一个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,并将所有这些文件编译成一个文件。

相关内容

最新更新