As I work on developing a web application that can be embedded on external websites, one of the challenges I am facing involves constructing dialogues with their own unique stylesheets. This could potentially lead to conflicts if both my dialogue container and the host website's content share the same class name such as .container.
I have considered changing all my classes to something like
.appname-container</code, but I prefer to find a simpler solution before taking that step. Is there an easier way to avoid unexpected clashes with stylesheets from external sources over which I have no control?</p>
<p><strong>Edit</strong>: Since my web app wraps around a <code><video><iframe>s may not be a feasible option.