我正在进行必要的静态页面分配。 （不是我的选择）
我有一个导航，我希望可用于几十个静态html文件。
我通过jQuery / javascript获得标记
$(function () {
// get navigation menu
$.get('nav.html', function (data) {
$('.navigation').replaceWith(data);
});
});
事情开始在这里开始变得时髦
我正在加载到多个页面的标记是这样的：我没有添加body标记，因为这个内容将被加载到现有的HTML页面中。
nav.html
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
我的问题是没有应用于nav.html的样式被加载。然后，为了将css样式放入nav.html，我添加了一个head标签，闻起来像一个非常糟糕的做法，我在这里寻求指导。
nav.html（带头标记）
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="xlib/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="app.css" />
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
将相同的HTML标记加载到多个页面中的最佳做法是什么，同时异步执行并获取相同HTML标记所需的所有样式。
虽然“最佳实践”可能是客观的，也是一个意见问题，但我一直在使用静态和非静态网页，对我来说，似乎最有意义并且是最干净的实现的东西是有一个共同的css文件，可以在主要html文件的头部添加所需的每个页面。
如果你想根据不同的功能区域组织你的文件，以便你有匹配的nav.html和nav.css（甚至nav.js）文件，我会看一个生成常见的css文件的捆绑工具（甚至常见的js）文件）给你。要使用的捆绑工具取决于您用于撰写网站的技术。
希望这是有帮助的，如果你想要了解更多细节让我知道。