Как ограничить область влияния внешнего CSS файла

[SaOP]

Привет.

Нужна помощь в решении вопроса.

Есть масса "графических" Web-редакторов. Которые позволяют как быстро состряпать статью, так и целые сайты. Например Nicepage. Мне он нравится, много заготовок верстки.

Суть проблемы, которая касается не только упомянутого Nicepage, это файлы стилей, огромные файлы стилей (31 300 строк). Когда подключаешь их к CMS:

<link rel="stylesheet" href="https://тыры-пыры/test123456789.css" media="screen">  

они тупо ломают глобальные стили опенкарта.

Как изолировать область влияния внешнего файла стилей?

 

Css файл с разными классами, стилями, нужно применить только для выбранного div или section или любого другого кастомного элемента так, что бы эти стили и классы(которые находятся в файле css) не распространялись на весь остальной код всей страницы(не влияли на глобальные стили CMS).

Айфрейм не хочу.

[GetWeb]

Разве что Shadow DOM

 

 

[SaOP]

8 минут назад, GetWeb сказал:

Разве что Shadow DOM

 

Спасибо. Пользоваться экспериментальными функциями типа 

 

<template shadowroot="open">

которые не работают, пока вручную не включишь их в браузере - нет желания.

 

Не могу разобраться как пользоваться Shadow DOM(обычная версия, не экспериментальная) в случае, когда у меня внешний css со стандартными классами и стилями, лишёнными 

:host

Подскажите как это сделать?

[GetWeb]

3 минуты назад, SaOP сказал:

Спасибо. Пользоваться экспериментальными функциями типа 

 

<template shadowroot="open">

которые не работают, пока вручную не включишь их в браузере - нет желания.

 

Не могу разобраться как пользоваться Shadow DOM(обычная версия, не экспериментальная) в случае, когда у меня внешний css со стандартными классами и стилями, лишёнными 

:host

Подскажите как это сделать?

Там вначале видео, как раз рассказывается и показывается стандартный подход с подключение стилей через js, а потом уже новый.

Змінено 7 лютого 2021 користувачем GetWeb

[SaOP]

7 минут назад, GetWeb сказал:

Там вначале видео, как раз рассказывается и показывается стандартный подход, а потом уже новый.

Там везде ":host" вначале класса или ::slotted. У меня файл стандартный СSS на 30 000 строк....

То о чем вы говорите, и что я не могу понять, в рамках того, как приспособить к своей задачи больше рассказывается здесь:

 

 

Змінено 7 лютого 2021 користувачем SaOP

[GetWeb]

8 минут назад, SaOP сказал:

Там везде ":host" вначале класса или ::slotted. У меня файл СSS на 30 000 строк....

Там подключается единый файл css через JS:

А в slotted он просто передает стили для отдельного шаблона.

10 минут назад, SaOP сказал:

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

Я просто подсказал куда копать, любая инструкция подойдет.

[SaOP]

6 минут назад, GetWeb сказал:

Там подключается единый файл css через JS:

А в slotted он просто передает стили для отдельного шаблона.

Я просто подсказал куда копать, любая инструкция подойдет.

Спасибо за ответ.

