Conditional CSS
CSS is a lovely thing, but it can get out of your hands very quickly (especially if you are programmer first and HTML code-monkey second). I often find myself having some element that appears on various sub-pages of a page, comments for example. HTML is stored in a template file and included where needed and styles, that make the comments pretty, are usually in the main CSS file. No problem with this approach if comments are exactly the same on whichever sub-page they resist. But what happens when they have to be 200px wide on the user’s profile page and 300px somewhere else? You make another CSS file where you override the width and include it on the page.
The problem with this is that you often end up with several CSS files containing a few lines, which increases the number of requests and page load time. But the biggest problem with this is maintainability. All of a sudden you have styles for the same thing in several different files and guess how long that takes to get out of sync.
So I was thinking how one would go about solving this, and I came up with this: what if you ware able to define a certain style only if some condition would be true. CSS if statements! I’m not proposing a juggernaut here, just something along this lines (haven’t really thought about the syntax):
#CommentsContainer {
width: 100px;
background-color: silver;
}
[URL=/some/path/(.*)/([0-9]+)]
#CommentsContainer {
width: 200px;
}
[/URL]
[URL=/some/other/path/([0-9]+)]
#CommentsContainer {
width: 300px;
}
[/URL]
So depending on the URL some of the styles would be defined and some would be not (you could have URL!= for instance and some basic Boolean operators such as AND and OR). You would define the URL with regular expressions (as you have probably guessed).
With this approach you could have all the styles for some page element (comments are just an example I’m struggling with at the moment) defined in one place, which greatly improves maintainability, and you would reduce page load time, which matters the most at the end of the day.

I just thought of this and haven’t asked google if somebody has already written about this, so don’t hold it against me if I say that this is my idea.
Comments
Comment from Jan Hančič
Time September 24, 2009 at 8:03 am
I know. I can achieve all this (and all the other stuff that would be nice to have in CSS), but I think it would be nice to have this in CSS itself.
Comment from Mitja
Time September 24, 2009 at 8:50 am
http://disruptive-innovations.com/zoo/cssvariables/ – currently only a proposal
Comment from Jan Hančič
Time September 24, 2009 at 10:32 am
Yes this is also something I’d love to see in CSS. Hope they approve it.
Comment from Mitja
Time September 24, 2009 at 7:55 am
You can use any template engine to “generate” css dynamically (Dwoo, Smarty),
and maybe also combine all css files into one (templates includes), so there is only one http-request made.