定义完全独立的样式信息

Question

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

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

我有一些解决方案。

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

我不确定iframe。有些人说他们不安全。所有的网络应用程序都将由我们编写，但我不知道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文件中重复不同网站的样式信息。