Есть ли безболезненный способ сделать "песочницу css"?

В песочнице CSS я имею в виду раздел в моем макете, который полностью независим. Мне нужно это, потому что некоторые мои классы должны выводить некоторые "окна" содержимого в макете, но я не хочу, чтобы приложение css было в них с ними связано. Они в основном связаны с отладкой, например, печать содержимого var, эталонные графики или отображение некоторых ошибок/исключений.

До сих пор я делал какой-то локальный reset, но это становится очень раздражающим, чтобы избежать столкновений и может потерпеть неудачу, если я забуду некоторые правила. например:

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;
}

Ответ 1

Я мало знаю об этом, но я думаю, что более или менее то, что Shadow DOM делает

Ответ 2

Вы можете создать контейнерный элемент с идентификатором, а затем reset его правила (убедитесь, что эта часть загружена последней). Единственная проблема, с которой вы можете столкнуться, - это правила !important, но вы можете использовать их в своей части reset (не рекомендуемая практика, но она будет работать).

Кроме того, в зависимости от структуры вашего сайта вы можете назвать свой контейнерный элемент как можно более конкретным, например body #top_element #another_top_element #container, чтобы придать ему более высокий приоритет, но в большинстве случаев это не понадобится..

Ответ 3

Еще одно возможное решение - в зависимости от вашего приложения - загрузить этот раздел макета в iframe - таким образом, его полностью отдельный документ подчиняется отдельному набору стилей. Не уверен, что мне нужно упомянуть, что есть определенные недостатки в использовании фреймов.