I just tried this out, and one thing I noticed (in Mac Chrome at least) is that it's very flickery - you can see the page flicker to an unstyled version and then back to the updated version. It would be worth trying to figure out if there's some better way to force this update in Chrome that avoids that.

One thing to try would be to add the new link before removing the old one (but position it after the old link in the document); since the new rules are basically the same as the old rules, it doesn't seem like it should mess up the cascade to have them listed twice - though with CSS you never know :) It might also be slower, but given how fast the browsers seem to be to handle updated CSS I suspect it's not noticeably worse.

It might also be worth seeing what other live reloading solutions do, although I think many of them basically fall back on using browser-specific extensions. We might want to do that eventually as well if we can't get the experience to be nice enough with a pure script-injection solution.