Namespacing/Scoping in CSS

Question

I want to apply the rules in a CSS file to a certain div/class so, for example, the contents of events.css is only applied to the contents of a class called .events and not outside this scope without the need to add the class .events to the start of each css rule.

I am thinking this is not possible though - but you never know.

If not I am thinking of achieving the same effect by prefixing the .events to the CSS rules after they have been uploaded/edited. I am thinking this should be fairly trouble-free, but does anyone forsee any problems?

Answer 1

I am thinking this is not possible though

Indeed. Unless you put the content in question in an iframe. Then you get a whole separate document to style differently.

I am thinking of achieving the same effect by prefixing the .events to the CSS rules after they have been uploaded/edited. I am thinking this should be fairly trouble-free, but does anyone forsee any problems?

In an automated fashion? You would need to be able to parse the CSS input to determine where the beginnings of the selectors were.

This is not as trivial as you might think to do correctly:

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

is an example of tricky-to-parse CSS. .eggs, .bacon and .potato begin selectors and would want a .events prefix. .sausage and .beans are not.

Answer 2

If not I am thinking of achieving the same effect by prefixing the .events to the CSS rules after they have been uploaded/edited. I am thinking this should be fairly trouble-free, but does anyone forsee any problems?

That's the only way to do it and should be fine.