Sass を使用して SCSS スタイルシートを 1 つにコンパイルし、assembled.cssHTTP リクエストを削減しています。スタイル設定のために個々のページに名前を付けるには、各ページ固有の CSS ファイルをそのページの<body>要素の ID セレクターでラップします。たとえば、次のようになります。
body#support {
.introduction {
@extend %dropcap;
}
}
nanoc (ERB を使用) には、各ページの本文に HTML フォルダー構造に基づいてダッシュで区切られた一意の ID を割り当てるヘルパーがあるため、ルート ページは#supportまたは#productsになり、サブページは「#products」のような ID になります。 -ジャイアントスペースレーザー」。
これらの「製品」サブページにのみ適用される一連の SCSS ルールを作成したいと考えています (ルート レベルの#productsページ自体は含まれません)。次のように、ID の代わりに属性セレクターを使用する場合、特異性に関して注意すべきことはありますか?
body[id^="products-"] {
.introduction {
@extend %dropcap;
}
}
私は実際には を使用したくありません!importantが、これらのページ固有のルールが、@import の順序で先行する '_base.scss' パーシャルで設定されたスタイルよりも優先されるようにしたいと考えています。HTML 構造を完全に制御できるので、理論的には、Sass ファイルで Erb を使用して、次のようにコンマ区切りの ID リストに置き換えることもできます。
body#products-giantspacelaser,
body#products-laboratorycamouflage,
body#products-resurrecteddinosaur {
.introduction {
@extend %dropcap;
}
}
-しかし、それは非常にエレガントではないようです。前もって感謝します。
編集：
私は他のスタイルを本当にカスケード依存の方法で書きました:
- CSS を正規化する
- HTML5 ボイラープレートと私自身の賢明なハウス ルール
- CSS ライブラリ (この場合は Bourbon & Neat)
- 独自のミックスインとプレースホルダー セレクターをインポートする「_source.scss」。
- すべてのページのデフォルトのレイアウト フレームワークをスタイルする「_base.scss」。
- 各ページの個々のコンテンツ スタイル設定用の一連の .scss ファイル - そして、必要に応じて base.scss レイアウトの決定を上書きすることを望んでいました (ページが標準から大きく逸脱する必要がある場合)。
いずれにせよ、これらの個々のページのスタイルシートは、特定の目的とページのために作成されているため、以前のデフォルトよりも確実に高い特異性を備えている必要があります。この 1 つの特定の目的 (ページ スタイルシートの名前空間) を除いて、意図的に ID セレクターを使用していません。
使用して、言う
.services .sharktraining .introduction .disarmingJoke {} --0,0,4,0
「_base.scss」で
body[id^="products-"] .disarmingJoke {} --0,0,2,1
カスケードのさらに下の「products.scss」では、そうではありませんか? (注意: 4 つのクラスを使用する必要があることは、ひどい慣習であることはわかっています。名前空間を何かがすり抜けてしまうことを心配したくないだけです)。
別の - 本当に汚い - オプションがあると思います: body[id^="products-"]セレクターを何度も繰り返して、最も具体的なクラス強度ルールでさえ単純に数を上回ります。