スコープ内の動的スタイル

Question

私は、サードパーティのスキンと結合してヘッダー、ナビゲーションなどを定義するサイトを持っています。私のサイトにはスタイルシートがあり、サードパーティにはスタイルシートがあります。私は2つを組み合わせ、予想通りに大きな巨大な混乱を得る。

私がしたいことは、「このスタイルシートのセットをページのこの部分に適用し、これらのものをこのものに適用する」と言うことです。私はこれを達成するためにフレームを使用したくありません。

明らかな解決策は、すべての自分のスタイルにコンテナのIDを付けることです。それは何百ものスタイルを持つ大規模なサイトであるため、これは実行し維持するのに苦労します。

本当に、私がやりたいことは、そのようなものを動的に行うことです。

1つのオプションはバックエンドにあり、スタイルシートを解析して変更し、各スタイル名の前にコンテナのIDを追加します。もう一つは、javascriptを使って、スタイルシートをメモリに解析し、その場所で修正します。私はフロントエンドの方がより好きです。

もっと良い選択肢があると思いますか？いくつかのjqueryプラグインは、 $（）。apply_styles_from_file（）;

または、シートを混在させる問題を解決するレイアウトソリューションですか？

または適切なライブラリを使用して、スタイルシートを解析して修正することができますか？

Answer 1

）、私はこれを解決するために何のエレガントな方法が存在しないことを決定しました。私は最終的にやったことは、私が持っているスタイルシートのセット全体を書き換えると、すべての定義にクラスを追加するために、サーバー側のソリューションを使用している：

A{} becomes .myclass A{} 
    .foo becomes .myclass foo{} 
    #thispage .bar becomes .myclass #thispage .bar{} 

私があれば、その後、ファイルを探しますハンドラを介してこれをしませんでした最後のコンパイル以降に見つからないか、または変更されていない場合は、それを書き換えます。私はperlモジュールCSS :: Simpleを使って書き換えを行った。

は、その後、私はクラスの中核的なコンテンツを包ん：

<!-- header here --> 
    <div class="myclass"> 
    <!-- content here --> 
    </div> 
    <!-- footer here --> 

今、私はこの特別なクラスの外に持っているものは、鉱山からの干渉を受けることなく、独自のスタイルを取得します。私は今、サードパーティーのスタイルが支配的なページ（上記のラッパーをスキップし、必要な部分だけをラッピングする）や、私が上記のように行うページを持つことができます。ヘッダーはサードパーティーから来ることができます。

これは恐ろしいとclunkyです。 :-(CSSの将来のバージョンではいくつかのコンテキストが必要ですが、それは仕事を完成させます。

Answer 2

あなたは何をしていても、そのコンテナ内の要素だけに適用されるコンテナとスタイルを持つ必要があると思います。あなたが求めているJavascriptベースのメソッドを実行しても、影響を受ける要素を定義する必要がありますが、時間が経つにつれてますます複雑になります。

したがって、私はJSベースのソリューションを避け、代わりに個々のビューにスコープを設定して別々にビューをレンダリングできるようなPHPのようなサーバー側言語に移行します。

 <div id="main"> 
     <? render('view' => 'users.php', 'scope' => 'users'); ?> 
     <? render('view' => 'games.php', 'scope' => 'games'); ?> 
    </div> 

レンダリングメソッドは、ビューをdivにラップして、スコープが指定されたコンテナがあることを確認できます。ビューがどのように見えるかに応じて、出力は次のようになります：

 <div id="main"> 
     <div class="users">Users go here.</div> 
     <div class="games">Games go here</div> 
    </div> 

新しいレンダリング部分で、後に、あなたは他のゲームのセクションを追加することを決定しなければならない、あなたは、単に再宣言することができる範囲を、そして以前のものと同じCSSスコープを持ちます。

お互いに属するスタイルを区別するために、各スコープ（たとえば、users.css）を表すCSSファイルを使用できます。

それはそれを処理する方法の1つですが、私はその場で私が思い付くことができる最高のものだと思います。

幸運にも、より良い解決策が見つかったら、私はそれを聞いてみたいです！

Answer 3

これは何か？

#green-bg 
{ 
    background-color: green; 
} 

#red-bg 
{ 
    background-color: red; 
} 

<div id="red" class="color-selector">Apply Red Background</div> 
<div id="green" class="color-selector">Apply Green Background</div> 

<div id="content">I need a background color!</div> 

$('.color-selector').click(function() { 
    $('#content').addClass('#' + this.id + '-bg');   
}); 

また、私はさておき命名規則から、私はそのプロパティは、あなたの要素の要求と一致した場合にロードされているスタイルシートを「無視」する方法があると信じていないことを言及する必要があります。

Ex。両方のスタイルシートにh1宣言がある場合、h1要素は、どちらが衝突したかに応じてスタイルが設定されます。区別するための唯一の方法は、各スタイルシートがそれに応じて名前を付けられたプロパティー（例：h1.light、h1.dark）を持ち、上記の方法でそれらを適用することです。

Answer 4

user_made cssが！important-ruleを取得したらどうなりますか？

ちょうどこのために：

ユーザーが許可された領域をカスタマイズし、彼/彼女のページ にそれを適用する - バックにCSSファイルが変更された領域のための重要な-ルールで作成されます！。

動作するはずですが、必要としたくないCSSハックを否定する必要があります。 は（旧MySpaceのような;）私の研究の後

よろしく