Как создать html, css форму которую можно было бы интегрировать в любой сайт и избежать конфликта css?

Создал html, css форму. Необходимо размещать ее на множестве разных сайтов с разными стилями, скриптами, фреймворками и т.д. и т.п.

Как сделать так, чтобы данная форма легко встраивалась в любой сайт, была адаптирована под пк и мобильные устройства и не ломала стили сайта в который встраивается?

Прочел о бэм, правильно ли я понял, что если сверстать форму по бэм правилам сразу адаптированной под пк и мобильные устройства, то моя проблема будет решена, возможно есть более простое и изящное решение?

Готовых примеров бэм для теста не нашел.


Ответы (1 шт):

Автор решения: Сергей В.

БЭМ тут вообще не причем. Достаточно присвоить уникальный идентификатор для формы и дальше куча своих стилей тут же. Идентификатор имеет больший приоритет. Топорно, но сработает на большинстве сайтов. Например, бутстрап не использует ID,значит все ваши новые стили однозначно получат высший приоритет. И т.д.

<style>
  #unik_2021_id_ya_super_proger{}
  #unik_2021_id_ya_super_proger input[type=text]{}
  #unik_2021_id_ya_super_proger button{}
</style>
<form id="unik_2021_id_ya_super_proger">
   <input type="text" name="blabla">
   <input type="text" name="gogogo">
   <button type="submit">Отправь меня, о боже!!!</button>
</form>  

UPD: Бывает, что стили прямо в атрибутах элемента, тогда придется лепить еще и !important

→ Ссылка