1

私は CSS プリプロセッサに取り組んでいます。つまり、出力 HTML がどうなるかを決定する神の力を持っているということです。ブラウザーが下位レベルの要素にスタイルを適用する方法に関する情報を見つけることができませんでした。どちらの方がよいですか？

width: 100%があり、これをいくつかの要素に適用する必要があるとしましょう。

body { width: 100%; }
header { width: 100%; }
footer { width: 100%; }

これは、次のように書くこともできます。

body, header, footer { width: 100%; }

これにより、CSS のサイズが小さくなります。ただし、これは、たとえばフッターに別のスタイルを適用したい場合、次のような結果になることも意味します。

body, header, footer { width: 100%; }
footer { font-size: 23px; }

そしてここで質問です - フッター要素は CSS で 2 回書かれています。これは、ブラウザーがこれをより遅く解析することを意味します。

body, header { width: 100%; }
footer { width: 100%; font-size: 23px; }

セレクターの組み合わせは良いことだと思います。ただし、プリプロセッサがこれを実装し始めると、次のようなスタイルが出力されます。

.login-box { margin-top: 10px; }
.login-box { font-weight: bold; }

これは、margin-top に一致する別の要素があると考えているためです。たとえば、10pxです。それで、これは問題ですか。つまり、私がたくさん持っている場合

.login-box { margin-top: 10px; }
.login-box { font-weight: bold; }

すべてが 1 か所にあるわけではありません。

.login-box { margin-top: 10px; font-weight: bold; }

PS質問は特異性に関するものではありません

==================== 編集 01 ====================

ここにいくつかのSASSコードがあります:

%full-width {
   width: 100%;
}
%margin-reset {
   margin: 0;
}

body {
   @extend %full-width;
   @extend %margin-reset;
}

そして、出力は

body {
  width: 100%; 
}
body {
  margin: 0; 
}

問題は、それが実際に正しいかどうかです。プリプロセッサが次のように出力した方がよいのではないでしょうか:

body { 
   width: 100%; 
   margin: 0; 
}
4

2 に答える 2

1

これは、プリプロセッサのバグのようです。同じセレクターを持つ複数の CSS ルールは必要ありません。コード内で組み合わせるだけです。

サイズに関しては、どちらのバージョンが小さいかを計算します: 組み合わせたセレクターの有無にかかわらず? それは場合による。

于 2013-08-21T15:02:49.147 に答える
0

あなたが尋ねたことは、CSSの特異性についてもっと聞こえます。このツールはあなたの質問に答えるかもしれません.CSS 特異性計算機を確認してください.

于 2013-08-21T07:27:17.397 に答える