Why isn't dynamic css more popular? - dynamic-css

Question

I normally work on more back-end stuff so I never really thought about it before, but yesterday I was working on a site for a friend and after some frustration it occurred to me that there's no reason html files are the only ones that can be dynamically generated server-side.
I see people talking about javascript solutions to work around limitations of CSS, but why can't the CSS be dynamically "hard-coded"?
I know I'm not the first to come up with it because after thinking of it I looked it up and there were several examples but not tons, and I'd never seen it mentioned here on StackOverflow either.
Are there downsides to this compared to say resizing elements with javascript before the page loads? Any other potential gotchas I should be aware of?
I'm doing it in Django, but the question pretty much framework/language agnostic.
Looking through questions in the dynamic-css tag here I found {less} for Ruby which looks pretty cool, but overall there isn't a lot of talk about css files generated server-side.
EDIT:
I think some people may be confused about the intent of what I mean by dynamic css. I don't mean that it changes based on user content or anything. This is an example I found of how to center an image:
img {   
position: absolute;   
top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}
That's all great but that means knowing the size of your image in the css. Furthermore it means a different entry for different sized images. If the height and width were variable and the size of the image was determined server-side then it becomes more generic and reusable.
I'm sure there's other examples of where that would be helpful, but not having worked with css too much, that's the first one that I had trouble with that worked nicely with dynamic css.
Furthermore if performance became a concern I'm sure it could be cached properly with a little bit of work.

Answer 1

I agree with what others have posted. HTML is generated server side because the content is dynamic and no one would go to facebook, google, youtube, or almost anywhere else if they always served the same html. Server-side generation lets you post and view content as it is contributed and improved by users.
CSS on the other hand, is rarely contributed by users, and if it is, they are called web-designers and just generate static themes or files and are paid by the site owner. There are some sites where this does happen, like csszengarden, but the files are still static. However, they key difference is that users don't feel like having their only contribution to a site be the position of elements on a page and different colors. One of the whole points of CSS is consistency. Heck, stackoverflow could change the css every time someone posted an answer, relocate all the buttons, and change the whole page to ltr instead of just serving different html. Saying this would be annoying would be the biggest understatement of the century.
However, I don't think that's what you were asking about. The big advantage of dynamic CSS is as you mentioned: you can dynamically hard-code it. dot-less-css has some great examples on its homepage. This lets you write CSS in a simpler intermediate form, with colors stored in variables instead of constantly repeated, nested rule, and others features to make coding easier. These are features which many coders would LOVE to have supported by all browsers, so some people answered the need and created their own frameworks to 'hack' it together. Kind of the many say JQuery is how javscript should have worked the whole time.
Are there downsides to this compared
to say resizing elements with
javascript before the page loads? Any
other potential gotchas I should be
aware of?
The biggest issue with dynamic resizing is that it's difficult and error prone. If you don't do it right it can be a pain in the arse for you and your viewers. If the cool dynamic factor is worth the substantial extra work for you, then go ahead and do it. How you choose to doesn't make a huge difference. Javascript is more tried and true, server-side dynamic CSS is another cool way of doing the same thing. It depends what you're confident with and how bold you are.

Answer 2

Are you looking for something like Sass? http://sass-lang.com/

Answer 3

CSS tends to be cached, so generating it on the fly would a) need caching of css turned off and b) generate plenty more server overhead.
I assume it's fairly common to generate the css link in html on the fly, according to which browser was calling, but still pointing to one of a selection of static css files.
Lastly, the real reason it isn't server generated is probably that it's usually written by a designer, not someone doing back-end code, it's just a question of roles.

Answer 4

I think it's quite a clever solution and though many will disagree, I hope that the future of css will look more like that. However, standards are really slow to change and though there are frameworks like less, they're not nearly prevalent enough.
In a sense, it is simpler to handle a lot of things with javascript. What I mean by this is that if you're already doing animations or other things with JS, you might as well do all your dynamic changes with it. Use a library like jQuery and it only gets better.

Answer 5

We've done a bit of CSS to support internationalisation. There are lots of small details in CSS that have to change according to the locale you're serving a page in: mostly background images (which we use a lot for navigation buttons, and therefore have text on) and widths of form labels (which have to be a lot bigger in German - although we should really use cleverer CSS to avoid having to size them explicitly). Rather than maintaining N different stylesheets, we have one, but dynamically fill in the variable bits from values stored in a database.