link要素へhidden属性を指定してやり、それのトグルで特定のCSSファイルに書かれたルール群の有効・無効を切り替えられるかなと考えた。まずhidden属性でCSSが無効になる必要があるので調べた所、無効にならなかった……。仮定で挫折。
Demo: <link hidden>
もし無効になるとしたら外部CSSファイルに書かれたcolor: redは反映されないはずだが、そうはならなかった。style要素への指定でも同じ。
hidden属性は単純に見えなくなるというだけで、機能性自体は残ると捉えておいた方が良いのかな。hidden属性を指定した要素の子要素の機能性についてはその仕様で触れられているけど、指定した要素の機能性については触れられていないような気がする。
セレクター単位ではなく、ファイル単位でCSSを簡単に有効化・無効化する方法を考えているわけだけど、良さそうな方法が思いつけない。難しく考えすぎてそう。
@myakuraのアイディアを試してみたところ、rel=stylesheetを動的に削除・追加すると、参照しているCSSに書かれたルールを丸ごと有効化・無効化できた。追加では有効になるのは知ってたけど、削除で無効になるのは思いつかなかった。
Twitterやフィードバックで指摘されたlink要素でdisbaled属性を使う方法へのフォローアップをしておく。これは一部のブラウザーで可能だし知ってはいたのだけど、disabled属性は仕様ではいくつかのフォーム要素のみに存在する属性なので、Internet Explorer 11やChrome 34の独自実装に過ぎない(例えばFirefox 29には無い)。そのため将来的にも安心して使えるとは言い難いので、良さそうな方法とはちょっと言えない。