是否有一种无痛的方式来制作"css沙箱"？

Question

通过CSS沙箱我的意思是我的布局中有一个完全独立的外观.我需要这个,因为我的某些类需要在布局中输出一些内容的"窗口",但我不希望应用程序的css弄乱它们.它们主要与调试相关,如打印var内容,基准图或显示一些错误/异常.

到目前为止,我正在进行某种本地重置,但这对于避免冲突非常烦人,如果我忘记了一些规则可能会失败.例如:

html body div.eh-box {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    vertical-align: baseline !important;
    background-color: #fff !important;
    font: 12px/12px 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    margin-bottom: 20px !important;
}

html body div.eh-box * {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    font: inherit !important;
    vertical-align: baseline !important;
    color: #333 !important;
}

html body div.eh-box .title {
    font-size: 50px !important;
    line-height: 75px !important;
    /*font-weight: bold !important;*/
}

html body div.eh-box .desc {
    font-size: 24px !important;
    line-height: 36px !important;
}

Answer 1

我对它了解不多，但我认为这或多或少是Shadow DOM所做的

Answer 2

您可以创建一个带有 ID 的容器元素，然后重置其规则（确保这部分是最后加载的）。您可能遇到的唯一问题是规则!important，但您也可以在重置部分中使用这些规则（不是真正推荐的做法，但它会起作用）。

另外，根据站点的结构，您可能希望尽可能具体地调用容器元素，例如body #top_element #another_top_element #container为了赋予其更高的优先级，但在大多数情况下，这不是必需的......