1

（1）スタイル宣言でセレクターをスタックする、（2）HTMLタグでクラスをスタックする、または（3）一意のセレクターで重複した宣言をスタックする方が良い/速いですか？

私の質問を明確にするために、それぞれの例を示します。コードの各部分は同じ最終目標を達成する必要がありますが、最終的に読み込みが速くなるかどうか、または単に好みの問題であるかどうかはわかりません。

1 (クラスセレクターが重複しています):

<style>
.one, .two, .three {color:white}
.one, .two {background:blue;height:30px}
.one, .three {width:800px}
.two, .three {font-size:16pt}
.one {font-size:10pt}
.two {width:650px}
.three {background:#333}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

2 (インライン クラスが複製されます):

<style>
.white {color:white}
.bluebg {background:blue}
.heightThirty {height:30px}
.widthEight {width:800px}
.sizeSixteen {font-size:16pt}
.one {font-size:10pt}
.two {width:650px}
.three {background:#333}
</style>
<div class="one white bluebg heightThirty widthEight"></div>
<div class="two white bluebg heightThirty sizeSixteen"></div>
<div class="three white widthEight sizeSixteen"></div>

3 (宣言が重複しています):

<style>
.one {color:white; background:blue; height:30px; width:800px; font-size:10pt}
.two {color:white; background:blue; height:30px; font-size:16pt; width:650px}
.three {color:white; width:800px; font-size:16pt; background:#333}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

以前は 3 番目の方法でサイトを作成していましたが、たとえばサイトの配色を変更する場合、値を変更するのが困難でした。検索/置換を実行して、別のbackground:blueものに変更する必要があります（ただし、一貫性がない場合、検索/置換は効果がないことがわかります）。今は、最初の方法を優先して、最初の方法と 2 番目の方法を組み合わせて使用​​しています。スタイル宣言を共有する要素を決定し、スタイルシートでグループ化します。

最初の方法は (少なくともこの例では) 使用する文字数が少ないため、HTML ファイルのファイルサイズが小さくなることはわかっていますが、読み込み時間についてはわかりません。そして、私が気付いていない他のものがあるかもしれません。

使用すべき方法はありますか？3 番目の方法で発生する可能性がある問題を指摘しましたが、他に (3 番目の方法で) 私が知らない問題はありますか?

4

3 に答える 3

2

私は3番目の方法と1番目の方法が好きです。

ほとんどのサイトで作業するとき、私は最初のサービスを使用しようとします。セレクターを非常に多くの場所（ほんの数か所）で複製せずに、それらを制御できるようにします。

3番目の方法を使用する場合、リファクタリングするのは悪夢になる可能性があります。CSSに変換される他の言語、つまりSASSとLESSの役割がここにあります。これらの言語を使用すると、繰り返しの部分を変数や関数（通常は「ミックスイン」と呼ばれます）に格納できます。

LESShttp ://lesscss.org/を大いに気に入っていただけると思います。私はそれを使用して既存のプロジェクトにジャンプし、いくつかの特別な再利用可能なUIウィジェットを作成し、すべてのCSSはLESSを使用していました。事前の知識がなくても、既存のコードを理解し、新しいパーツを作成するのは簡単でした。新しいWebサイトに推奨されますが、既存のサイトにはそれまたは1番目の方法で問題ありません。

于 2011-12-27T07:00:31.150 に答える
1

これは、W3CがCSSに変数を追加することを頑固に拒否したことによって引き起こされた問題です。彼らは、カスケードスタイルは完全に受け入れられる代替手段を提供しますが、多くの場合は明らかにそうではなく、CSSは、プログラミングトレーニングなしで一般の人がそれを取得できるほど単純であると想定されていると主張しています。急速に増大する複雑さに対処するために特別に訓練されること。

方法＃1

最初の方法の問題は、美的デザインが常に論理的に構造化されているとは限らないため、スタイルを論理的に整理してこの方法を使用することが不可能になることです。

たとえば、私は通常、UIのグループ化とレイアウト、およびサイトの幅広いセクションによってスタイルを整理します。サイト全体（または少なくともフロントエンド）のグローバルスタイルシートがあり、特定のページレイアウトまたはUIタイプのスタイルシートがある場合があります。また、各スタイルシート内には、UI/レイアウト要素ごとに異なるセクションがあります。

問題は、スタイルがサイトデザイン内でそのようにグループ化されていないことです。ナビゲーションメニューは、コメントボックスと色を共有する可能性が非常に高くなります。サイドメニューは検索ウィジェットと幅を共有する可能性があります。おそらく、異なるレイアウトを使用しているが属性を共有しているサイトの異なるセクションからのUI要素のいくつかの異なるクラスがあります。一部の要素が5つの異なるプロパティを他の5つの要素と共有する可能性があるため、視覚的な類似性によってスタイルを整理することは、不可能なことは言うまでもなく、混乱を招きます。

方法＃2

したがって、これにより多くの開発者が2番目のオプションになります。ただし、サイトの美学がセマンティクスと相関することはめったにないため、最終的には、、、、、、などのクラス名を使用することになりますblue。ただし、コンテンツと表示の分離に完全に違反するため、これも同様に不十分なオプションです。おそらく、現在のデザインでは、検索ボックス、カテゴリメニュー、およびコミュニティ投票はすべて右側の列に表示され、同じ幅になっていますが、常にそうであるとは限りません。したがって、サイトを再設計する場合は、CSSに加えてHTMLを変更する必要があります。red3primary-colorsecondary-colorwidth-1colwidth-3col

それで、解決策は何ですか？

ほとんどの開発者は、3の組み合わせを使用します。美的組織がサイト/ UI組織と一致する場合、オプション1を使用します。美的構造が意味的構造と一致する場合、オプション2を使用します。また、1と2が失敗すると、オプション3にフォールバックします。

しかし、もっと良い方法があります...問題の原因を修正してください：CSSの実装。実世界での経験から、多くの設計者や開発者は、CSSの設計がCSSワーキンググループの意図したとおりに機能しないことを学びました。保守可能なコードを記述しながらリッチで複雑なデザインを実装するには、CSSにセレクターの継承、変数、およびミックスインが必要です。

SassやLESSのようなプロジェクトは、何十年にもわたるソフトウェアエンジニアリングから学んだハードな教訓と知識をCSSに適用します。現代のプログラミング言語には、単にプログラマーのエゴを養うための複雑な構文はありません。プログラミング言語は、ソフトウェアエンジニアリングの分野とともに進化してきました。これは、プログラマーが、保守可能/管理可能なコードを作成するために特定の機能と構造が必要であることに気付いたためです。

これにより、開発者は、CSS仕様を変更せずに、効率的で管理しやすいCSSおよびHTMLを作成するために必要なツールを利用できます。SCSSまたは同等のメタ言語を使用して記述し、SassにCSSに変換させるだけです。Hamlとペアリングする人もいますが、それほど遠くまで行く必要はありません。

于 2011-12-27T07:52:26.417 に答える
1

私の観点では、これはより良いです

<style>
.main div{background:blue;width:800px;font-size:16pt;color:white;}
.one, .two {height:30px}
</style>

<div class='main'>
<div class="one" style='font-size:10pt'></div>
<div class="two" style='width:650px'></div>
<div class="three" style='background:#333'></div>
</div>
于 2011-12-27T12:57:01.053 に答える