@LionG

Как изолировать или обнулить встраиваемое приложение от внешних стилей?

К примеру пишу я "калькулятор" на Vue... сверстал используя scoped опцию, скомпилил и получил js и css.
<style lang="scss" scoped>
    #calc {
        .какой_то_элемент {
            color: red;
        }
    }
</style>


С моей стороны все идеально и калькулятор не конфликтен (или нет ?), но нужно добавить этот калькулятор на сайт где в глобальных стилях под этот же класс (возможно не сейчас, а в будущем) прописаны другие свойства и верстка поедет (к примеру если это калькулятор на wordpress где можно менять темы и у каждой темы свои глобальные классы).

//...где то в глобальных стилях
        .какой_то_элемент { //с совершенно другим замыслом
            position: fixed;
            width: 20px;
            height: 20px;
            top: 4px:
            right: 4px;
        }


В целом проблема с названием одинаковых классов и по идее добавление префиксов должно решить ее (возможно существует какой то плагин под webpack для этого или другое решение).
  • Вопрос задан
  • 577 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Spaceoddity
Изолированные стили работают только в вашем проекте. И изолируют стили для отдельных компонентов - чтобы они не пересекались со стилями другого компонента. Например, в вашем проекте используются два калькулятора: простой и инженерный. Вот чтобы стили калькуляторов не пересекались - их изолируют. На самом деле это так себе практика. Всё это легко решается применением уникальных классов.
Ну и, конечно, если вы интегрируете свой проект в какой-то другой - никто не гарантирует что какие-то более специфичные стили целевого проекта не перепишут ваши. Так что уникальные префиксы для классов - вполне себе вариант.
Ответ написан
Комментировать
bingo347
@bingo347
Crazy on performance...
Встраиваемое приложение должно быть в iframe, только так на сегодня можно 100% изолировать и стили и скрипты.
Элементарно будет на сайте банальное
div {
  color: red !important;
}
и Ваше приложение уже будет выглядеть не так.
Ну а еще встречается js с манкипатчингом.
А iframe вполне хорошо Вас защитит и от того и от другого
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Для данного кейса стоит обратить внимание на БЭМ-методологию:
1. https://ru.bem.info/ — чтобы понять;
2. https://i-am.studio/bem — если не очень догнал.

Если проект твой — ты в состоянии написать стили в духе закрытого функционального программирования, и в Vue пригодится. Если проект не твой... Чтож...

Если проект не твой, то ты можешь ловить набор параметров (скажем находить на странице элементы с наборами data-атрибутов) или через определенный класс (заставляя пользователя его указывать, чтобы просто работало) и заводить ему через JS стили, ну или просто стили. В конечном счете в документации просто указать, что ай-яй, не будь дебилом, не пиши фигни, иначе работать не будет (впрочем это и так очевидно, т.к. если не будет работать, то скорее всего пиплянин сам дойдет или нагуглит, в чем проблем конфликта).
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы