html - 如何封装CSS，尤其是弹窗和不涉及iframe？

Question

刚从设计团队那里得到一个带有 css 的新网页，用于花哨的弹出框；

而且他们不知道或不关心寻找现有的类和 ID；

我需要一个没有任何 IFRAME

的工作解决方案

问题是主 css 文件中已经有超过 20,000 行 css 行，并且在某些时候某些东西会被覆盖，整个网站将会大爆炸!

这个新网页有非常常见的 class 和 id 名称，我说的是将近 100 个具有 css 属性的标签；

我想知道是否有一种方法可以封装这个新的css属性和 future 的属性；

如果有办法做到这一点，应该怎么做？

有了这个网页，我很幸运，我把标签贴上了内容，就在这之前，我使用了 style type"text/css' 标签；但我并不总是幸运的；

仅仅因为我们得到的网页包含由不同人编写的 css 代码，如果某些属性或名称或 id 相互交叉，创建新的 css 类对我来说是不公平的。

我现在有大约 10 个类用于 a 标签，而且我的大部分属性都是相同的；

Answer 1

使用有针对性的规则，让级联为您处理。将您的弹出窗口放在一个包装器中，名称尽可能详细。

<div id="myPopupDivWithCommonIds">
    <!-- rest of popup -->
</div>

并将您的 css 规则定位到该 div。

#myPopupDivWithCommonIds .error { color: bright-pink; }
#myPopupDivWithCommonIds #main { width: 93.21%; }

等等。等。这会处理 css 规则并防止您的新内容溢出。您必须注意确保没有其他规则滴下来；最好的方法是明智地覆盖任何已定义的属性(Pekka 所说)。您也可以对其进行核心处理并包含一个自定义的“重启”或“ Bootstrap ”样式表，然后再次将其所有规则重新定位到您的新弹出式 div(就像您说的那样，20k 行的 css 很难；但包括另一个文件通过附加 #id 选择器将重置规则定位到您的 div 上，这会有所帮助)。

哦，这仍然没有解决重复 ID 在技术上是无效标记的问题，并且很可能会干扰您尝试在该页面上运行的任何 JavaScript。

如果这听起来一团糟，那么，确实如此。您的开发人员和设计人员已经做到了这一点，如果不进行认真的重构，您将不会回到干净的解决方案。对于您的用例，iFrame 可能看起来像是 hack 或不可能，但它确实可以解决很多您正确预见的问题。