Если вы откроете, и посмотрите на то, что содержится внутри этих  его CSS файлов (https://github.com/pepelsbey/playground/blob/master/11/slide/slide.css ), вы опять увидите host вначале класса или slotted. Мне нужно избежать правки моего гигантского файла css. т.е. нужно как-то в slotted засунуть целый файл стандартных стилей и гигантское количество классов. Или я что-то не понимаю

Змінено 7 лютого 2021 користувачем SaOP

[GetWeb]

Цитата

Или я что-то не понимаю

Все правильно поняли, но других вариантов инкапсуляции я не знаю. shadowroot="open" крутая фича, но пока что годится только в работе для себя, в админку например прикрутить.

Змінено 7 лютого 2021 користувачем GetWeb

[SooR]

2 часа назад, SaOP сказал:

Суть проблемы, которая касается не только упомянутого Nicepage, это файлы стилей, огромные файлы стилей (31 300 строк). Когда подключаешь их к CMS:

А данный редактор не позволяет указать префикс классов? 

Тени использовать я бы не советовал, непонятно как они влияют на SEO, думаю так же, как и фреймы.

Лучше всего пересобрать подключаемые стили

[esculapra]

3 часа назад, SaOP сказал:

нужно применить только для выбранного div или section или любого другого кастомного элемента

Вот счас сделал заготовку - потом будем стилизовать (мне просто заказаи сделать нечто подобное) - инлайн стили обладают приоритетом (отменяют глобальне слили в пределах узла).

<div class="row">
<div class="col-sm-10" style="margin-left: 12%;margin-top: 40px;">
<?php $i=1; foreach ($home_categories as $category){?>
<div class="col-md-3">
<div style="margin-left: <?php if ($i==1){echo '-23';}
elseif($i==2){
echo '-13';
}
elseif($i==3){
echo '10';
}
elseif($i==4){
echo '14';
}
?>px"><?php echo $category['name']?></div>
<div style="width:220px/**/;height:140px;border-radius:50%;cursor:pointer;background:yellow;margin-top: -80px;margin-left: -40px;" onClick="window.location.href='index.php?route=product/category&path=<?php echo $category['category_id']?>';">

</div>
    </div>
<?$i++;}?>
<br/><br/>
</div>

 

[SaOP]

11 часов назад, esculapra сказал:

Вот счас сделал заготовку - потом будем стилизовать (мне просто заказаи сделать нечто подобное) - инлайн стили обладают приоритетом (отменяют глобальне слили в пределах узла).

<div class="row">
<div class="col-sm-10" style="margin-left: 12%;margin-top: 40px;">
<?php $i=1; foreach ($home_categories as $category){?>
<div class="col-md-3">
<div style="margin-left: <?php if ($i==1){echo '-23';}
elseif($i==2){
echo '-13';
}
elseif($i==3){
echo '10';
}
elseif($i==4){
echo '14';
}
?>px"><?php echo $category['name']?></div>
<div style="width:220px/**/;height:140px;border-radius:50%;cursor:pointer;background:yellow;margin-top: -80px;margin-left: -40px;" onClick="window.location.href='index.php?route=product/category&path=<?php echo $category['category_id']?>';">

</div>
    </div>
<?$i++;}?>
<br/><br/>
</div>

 

Спасибо.

А как сюда в код добавить внешний CSS файл стилей(классов) так, что бы он не влиял на внешнею от div среду? Я в php вообще "0"

Змінено 8 лютого 2021 користувачем SaOP

[SaOP]

12 часов назад, SooR сказал:

А данный редактор не позволяет указать префикс классов? 

Тени использовать я бы не советовал, непонятно как они влияют на SEO, думаю так же, как и фреймы.

Лучше всего пересобрать подключаемые стили

Да я бы с радостью пересобрал. Но классов в статье гора, и чем сложнее "дизайн" - тем они один над одним лепятся, а CSS файл состоит из более чем 30ти тыс. строк(не преувеличение). Программа Nicepage "слишком автоматическая", но удобная, что бы быстро состряпать статью(и не одну) и оформить - не позволяет редактировать её исходный файл стилей(префиксы) + очень много готовых шаблонов, код хоть и не короткий, но аккуратный. Если есть другая удобная программа для web-дизайна, с минимальным проникновением в знания стилей, и что бы её файлы имели "эксклюзивные" классы - напишите пожалуйста.

Змінено 8 лютого 2021 користувачем SaOP

[esculapra]

7 часов назад, SaOP сказал:

А как сюда в код добавить внешний CSS файл стилей(классов) так, что бы он не влиял на внешнею от div среду

Внешние стили подключаются как обычно, просто если требуется изменение. то инлайн-стии внедряются непосредственно в узел. поэтому они вияют только на этот узел.

Можно стии организовать в классы, которые добавлять к элементу, например, <div class="col-sm-10 custom-class">

[SaOP]

28 минут назад, esculapra сказал:

Внешние стили подключаются как обычно, просто если требуется изменение. то инлайн-стии внедряются непосредственно в узел. поэтому они вияют только на этот узел.

Можно стии организовать в классы, которые добавлять к элементу, например, <div class="col-sm-10 custom-class">

Проблема в том, что у меня СSS файл состоит из тысяч классов, и 30 000 строк - я всё это не могу поместить в один узел div. Нужно подгружать css файл и ограничить влияние его внутренних классов(стилей) в одной области, в рамках одного контейнера(и всем его содержимым).

[esculapra]

3 часа назад, SaOP сказал:

Проблема в том, что у меня СSS файл состоит из тысяч классов

И не нужно. Просто в секции header, или перед закрывающим body прописать кастомне классы

<style>

.custom-class{

тут стили задаются. например margin:0 !important;

}

</style>

В тебуемый узел добавляется новый класс

<div class="дефолтный класс кастомный класс">.- теперь узел будет работать  с новыми стилями

[SaOP]

28 минут назад, esculapra сказал:

И не нужно. Просто в секции header, или перед закрывающим body прописать кастомне классы

<style>

.custom-class{

тут стили задаются. например margin:0 !important;

}

</style>

В тебуемый узел добавляется новый класс

<div class="дефолтный класс кастомный класс">.- теперь узел будет работать  с новыми стилями

 

Это лишняя работа, ручками начинать перебирать стили в файле, который состоит из... строк:

Спойлер

 

Мне нужна автоматизация - некогда перебирать классы сторонней программы, вылавливая их из сверх перенасыщенного файла стилей.

 

+ страница CMS статей генерируется автоматически, т.е. то что я задам в .twig в "перед закрывающим body" разнесётся на десятки иных статей - этого не нужно.

"Нужно подгружать css файл и ограничить влияние его внутренних классов(стилей) в одной области, в рамках одного контейнера(и всем его содержимым)."

[esculapra]

4 минуты назад, SaOP сказал:

разнесётся на десятки иных статей

не разнесется! стили будут работать только в тех узлах. в которых добавлен кастомный класс. И ничего не нужно перебирать - открываешь исходный код статьи в редакторе и добавляешь кастомный класс где необходим.

[SaOP]

14 минут назад, esculapra сказал:

не разнесется! стили будут работать только в тех узлах. в которых добавлен кастомный класс. И ничего не нужно перебирать - открываешь исходный код статьи в редакторе и добавляешь кастомный класс где необходим.

В каждой статье из под Nicepage могут быть десятки(а то и сотня) классов, непонятно как программа их формирует и как называет. Таких статей написанных на Nicepage будет десятки. т.е. десятки статей, внутри которых могут быть абсолютно разные имена сотни классов.

Речь идёт о том, что бы ничего вообще не править руками и не задавать(менять). Nicepage и используется, по причине того, что быстро позволяет моделировать внешний вид, не задумываясь о том, какой там нужен тег, класс.

В каждой статье Nicepage свой файл css, подгрузили его в опенкартовскую штаную статью, ограничили поле влияния css файла. Такая вот идея. А руками начинать кастомность переписывать для каждой статьи Nicepage - это не та производительность уже будет.

Змінено 8 лютого 2021 користувачем SaOP

[esculapra]

13 часов назад, SaOP сказал:

Речь идёт о том, что бы ничего вообще не править руками и не задавать(менять). Nicepage и используется, по причине того, что быстро позволяет моделировать внешний вид, не задумываясь о том, какой там нужен тег, класс.

В каждой статье Nicepage свой файл css, подгрузили его в опенкартовскую штаную статью, ограничили поле влияния css файла. Такая вот идея.

Эту идею реализовать практически невозможно. Единственный вариант - сделать десктопную прогу. которая просканирует css от Nicepage и статью. чтобы изменить имена классов, например. добавить префикс nicepage-. В таком случае стили статьи не повлияют на глобальные. Иначе никак.

[SooR]

По-моему проще добавить префиксы для bootstrap, то есть убрать конфликты на стороне магазина

[SaOP]

16 минут назад, esculapra сказал:

Эту идею реализовать практически невозможно. Единственный вариант - сделать десктопную прогу. которая просканирует css от Nicepage и статью. чтобы изменить имена классов, например. добавить префикс nicepage-. В таком случае стили статьи не повлияют на глобальные. Иначе никак.

А если через LESS ?

Загрузить внешний стиль жаваскриптом, и после получения кода стиля завернуть его в какой ни будь препроцесор (LESS) добавив предварительно дополнительный класс. Так не? 

[SaOP]

25 минут назад, SooR сказал:

По-моему проще добавить префиксы для bootstrap, то есть убрать конфликты на стороне магазина

Я заметил, что в этом файле CSS от Nicepage присутствуют классы типа h2, h1, div и т.д. Т.е. нужно каждый раз перелопачивать их файл, что бы убрать общие классы первого уровня  И причем, некоторые классы сидят где-то в середине файла на 30 000 строк.

Змінено 9 лютого 2021 користувачем SaOP

[SooR]

25 минут назад, SaOP сказал:

Я заметил, что в этом файле CSS от Nicepage присутствуют классы типа h2, h1, div и т.д. Т.е. нужно каждый раз перелопачивать их файл, что бы убрать общие классы первого уровня  И причем, некоторые классы сидят где-то в середине файла на 30 000 строк.

Поэтому, чтобы не перелопачивать их классы, измените свои, магазинные

[esculapra]

3 часа назад, SooR сказал:

Поэтому, чтобы не перелопачивать их классы, измените свои, магазинные

Это очень трудоемко - придется перекраиватьтакже и  шаблоны. Вижу вариант получения статьи через аякс. Если передать материал вместе с новым css...впрочем может и не сработать. Или загружать в фрейм как новый html-документ. Хотя фрейм может не индексироваться поисковиками. легкого решения пока не вижу.

[SaOP]

16 часов назад, esculapra сказал:

Это очень трудоемко - придется перекраиватьтакже и  шаблоны. Вижу вариант получения статьи через аякс. Если передать материал вместе с новым css...впрочем может и не сработать. Или загружать в фрейм как новый html-документ. Хотя фрейм может не индексироваться поисковиками. легкого решения пока не вижу.

Задача статей - читаемость их публикой, если будет плохо индексироваться - в них не будет смысла.