Create a modular UI framework that allows modules to import their own stylesheets. You hit this problem really quickly.

Perhaps, but if you're including 30+ stylesheets in a given page you're doing it wrong.

Every stylesheet is an extra (blocking) HTTP request. 5 is already too many, but 30 is seriously impacting your user's experience.

This bug can be triggered by inline stylesheets as well which do not create additional HTTP requests.

Fair point, but in what case does including 30 inline stylesheets make sense?

I'm hesitant to call this a bug.

If it was meant to be a feature, it should have at least been documented. How is it good to have undocumented, arbitrary limitations on a platform that you are using?

using inline style tags directly after elements can have a noticeable speedup on a pages rendering, dynamically generated pages could quite easily have well over 30 with the only downside being this silly limit.

and that isnt mentioning the boundary situations for things like web page builders with the ability to user define styles in which having a "lot" of style tags is architecturally a good idea.

I am quite tired of this "your doing it wrong" meme when its used instead of "you arent doing the same thing I am doing"

It makes perfect sense if you're generating your HTML and CSS from some kind of code-generator. Limiting it to only 30 style tags is really arbitrary and small.

The one time I've run into this 'bug' in the past was on a site that used lots of javascript plugins, more and more of which are coming with their own CSS files nowadays.

Of course you can concat them together, but that adds a maintenance burden in the future whose size can vary wildly.

At the very least, there is a documentation bug here. The reason for this seemingly arbitrary limit should be documented by MS.

Well, with MS, its a feature.

At MS, it might be dictated by a coding standard.

More seriously, I was once treated VERY skeptically by an old-school programmer (not at MS, never worked there) when I replaced some of his fixed-sized buffers with resizeable ones. "If our customers are running workloads that create more than 256 frooble node objects, I want to hear about it." Via a bug report? Really? And then get a new bug report next year when the new limit is reached? But he was adamant, and if it was up to him we wouldn't have made the change at all. The way he worked, you knew how many frooble node objects the customer needed, and if you were wrong then you fixed the code.

It's not unheard-of for components on a page to be separately generated, and for each to emit its own HTML and style info.

Two words:

development mode

I'd hope there would be server side combining of stylesheets. I have seen performance suffer from including about 10 stylesheets; don't want to imagine 30+.

In the reddit thread this seemed to crop up a lot in Drupal where each module installed can use its own CSS sheet.

There's apparently a setting to merge them but at least in that case something like this issue cropping up makes sense.

OK, I suspected that. I think that's a code smell, though; I have trouble seeing why you wouldn't want to get such styles into the main stylesheet.

My first web app (no longer active) allowed dynamic styles to be applied to different elements on a page. I used dynamically generated <style> tags to do this, and yes I did hit this limit on IE.

These days, I might dynamically generate a CSS file in that situation.

When using Drupal it can be pretty easy to run into this (and I have). Modules are allowed to add default stylesheets for their forms/controls/etc. so in a website with a large number of modules this sometimes happens. First time I ran into this it took quite a bit of time to figure out.

Drupal has a performance feature, which will take these CSS files and automatically aggregate them together. This can make for difficult debugging because problems will disappear when you move from a development to a production environment.

Developers on the Facebook Platform ran into this problem a few years ago. Facebook had a bunch of style tags in their source already -- it seems like they put them in different pieces all over the place.

When you would write an application (your FBML is put into their layout) and use even more, you'd eventually run into this limit.

I think they fixed it by combining all style tags in applications into one, since they had to parse them for security reasons anyway.

Yes. Sometimes while testing I'll put style=".." references in my tags just to get a feel for how things will look, then I'll commit to something and put it in the CSS files.

Fortunately, I do all my testing in Firefox so I've never even noticed this limitation :)

style=".." on an element is an attribute, not a style tag (<style>), and so is unaffected by this limitation.