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

Всем привет!
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)?
Спасибо!
  • Вопрос задан
  • 269 просмотров
Пригласить эксперта
Ответы на вопрос 5
@MamaLuyba
Ну, без изменение стилей вряд ли выйдет. А так - задать отдельный класс, в который завернуть нужные стили, и присваивать этот класс нужным элементам.
А так - да, чревато на шару кучу всяких стилей добавлять в проект - потом задолбаешься important-ы ставить.
Ответ написан
copyhold
@copyhold
Как я понимаю, сделать вебкомпонент в котором будет и текст статьи и ссылка на стиль не вариант?
Тогда я бы загружал внешний стиль жаваскриптом, и после получения кода стиля заворачивал бы его в какой нибудь препроцесор (LESS) добавив предварительно дополнительный класс . Ну и можно вставлять в страницу.
Ответ написан
OtshelnikFm
@OtshelnikFm
Мои работы: otshelnik-fm.ru
Любой адекватный разраб знает что для имен классов надо добавлять префикс. Тогда влияние стороннего сведется к минимуму.
Так все под вордпресс разрабатывают.
И еще в стилизации используй только классы а не теги. т.е. item > span или article > img - это говнецо. И так никто не пишет. Пишут примерно так: otfm-article или если пикча: otfm-avatar
Да - чуток больше придется писать. Но не делай как элементор: elementor-wrapper, elementor-item - это не префиксы, а спам и реклама. И готовая страница получается тяжеловесная. хз что эти разрабы не сделали префикс покроче. Возьми раздербань любой сайт на элементоре и увидишь ад

Ну и используй BEM чтобы кучу вложенных селекторов не писать
Ответ написан
@mesaga1983
CSS - my love
А вы не пробовали вставлять блок в сторонними стилями выше своих файлов стилей. Тогда хоть не так корежить будет. Другого варианта наверное нет без перелопачивания стилевых файлов, потому как у вас в примере действует принцип каскадности - основа css, от него никуда не уйти.
Ответ написан
yarkov
@yarkov
Проект "Жизнь после смерти" - lifeafterdeath.ru
<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.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы