Динамические стили в области видимости

Question

У меня есть сайт, который предназначен для объединения со скинами сторонних производителей, определяющими заголовки, навигацию и т. Д. На моем сайте есть таблицы стилей, а у третьей стороны - таблицы стилей.Я объединяю эти два и, как и ожидалось, получаю большой гигантский беспорядок.

Что я хотел бы сделать, так это сказать: «Применить этот набор таблиц стилей к этой части страницы, а эти другие к этой».Я не хочу использовать фреймы для этого.

Очевидным решением является префикс всех моих собственных стилей с идентификатором контейнера.Поскольку это большой сайт с сотнями стилей, это было бы очень сложно делать и поддерживать.

На самом деле, я хочу сделать что-то подобное динамически.

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

Кто-нибудь может придумать лучший вариант?Какой-нибудь плагин jquery с надписью $ (). Apply_styles_from_file ();

Или какое-то решение по макету, которое решает проблему смешивания листов?

Или хорошие библиотеки, которым можно доверять для анализа и изменениятаблицы стилей на месте?

Answer 1

После моих исследований я решил, что не существует элегантного способа решить эту проблему. В конечном итоге я использовал серверное решение, чтобы переписать весь набор таблиц стилей, который у меня есть, и добавить класс к каждому определению:

   A{} becomes .myclass A{}
   .foo becomes .myclass foo{}
   #thispage .bar becomes .myclass #thispage .bar{}

Я сделал это через обработчик, который ищет файл, а затем, если он не найден или изменен с момента последней компиляции, переписывает его. Я использовал модуль perl CSS :: Simple, чтобы переписать.

Затем я обернул основной контент в классе:

   <!-- header here -->
   <div class="myclass">
     <!-- content here -->
   </div>
   <!-- footer here -->

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

Это ужасно и неуклюже. :-( В будущих версиях CSS должен быть какой-то контекст. Но он выполняет свою работу.

Answer 2

Как то так?

#green-bg 
{
    background-color: green;
}

#red-bg 
{
    background-color: red;
}

<div id="red" class="color-selector">Apply Red Background</div>
<div id="green" class="color-selector">Apply Green Background</div>

<div id="content">I need a background color!</div>

$('.color-selector').click(function() {
    $('#content').addClass('#' + this.id + '-bg');        
});

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

Ex. Если у вас есть две таблицы стилей, каждая из которых имеет объявление h1, ваши элементы h1 будут оформлены в соответствии с тем, какой из них выиграет столкновение. Единственный способ провести различие заключается в том, чтобы каждая таблица стилей имела соответствующие имена (например, h1.light, h1.dark), и вы применяете их так, как я описал выше.

Answer 3

А что, если user_made css получит! Важные-правила?

Только для этого:

пользователь настраивает разрешенную область и применяет ее к своей странице - сзадиcss-файл будет создан с! важным-правилами для измененных областей.

Должен работать, но вы должны отрицать любой css-хак, который вы не хотите иметь.(как прежний myspace;))

С уважением

Answer 4

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

Поэтому я бы просто избегал решения на основе JS и вместо этого выбрал бы язык на стороне сервера, такой как PHP, который позволял бы вам устанавливать области действия для отдельных представлений, а затем отображал бы представления отдельно, например:

     <div id="main">
         <? render('view' => 'users.php', 'scope' => 'users'); ?>
         <? render('view' => 'games.php', 'scope' => 'games'); ?>
     </div>

Метод render может затем обернуть представление в div и убедиться, что у него есть контейнер с указанной областью действия. В зависимости от того, как выглядит представление, вывод может выглядеть примерно так:

     <div id="main">
         <div class="users">Users go here.</div>
         <div class="games">Games go here</div>
     </div>

Затем, если вы решите добавить еще один раздел с играми, вы можете просто повторно объявить область действия в новом отрендеренном фрагменте, и он будет иметь ту же область видимости CSS, что и предыдущий.

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

Думаю, это один из способов справиться с этим, и это лучшее, что я могу придумать на месте.

Удачи, и если вы найдете лучшее решение, я хотел бы услышать это!