定义完全独立的样式信息

Question

我正在构建 Web 应用程序的集合。所有这些网络应用程序都有相同的页眉和页脚。 （除了当用户登录时他们的内容略有变化）。

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

我对此有一些解决方案。

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

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

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

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

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

Answer 1

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

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

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

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

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