It makes the sense that reparsing CSS and reflowing the document could be slow. I suggest including all rules you could need but "namespace" them with a class on the <html> element and then change the active rules by adding and removing classes rather than using using cssText/innerText.
CSS:
.foo h1 { color: green }
.bar h1 { color: red }
JavaScript:
document.documentElement.className = new Date().getHours() >= 12 ? 'foo' : 'bar';
This would clobber any other class names on the <html> element so more careful parsing or toggling classes via jQuery (or equivalent) would generally be appropriate.
If your JavaScript knows what CSS rules actually need to change you could also modify the style rules on the fly. In practice, this is similar to modifying any elements style i.e. myElement.style.color = 'green'; Opera web curriculum has a good explanation of modifying CSS via JavaScript.
Example of cross-browser method to modify a single rule:
var modifyStyleRule;
(function(doc){
var sheets = doc.styleSheets,
rules = 'cssRules';
rules = sheets[0][rules] ? rules : 'rules';
modifyStyleRule = function (sheetIndex, ruleIndex, propertyValues) {
var style = sheets[sheetIndex][rules][ruleIndex].style,
prop;
for (prop in propertyValues) {
if (propertyValues.hasOwnProperty(prop)) {
style[prop] = propertyValues[prop];
}
}
};
})(document);
Example usage: modifyStyleRule(0, 0, {color: 'red'});.
Note that depending on the type and amount of changes you make with this (colors vs size/position) this could very easily be slower than sheet.innerHTML or equivalent. This technique does come in handy from time to time and when combined with "style namespaces" and swapping class names, large changes can be still be performant.
