Как огранилить область влияния внешнего 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, а потом уже новый.

Edited February 7, 2021 by GetWeb

[SaOP]

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

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

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

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

 

 

Edited February 7, 2021 by 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 засунуть этолый файл синдартных стилей и гигантское когдачество классов. Или я что-то не понимаю

Edited February 7, 2021 by SaOP

[GetWeb]

Циии

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

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

Edited February 7, 2021 by 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"

Edited February 8, 2021 by SaOP

[SaOP]

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

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

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

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

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

Edited February 8, 2021 by 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 - это не и производительность уже бугдет.

Edited February 8, 2021 by 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 строк.

Edited February 9, 2021 by SaOP

[SooR]

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

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

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

[esculapra]

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

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

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

[SaOP]

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

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

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