Привет!
Блоки должны быть изолированы. Родительские стили не должны на них влиять. Если на сайте, куда я встраиваю свой виджет, указан font-size, то он не должен перебивать размер шрифта в моём виджете. То же касается любых других свойств. Я пробовал решать этот вопрос при помощи postcss-autoreset со сбросом всех-всех стилей. Но если добавлять все css-свойства, чтоб блок в новом окружении НИКОГДА не поехал, то вес стилей же невероятно вырастает. Стилей становится черезмерно много. В связи с этим вопрос:
Какие стили по вашему нужно сбрасывать для блоков?
Насколько я понимаю css, наследуются почти все свойства. А даже если не наследуются, на сайте может быть что-нибудь вроде span {display: block} или более реалистичное a {display: inline-block}, что моему виджету явно помешает. Но как решить эту проблему без разрастания веса моего виджета?
Если стоит задача сверстать виджет, который нужно встроить в совершенно произвольное окружение, то стоит использовать кастомные теги (все равно не дает 100% гарантии, т.к. бывает и
* { box-sizing: border-box !important; }) или shadow DOM. Ну и да, autoreset для такой задачи — вполне себе решение.Самый правильный путь — задавать all: initial виджету
@tadatuta спасибо за варианты! Попробую почитать про веб-компоненты, кастомные теги и shadow DOM. Надо сделать всё, чтоб не возвращаться к iframe! @vithar я на таком решении и остановился. Но столкнулся с ситуацией
a {display: inline-block !important}на сайте, куда вставляется виджет. Менеджер требует фиксить, а мнемамарелигия не разрешает !important писать 😅