Пространство имен/область действия в CSS

StackOverflow https://stackoverflow.com/questions/1432306

  •  07-07-2019
  •  | 
  •  

Вопрос

Я хочу применить правила в файле CSS к определенному div/классу, поэтому, например, содержимое event.css применяется только к содержимому класса с именем .events, а не за пределами этой области без необходимости добавления class .events в начало каждого правила CSS.

Я думаю, что это невозможно, но кто знает.

Если нет, я думаю о достижении того же эффекта, добавляя префикс .events к правилам CSS после их загрузки/редактирования.Я думаю, что это должно пройти без проблем, но предвидит ли кто-нибудь какие-либо проблемы?

Это было полезно?

Решение

Хотя я думаю, что это невозможно

Действительно.Если только вы не поместите рассматриваемый контент в iframe.Тогда вы получите целый отдельный документ с другим стилем.

Я подумываю о достижении того же эффекта, добавляя префикс .events к правилам CSS после их загрузки/редактирования.Я думаю, что это должно пройти без проблем, но предвидит ли кто-нибудь какие-либо проблемы?

В автоматическом режиме?Вам нужно будет иметь возможность анализировать входные данные CSS, чтобы определить, где находятся начала селекторов.

Это не так тривиально, как вы могли бы подумать:

/* This is my grate CSS
.sausage { color: red; } adds a class rule
/*/ .eggs, .bacon { color: red; }
.potato:before { content: "; }
.beans { content: "; }

является примером сложного для анализа CSS. .eggs, .bacon и .potato начать селекторы и хотел бы .events префикс. .sausage и .beans не.

Другие советы

  

Если нет, я думаю о достижении   тот же эффект, добавив префикс .events   к правилам CSS после того, как они были   закачанный / под ред. Я думаю это   должно быть довольно без проблем, но   кто-нибудь предвидит какие-либо проблемы?

Это единственный способ сделать это и должно быть в порядке.

С точки зрения обслуживания безопаснее просто включить «.event» в правила CSS.Через несколько месяцев вы, возможно, забыли трюки, которые использовали здесь, чтобы сэкономить немного времени на наборе текста.

Короче говоря, единственный способ - добавить каждое правило к .events .

Но я бы не стал делать это автоматически, потому что легко ошибиться, например, добавить .events в правило вручную, что удвоило бы его. А если вы хотите поделиться несколькими стилями на разных страницах, например .events.special и .aboutus.special , вам нужно поместить их в другое место.

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

Я бы добавил класс .events к селекторам. Существует риск человеческой ошибки, делающей это вручную. Вот способ частичной автоматизации процесса добавления селектора во все классы CSS .

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top