21

キャッシング、マークアップとデザインの分離、概要の改善などを利用するために、すべてのスタイル設定を外部 CSS ファイルに含めることをお勧めします。

ただし、通常、要素は同じように見える、つまり同じクラスを持っているが、位置が異なる必要があるという問題に遭遇しました。たとえば、構成の違いにより異なるマージンまたはパディングが必要です。

次の 3 つのオプションを考えました。

オプション 1 : 位置スタイル (マージン/パディング) から外観スタイルを分割し、それらを別々のクラスに入れ、必要に応じてそれらを組み合わせます。

.myClass { ...; }
.myClass.top { margin-top: 20px; }
.myClass.inside { margin: 10px 0px; }
.myClass.bottom { margin-bottom: 20px; }

オプション 2 : クラスを複製し、それに応じて名前を変更し、すべての違いを独自のクラスに保持します。

.myClassTop { ...; margin-top: 20px; }
.myClass { ...; margin: 10px 0px; }
.myClassBottom { ...; margin-bottom: 20px; }

オプション 3 : インライン スタイルを使用して、異なるマージン/パディングを宣言します。

<div class="myClass" style="margin-top: 20px;">
<div class="myClass">
<div class="myClass" style="margin-bottom: 20px;">

持つ

.myClass { ...; margin: 10px 0px; }

私の常識では、オプション 1 を使用し、親子構造に応じて違いをカスケードします。しかし、これは通常、特に CSS を読んでいる他の開発者にとって、かなり混乱を招きます。そこで、オプション 3 (外部マージン/パディングを少しだけ使用) を試してみましたが、それはかなりうまくいくようです。

今でも変な意味で気持ち悪いです。インライン スタイルを使用しないと言っている人が非常に多いです。通常は「最適なものは何でも」と言いますが、最近、インラインのマージン/パディングが Web サイトのレンダリング プロセスに影響を与え、「ダンシング ブロック」を引き起こす可能性があることに気付きました。この効果が本当にスタイルの処理順序によるものなのか、それとも他の厄介なことが原因なのかはわかりません。

何かアドバイスはありますか？

4

4 に答える 4

1

これは、ほとんどすべてのコンテンツが動的に生成される e コマース サイトを開発している私自身が遭遇した問題です。ほとんどのコンテンツ ブロックは 2 回以上繰り返されているため、さまざまなブロックをさまざまな方法でスタイルしたかったため、同じようにスタイルを設定することはできませんでした。

私がやったのは、Chrome の Inspect Element を使用して div とクラスの階層を正確に調べ、最終的に次のようなことをすることでした:

オプション 4:

.myClass { ...; }
.thumbnail .myClass { margin-top: 20px; }
div.leftCol .myClass { margin: 10px 0px; }
footer .myClass { margin-bottom: 20px; }

私の見解では、このオプションの利点は、オプション 1 のすべての利点を享受できるだけでなく、新しいクラスを追加する必要がなく、CSS が非常に構造化された読みやすいままであることです。

于 2013-04-27T12:59:13.053 に答える
0

経験則は次のとおりです。繰り返し実行する必要がある場合...何かのリストのようにコメントを言います。そして、それぞれにボディが表示され、タイトルの下に 40px あり、css クラスを使用します。一度限りのことなら。たった1つのオブジェクト、たとえば...インラインを使用

于 2013-04-27T12:51:26.353 に答える