Пространство имен / Scoping в CSS

Question

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

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

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

Answer 1

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

Действительно. Если вы не поместите рассматриваемый контент в 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 нет.

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

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