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

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

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

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 3

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