1

自己完結型の UI コンポーネントを備えたモジュラー html/js アプリケーションを作成しています。各 UI コンポーネントには、独自のテンプレート ファイル (構造)、js ファイル (動作)、および css ファイル (プレゼンテーション) があります。

  • これらのコンポーネントには、独自のローカル css ファイルを使用した「デフォルト」のプレゼンテーションが必要です
  • これは問題ではありません。コンポーネントの「ローカル」CSS でデフォルトのスタイリングを定義できます。
  • しかし、さらにグローバル テーマも必要です。テーマ css は「アプリ全体」のスタイルを定義します
  • ユーザーがテーマを適用する場合、すべてのローカル コンポーネント スタイルはテーマ css によってオーバーライドされる必要があります

グローバルテーマcssのすべてのスタイルを「重要」としてマークすることでこれを行うことができることを私は知っています。しかし、私はそのように行きたくありません。これにアプローチする方法に関する他の提案はありますか?

4

3 に答える 3

1

スタイリングされている要素が同じセレクターを介してアドレス指定されている場合、たとえば#something liすべてのスタイルシートで、後で含まれるスタイルシートは以前に設定されたものを上書きします（何かが「重要」でない限り）。これにより、テーマを使用できるようになります。ローカルスタイルがすでに適用された後で、それらのテーマをインポートするだけです。

ローカルおよびグローバルなスタイリングについてのあなたの質問を理解できません。ただし、要素に適切な名前を付けている場合は、各コンポーネントのスタイルがグローバルスタイルに干渉しないようにする必要があります。.some-table tr td .another- table tr td { ... }（レンダリングのパフォーマンスと読みやすさの両方の理由から、長いネストされたセレクターの代わりにクラス/ ID名を使用することをお勧めします）

言い換えれば、あなたはあなたのページのそれぞれにこれらを書くことができます：

  1. 基本のデフォルトレイアウトを含める
  2. ベースをグローバルレイアウトで上書きします
  3. 再びユーザー定義のテーマで上書きします
于 2012-09-11T09:21:26.397 に答える
1

RequireJS の構造を考えると、次のことをお勧めします。

  • 各コンポーネントで style.css によるスタイリングを許可または要求する
  • themes/コンポーネントフォルダーと同じフォルダーを持つ必要があるフォルダーのようなテーマの構造を提供します
  • CSS を最適化またはプルするとき、テーマが定義されている場合は、CSS をメイン コンポーネント フォルダーではなくテーマ フォルダーからプルするか、コンポーネント style.css にフォールバック (おそらく、このフォールバックを構成可能にする) が見つからない場合は、警告を表示します。
于 2012-09-21T06:45:33.370 に答える
0

属性を使用してスタイル要素を (コンポーネントごとに) 挿入することができるscopeため、ルート要素 (HTML) からではなく、挿入先の DOM スコープにのみ影響します。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

<article>
  <div>The scoped attribute allows for you to include style elements mid-document.
   Inside rules only apply to the parent element.</div>
  <p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This should be red.</p>
  </section>
</article>

ブラウザのサポート (現在):ChromeおよびFF

于 2014-05-14T11:48:24.770 に答える