javascript - 定义完全独立的样式信息

Question

我正在构建一个 Web 应用程序集合。所有这些网络应用程序都具有相同的页眉和页脚。 (除了当用户登录时它们的内容会稍微改变)。

我不喜欢的是应用程序中为页眉或页脚定义的样式信息的使用/重新定义的感觉。如果发生这种情况，我可能需要在应用中重命名样式信息。

我有一些解决方案。

1. 将 iframe 用于页眉和页脚。所以他们永远不会混淆。
2. 对页眉和页脚使用内联样式信息。
3. 使用非常复杂的 CSS 定义名称，例如 sE69621C09。因此，在应用程序中，我绝不会错误地为样式信息使用相同的名称。

我不确定 iframe。有些人说他们不安全。好吧，所有的网络应用程序都会由我们编写，但我不知道javascript是否可以用于服务器中的一些不好的东西。

内联样式信息会增加每次请求时传输的数据量。

如果我在几个月后查看相同的代码，复杂的 CSS 名称会让我感到困惑。

你们在同一页面中混合不同代码部分时使用了什么样的技术来解决这个问题？

Answer 1

一个可能的解决方案是将样式信息与应用完全分离，并为每个应用维护单独的样式表。

因此您的 header 将使用通用样式标识符，例如

<div class="header">
    <h1 class="maintitle">...</h1>
    <p class="slogan-text">...</p>
</div>

然后每个站点在它自己的样式表中定义这些样式，即 Site1 在 site1-styles.css 中有一个包含其特定样式的文件，在 site2-styles.css 中有 Site2 > 等。仅包含与特定站点相关的样式表。

避免在同一个.css文件中重复不同站点的样式信息。