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

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.

Answer 2

It is safer from a maintenance standpoint to simply include ".event" in your CSS rules. Several months down the road, you may have forgotten the tricks you played here to save a little bit of typing.

Answer 3

In short, the only way is to prefix each rule with .events.

But I would steer away from doing that automatically, because it's easy to make mistakes, like adding .events to a rule manually, which would double it up. And if you wanted to share some styles across pages, like .events.special and .aboutus.special then you'd need to put them somewhere else.

It's generally better to use one stylesheet instead of one per section, so the user will have it cached when they go to subsequent pages. (You can minify and gzip it in the production environment to reduce initial download time.)

Answer 4

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.