Инкапсуляция стилей блока?

Question

[Narts]

Допустим на сайте есть див #demo. В этот блок подгружаются различные html элементы (навбары, кнопки, формы). Помимо html-разметки элементов, подгружаются их стили и js

Проблема в том, что основные стили сайта так же действуют на элементы #demo. Возможно ли как-нибудь инкапсулировать потомков #demo от основных стилей?

Answer 1

[Eugene Chefranov]

Полноценно нельзя, планируется в будущем такое реализовать (по факту уже есть, но плохая поддержка браузерами) https://css-live.ru/articles/css-izolyaciya.html
Сейчас только наверно перебивать по типу reset.css или normalize.css исходя от корневого класса или id maxsite.org/page/scoped-css

Будет типа

#demo h1 {margin: 5px 0}
#demo p {font-size: 20px}

... и т.д.

Answer 2

[McBernar]

Нативно нельзя, только js-фреймворками. Во vue scoped styles поддерживается, например.

Но можно просто не делать селекторов вида #div h1, а работать строго каждому элементу свой класс. Что, в общем-то, пропагандирует тот же бэм.

Answer 3

[Сергей delphinpro]

Есть еще свойство all и значение initial
И вот здесь в ответах есть хак