css - 1つのスタイルシート内のさまざまな配色

Question

テーマにはさまざまなスタイルがあります（さまざまな配色）。

最初にデフォルトのcssをロードし、次に使用する配色に応じて特定の色などのcssスタイルシートをロードします。

サイトの速度をテストしたところ、2つのスタイルシートをロードする必要があるため、遅延に気づきました。

すべてのスタイルを1つのファイル内に配置し、2つの異なるスタイルを使用しない方法はありますか？また、これはクロスブラウザである必要があります。

score 2 · Accepted Answer

カラーオーバーライドの場合、IDセレクター内にネストし、そのIDをbody要素に指定して、配色を選択できます。これにより、多くのテーマを1つのファイルに保存できます。

例えば

/* defaults */
h1 { color : black; }

/* light theme */
#light h1 { color : grey; } 

/* neon theme */
#neon h1 { color : pink; }

次に、ボディクラスを次のように設定します。

<body id="neon">

LESSを使用している場合は、トップレベルのスタイルをカラースキーム全体に簡単にラップして、レイアウトをすっきりさせることができます。例えば

#light {
    h1 { color : grey; } 
    p { color : silver; }
}

score 0 · Accepted Answer

サーバー側のテクノロジーによっては、CSSとJSを「バンドル」して、1つのファイルとしてクライアントに提供されるようにする必要があります。これにより、.jsと.cssを圧縮して縮小することもできます。

score 0 · Accepted Answer

2つのスタイルシートのロードと1つのスタイルシートのロードの大幅な遅延に気付かないはずです。

ただし、質問に答えるために、2番目のスタイルシートファイルのすべての内容を最初のスタイルシートファイルの最後にコピーすると、同じ結果になるはずです。

score 0 · Accepted Answer

すべてのスタイルを1つのファイルにコピーする場合、bodyに2つのクラスを定義し、すべてのスタイルに対応するクラスのプレフィックスを付けることができます。

したがって<body class="scheme1">、CSSルールは次のようになります。.scheme1 h1 {}

score 0 · Accepted Answer

使用量を減らしてCSSを縮小することができます。

たとえば、thisMのように複数のクラスを使用するか、CSSを縮小する必要があります。

<h1 class="big-text theme-blue"></h1>

次に、cssでMなどのルールを使用します

.big-text.theme-blue

score 0 · Accepted Answer

1つのスタイルシート内にさまざまな配色があります。配色の変更を示すには、http：//prettydiff.com/にアクセスして、配色リストの値を別の値に変更します。これは、bodyタグのclass属性を変更するだけで、1つのCSSファイル内のさまざまなCSSプロパティを参照します。

6 に答える 6