Question

我有一个网站，旨在与定义标题，导航等的第三方皮肤结合使用。我的网站有样式表，第三方有样式表。我将两者结合起来，可以预见到一个巨大的混乱。

我想要做的是，“将这组样式表应用于页面的这一部分，将这些样式表应用于此部分。”我不想使用框架来实现这一目标。

一个明显的解决方案是使用容器的id为我自己的所有样式添加前缀。因为它是一个拥有数百种风格的大型网站，所以这样做很难做到。

实际上，我想做的是动态地做这样的事情。

一个选项位于后端，解析样式表并对其进行修改，在每个样式名称前添加容器的id。另一个是使用javascript，将样式表解析为内存并进行适当的修改。我更喜欢前端选项。

有人能想到更好的选择吗？一些jquery插件说， $（）apply_styles_from_file（）;

或某些解决混合纸张问题的布局解决方案？

可以信任的好库可以解析和修改样式表吗？

Answer 1

我认为无论你做什么，你都必须拥有仅适用于该容器内元素的容器和样式。即使您使用基于Javascript的方法，您仍然需要定义哪些元素会受到影响，随着时间的推移这些元素会变得越来越复杂。

因此，我只是简单地避免使用基于JS的解决方案，而是选择像PHP这样的服务器端语言，它允许您在各个视图上设置范围，然后单独渲染视图，如下所示：

     <div id="main">
         <? render('view' => 'users.php', 'scope' => 'users'); ?>
         <? render('view' => 'games.php', 'scope' => 'games'); ?>
     </div>

然后，render方法可以将视图包装在div中，并确保它具有指定范围的容器。根据视图的外观，输出可能类似于：

     <div id="main">
         <div class="users">Users go here.</div>
         <div class="games">Games go here</div>
     </div>

然后，如果您决定添加另一个游戏部分，您可以简单地在新渲染的部分中重新声明范围，并且它将具有与前一个相同的CSS范围。

您可以使用代表每个范围的CSS文件（例如users.css）来帮助区分彼此相关的样式。

这是处理它的一种方法，我认为，这是我现场可以提出的最好的方法。

祝你好运，如果你找到更好的解决方案，我很乐意听到它！

Answer 2

这样的东西？

#green-bg 
{
    background-color: green;
}

#red-bg 
{
    background-color: red;
}

<div id="red" class="color-selector">Apply Red Background</div>
<div id="green" class="color-selector">Apply Green Background</div>

<div id="content">I need a background color!</div>

$('.color-selector').click(function() {
    $('#content').addClass('#' + this.id + '-bg');        
});

我还应该提到，除了命名约定之外，我不相信有任何方法可以“忽略”已加载的样式表，如果其属性与元素的请求匹配。

实施例。如果您有两个都具有h1声明的样式表，则您的h1元素将根据获胜的任何一个进行样式设置。区分的唯一方法是每个样式表都要相应地命名其属性（例如。h1.light，h1.dark），然后按照我上面描述的方式应用它们。

Answer 3

如果user_made css获得了！important-rule怎么办？

就这样：

用户自定义允许的区域并将其应用到他/她的页面 - 在后面，将使用针对修改区域的！important-rules创建一个css文件。

应该工作，但你应该否认任何你不想要的css-hack。（像以前的myspace;））

此致

Answer 4

经过我的研究，我确定没有优雅的方法可以解决这个问题。我最终做的是使用服务器端解决方案来重写我拥有的整套样式表，并为每个定义添加一个类：

   A{} becomes .myclass A{}
   .foo becomes .myclass foo{}
   #thispage .bar becomes .myclass #thispage .bar{}

我通过处理程序执行此操作，该处理程序查找该文件，然后如果自上次编译后未找到或修改，则重写它。我使用perl模块CSS :: Simple来进行重写。

然后我把核心内容包装在课堂上：

   <!-- header here -->
   <div class="myclass">
     <!-- content here -->
   </div>
   <!-- footer here -->

现在我在这个特殊课程之外的任何东西都有自己的风格而不受我的干扰。我现在可以拥有第三方风格占主导地位的页面（跳过上面的包装，只包装我想要的部分）或者我的上面那些，而标题可以来自第三方。

这太可怕了，很笨重。 :-(在未来的CSS版本中需要有一些上下文。但它可以完成工作。

范围内的动态样式

4 个答案: