1

少しCSSを使って質問を説明しようと思います

オプション1

あちこちで繰り返すのではfloat:left;なく、フロートするすべてのクラス名を一緒に連鎖させます。

.ちょっとしたこと、
 .2 つのささいなこと、
 .three-little-things、
 .4 ささいなこと、
 .five-little-things {
    フロート:左;
}
.ちょっとしたこと {
    青色;
}
.2 ささいなこと {
    赤色;
}
.three-little-things {
    色: 黄色;
}
.four-little-things {
    青色;
}
.five-little-things {
    色: 緑;
}

総文字数: 331 (スペースを含みますが、スペースを削除しても例は有効になります)

オプション 2

  • float:left; を繰り返します。いたるところにありますが、文字数がわずかに少なくなります。
.ちょっとしたこと {
    青色;
    フロート:左;
}
.2 ささいなこと {
    赤色;
    フロート:左;
}
.three-little-things {
    色: 黄色;
    フロート:左;
}
.four-little-things {
    青色;
    フロート:左;
}
.five-little-things {
    色: 緑;
    フロート:左;
}

総文字数: 284

ここでは、両方のコードでまったく同じことを行いました。2 番目の方法では文字数が少なく、つまりバイト数が少なくなります。

だから私の質問はこれです:
これは、2番目の方法がパフォーマンスに優れていることを意味しますか? 99個の小さなものを持っていたらどうしますか?

それが私に関係する理由
The @extendin Sass では、たとえば to を使用できます@extend .clearfix;。これを「オプション 1」のように使用すると、非常に長いセレクターになります。

それで、どれが最善の方法ですか？

4

1 に答える 1

2

キャラクターの違いがこのように最小限であるため、パフォーマンスの結果は明らかにここでは目立ちません。ただし、最初のスニペットで行った方法で CSS を記述する利点は、他の多くの共有プロパティを 1 か所だけに追加し、それらを各クラスに適用できることです。より多くの共有プロパティを追加すると、最初の方法を支持する文字の違いのヒントが表示されます。

また、ヘブライ語やその他の RTL 言語をサポートするためにサイトを翻訳することにしたとします。あなたがしなければならないのは、float: left を float: right に変更することだけです。そうは言っても、特定のインスタンスでの純粋なサーバーパフォーマンスではなく、使いやすさと長期的なスケーラビリティの観点から CSS を見ることが重要だと思います。

于 2013-01-31T11:47:31.790 に答える