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

Question

[OlegS86]

Всем привет!
CMS, есть в CMS статьи(штатные шаблонные пустые) в которые интегрируется HTML(пишется ручками или копируется из вне). Есть статьи(реальные) с внешними CSS файлами. Подключая файлы стандартным образом:

<link rel="stylesheet" href="test123456789.css" media="screen">

они начинают ломать и штатные стили CMS, ибо конфликтуют.
Файлы CSS и статьи большие, варианта пересмотреть все классы и переназначить нет. <iframe> тоже нет желания использовать вообще.
Пробовал что-то типа:

<div>
    <style scoped>
        @import "scoped.css";
    </style>
    enter code here
</div>

но потом вычитал, что scoped не поддерживается больше браузерами.
Пробовал:
<template shadowroot="open">...
(https://github.com/pepelsbey/playground/tree/master/38) - команда "shadowroot="open" почему-то больше не проявляет объект, видимо тоже потеряла актуальность и поддержку.
Вопрос насущный у многих - как ограничить область влияния внешнего файла CSS на блоки так, что бы стили распространялись только на отдельные участки(например div)?
Спасибо!

Answer 1

[Алексей Ярков]

<template shadowroot="open">
По-моему это вообще только под флагом работает.
100% вариант (сам вчера писал виджет, который встраиваться должен на любой сайт) это кастомный элемент:

customElements.define('tag-name', class extends HTMLElement {
        constructor() {
          super();
          this.attachShadow({ mode: 'open' }).appendChild(rootElement);
        }
      }
    );

И в разметке пишем так:

<tag-name>
    <link rel="stylesheet" href="путь/к/стилям/этого/элемента.css">
    <div class="container">Тут контент</div>
</tag-name>

Ну и сами стили:

:host .container {
    color: red;
}

Если всё правильно сделано, то стили извне не влияют на разметку тега tag-name.

Comments

[OlegS86]

Спасибо большое за ответ!

Подскажите пожалуйста, как модифицировать этот участок:

:host .container {
    color: red;
}

так, что бы не переписывать каждый класс, начиная индивидуально каждый с :host . Т.е. у меня внешней css файл этой кроссплатформенной программы состоит из сотен классов, и более чем 30 000 строк.
Спасибо.

[Алексей Ярков]

OlegS86, препроцессоры используйте

[OlegS86]

Алексей Ярков, т.е. LESS должен автоматом сам добавлять к каждому классу :host ?

[Алексей Ярков]

OlegS86, ну как настроите - так и будет ))

Answer 2

[MamaLuyba]

Ну, без изменение стилей вряд ли выйдет. А так - задать отдельный класс, в который завернуть нужные стили, и присваивать этот класс нужным элементам.
А так - да, чревато на шару кучу всяких стилей добавлять в проект - потом задолбаешься important-ы ставить.

Comments

[OlegS86]

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

[MamaLuyba]

OlegS86, тогда хотелось бы описание поподробнее. Т.е. например, в штатном стиле задано для div background: red, а во внешнем стиле - background: blue. И надо, чтобы что?
Если нет жесткого фильтра (div.blue-bg, например), то срабатывать всегда будет стиль, который стоит ниже, т.е. - внешний.

[OlegS86]

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

Answer 3

[copyhold]

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

Comments

[OlegS86]

Спасибо за ответ. Подскажите пожалуйста, как это сделать на программном уровне кода, как загрузить внешний css джавой, завернуть его в LESS добавив класс?
Я не разбираюсь в скриптах и тем более в препроцесорах (LESS) :-(

[copyhold]

Боюсь "подсказать" в данном случае не подходящее слово.
Алгоритм примерно такой:

// подключить к коду страницы скрипт препроцессора
fetch('URL-TO-extenal.ss')
.then(res => res.text())
.then(csscode => {
const articleid = 'whatever-random-id'
const lesscode = `#${articleid} { ${csscode} }`
Less.add_style_from_string(lesscode)
ArticleDOMElement.id = articleid
})
.catch(console.error)

[OlegS86]

copyhold, Спасибо.
К сожалению этот фрагмент кода не решает всей проблемы. Либо нужно описание(в какую строчку что добавить).
Сказать, что проблема специфическая сложно, я думаю многие сталкиваются с таким явлением.

[copyhold]

ну извини.. это максимум что ты можешь получить бесплатно. :)

[OlegS86]

copyhold, И сколько стоит описание? Какая ваша цена?
Сколько стоит выложить здесь, публично, для всех описание с появлением?

[copyhold]

OlegS86, дай пример страницы , а там поглядим.

[OlegS86]

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

[copyhold]

никакой фантастики - просто не интересно.
Решение есть, довести его до ума займет полчаса-час. Я не хочу тратить это время зря.

[OlegS86]

copyhold, Думаю вы больше на пустую полемику потратили время, пытаясь найти денег.

[copyhold]

нет,друг это ты пытаешься решить свою проблему на халяву не прилагая особых усилий.

[OlegS86]

copyhold, Вас не просили отвечать? Здесь форум для тех, кто нуждается в подсказках и помощи, публичный форум, с публичным открытым для поисковиков текстом и решенными задачами, локальными конкретными задачами, решения которые помогают многим находить свои ответы.
Нужны деньги - устройтесь на работу, друг.
п.с Никто не просит писать специфические модули бесплатно.

Answer 4

[Вова Дружаев]

Любой адекватный разраб знает что для имен классов надо добавлять префикс. Тогда влияние стороннего сведется к минимуму.
Так все под вордпресс разрабатывают.
И еще в стилизации используй только классы а не теги. т.е. item > span или article > img - это говнецо. И так никто не пишет. Пишут примерно так: otfm-article или если пикча: otfm-avatar
Да - чуток больше придется писать. Но не делай как элементор: elementor-wrapper, elementor-item - это не префиксы, а спам и реклама. И готовая страница получается тяжеловесная. хз что эти разрабы не сделали префикс покроче. Возьми раздербань любой сайт на элементоре и увидишь ад

Ну и используй BEM чтобы кучу вложенных селекторов не писать

Comments

[OlegS86]

Спасибо за ответ.
Видимо нужно уточнить. Внешние статьи собираются на кроссплатформенной программе, которая НЕ даёт возможности править классы, префиксы. Но, это внешняя прога позволяет быстро собрать страничку-статью, а статей будет много - поэтому мне проще что-то организовать в виде "изолятора" внешнего CSS файла. Классов, в конечном итоге, она организует ооочень много, поэтому каждый исследовать и переправлять - трудоемко.
Да и вопрос, в целом, актуальный же для многих, несмотря на разновидность CMS. Многим будет интересен сам принцип инкапсуляции классов-стилей внешнего СSS файла.

[Вова Дружаев]

OlegS86, Вот посмотри https://www.youtube.com/watch?v=ZjYKzrBEEuI

[OlegS86]

Владимир Дружаев, Там не на что смотреть - это экспериментальная функция. Я ведь писал выше "" ...

[Вова Дружаев]

OlegS86, кто как видит...

[OlegS86]

Владимир Дружаев, Все её видят +/- одинаково, как экспериментальную. Без специально включенного флага в браузере она не работает. Т.е. в популярном её использовании смысла 0. Я вижу это так. А вообще, классная функция, но нужно ждать.

Answer 5

[Irkov]

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