Изолировать стиль введенного содержимого от CSS страницы

Question

У меня есть плагин JavaScript, который добавляет код HTML и CSS в веб-страницы.Некоторая часть внедренного кода взята из стороннего пакета, который я не могу изменять.

Учитывая, что стилизация на странице хоста непредсказуема (поскольку я не могу предсказать, на каких сайтах пользователь будет запускать плагин)Как я могу спроектировать внедренный код (HTML + CSS), чтобы быть непроницаемым для внешнего стиля и использовать только стиль, включенный в плагин.

Например, если на главной странице есть стиль для элементов DIV, я хотел бы убедиться, что этот стиль не применяется ни к одному из DIV в введенном коде

Answer 1

Вы должны будете придерживаться четкого соглашения о присвоении имен правилам CSS, которое было бы непроницаемым для коллизий имен - во многом так же, как это делают CSS-фреймворки, такие как Bootstrap, Grid или Foundation.

Есть несколько хороших моделей, которые выможно использовать, чтобы наметить соглашение, которое работает лучше всего для вашего мозга.Например, модель модификатора блочного элемента (BEM):

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

Например

.stick-man {}

.stick-man__head {}
.stick-man__head--small {}
.stick-man__head--big {}

.stick-man__arms {}
.stick-man__feet {}

.stick-man--blue {}
.stick-man--red {}

Другие идеи, связанные с этим:

• SMACSS - Масштабируемыйи модульная архитектура для CSS (SMACSS)
• Объектно-ориентированный CSS (OOCSS)
• Атомарный CSS (ACSS)

Answer 2

Если я правильно понимаю, есть два подхода:

1. Использование динамического класса CSS.Вы можете использовать некоторые инструменты комплекта, такие как grunt, gulp, .., чтобы сгенерировать динамический класс css при создании релиза для производства.

В режиме разработки:

<div class="box"></div>
css:
box{
  .red{}
}

Вкл.производственный режим:

<div class="d2fdcdf_dfdafdaf"></div>
css:
.d2fdcdf_dfdafdaf{
  .red{}
}

Использование встроенного стиля или важно!директива