Каковы лучшие практики, когда на странице HTML5 много ссылок CSS? - PullRequest
0 голосов
/ 07 ноября 2018

имеют несколько CSS в моем HTML5, каждый 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">

1 Ответ

0 голосов
/ 08 ноября 2018

Вы не улучшите время загрузки, но если вы просто не хотите иметь столько тегов ссылок, вы можете связать только один файл 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 и собрать все эти файлы в один.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...