8

他の利用可能なオプション、具体的には子孫セレクターではなく、クラスを使用してコンテンツをターゲットにするのが適切な場合について、よりよく理解したいと思います。

多くの場合、クラスを使用する代わりに、子孫セレクターを使用して同じ要素をターゲットにすることができます。同じことが両方の方法で達成できる場合、オプションを決定する際のロジックは何ですか?

いくつかのシナリオ例を次に示します。

1.

を。

<div class="main">
     <div>
         <div> /* target */
             <div></div>
         </div>
     </div>
</div>

.main > div > div

b.

<div class="main">
     <div>
         <div class="content">
             <div></div>
         </div>
     </div>
</div>

.content

2.

を。

<div class="main">
     <div> /* target */
        <div></div>
     </div>
     <div> /* target */
        <div></div>
     </div>
</div>

.main > div:first-child
.main > div:last-child

b.

<div class="main">
     <div class="content1">
        <div></div>
     </div>
     <div class="content2">
        <div></div>
     </div>
</div>

.content1
.content2

3.

を。

<div class="main">
     <div>
         <div></div>
         <div></div>
         <div></div>
     </div>
</div>

.main > div div

b.

<div class="main">
     <div class="content">
         <div></div>
         <div></div>
         <div></div>
     </div>
</div>

.content div

クラスまたは子孫セレクターの使用を決定する際のロジックは何ですか?

4

3 に答える 3

11

正しいチェックアウトで会話を始めるには良い CSS 戦略とは? . 個人的には、@gregnostic の戦略はドメインに名前を変更する必要があると思います。

私が見ているように、12 を超える Web ページを含むすべてのプロジェクトは、その範囲に基づいて、さまざまなドメインをある程度実装する必要があります。

ここにあるドメインは次のとおりです (具体的な順序で並べられています)。

リセット中

ブラウザーと環境条件全体でベースラインを達成しようとします。Eric Meyerによって有名になりました。多くの人はこれを解決済みの問題としてスキップしますが、ページ上のコンテンツ管理システムで作業する人として、CSS のリセットは重要であり、適切に解決するのが難しい問題になる可能性があると信じています (特にクライアントが同じものを使用している場合)。そのままのテーマ ライブラリ)。

これらのセレクターは、できるだけ一般的なものにする必要があります。通常、CSS クラスに基づく選択は意味がありませんが、場合によっては、特定のシェル内でリセットする必要がある場合を除きます。

レイアウト

潜在的なページ構造。多くの場合、何らかのグリッド システムによって処理されます。これらはもう少し具体的である必要がありますが、ある種の再帰パターンに依存する必要があります。何かのようなもの：

.row {
    width: 100%;
    min-height: 30px;
} 

.row .col {
    width: 100%;
}

    .row.two .col {
        width: 50%;
    }

これはタグの選択で行うことができますが、次の人にとってはほとんど直感的ではなく、grid魔法のように間違った場所に表示されてしまうことがよくあります。クラスを使用すると、ジャンク ドロワーTMを小さく保つことができます。フルスケールの実装については、次を参照してください。

コンポーネント/機能

私はこれらについて非常に具体的になる傾向があります。このための私のお気に入りのパターンの 1 つは、Stubornella の OOCSSです。基本的な概念は、コードの重複を最小限に抑えるために、さまざまな CSS セレクター内に属性をバンドルし、それらがうまく連携するように最善を尽くすというものです。これの簡単な例はTwitter Bootstrapのボタンです。

ここで子セレクターをいじることができるかもしれませんが、誰かが初めて変更したいときは、それをしないことを強くお勧めします。

<button type="button"></button>

に：

<button type="button">
    <span class="ugly-orange-bordered-purple-thing">
        My Button
    </span>       
</button>

過度に一般的：

button {
    border: 99em purple dotted;
}

以下と完全に競合します:

.ugly-orange-bordered-purple-thing {
    border: 5em orange dashed;
    background-color: purple;
}

ただし、変更buttonし.btnた場合は、単にそれをスパンに移動するか、そのままにしておくことができます。

タイポグラフィ

与えられた条件下で、さまざまなフォントの適切な表示を処理します。私は常にこの要素セレクターを可能な限り扱います。私は通常、次のようなもので開始します。

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
}

p, span, a, ... {
    font-family: serif; /* Or whatever. */
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.8em;
}

... 

.row h2 {
    font-size: 1.6em;
}

クライアントの必要に応じて、ボタン内のスパンのルールを追加することさえあります。

テーマ

タイポグラフィの分野と同じように、私はこの分野でよりタグを選択する傾向があります。テーマは定義上、ほとんど捨てられます (たとえば、タコベルとマクドナルドは同じテーマを持ちたくないため)。

Dojo ツールキットには、テーマを別のレイヤーとして設定する良い例がいくつかあります ( nihilo を参照してください)。ここではクラスを使用する傾向がありますが、それは主に再利用性のためであり、これについては既に説明しました。

ジャンクドロワー

CSS のジャンク ドロワーです。このほとんどが 内<!--[if lt IE 9]>に含まれていることを願っていますが、すべてのプロジェクトにはこれらがあり、最後に配置する必要があります。これを空にしておくことは優先事項ですが、仕事を終わらせることほど重要ではありません (私は常に自分に言い聞かせています)。

あなたが望む最後のことは、次のようなルールを変更することであるため、私はこれらを本当に具体的にします。

div div {
    white-space: nowrap;
}

ほぼ完全なサイトで。可能な限り、これらを職場にやさしい「レガシー」エリアに置きます。

クロージングノート

  • CSS を含むコード レビューを行うとき、適切な説明のない ID を表示したい唯一の場所はジャンク ドロワーです。
  • 他のすべてのコードと同様に、常に周囲のコードのパターンに従うようにしてください (目を出血させない限り)。
  • 何か見逃した場合はお知らせください
于 2012-04-20T02:56:23.843 に答える
6

子孫セレクターを使用すると、HTML にクラス情報を埋め込むことを回避できます。これは、ラッピング ブロックが論理コンテナーである場合に便利です。たとえば、タグを使用してテーブルを作成し、数百または数千の行がある場合、繰り返しdiv指定する代わりに子孫スタイルを指定することで、ドキュメントのサイズを削減し、読みやすさを向上させることができます。class='...'

  <div class='mytable'>
    <div></div>
    <div></div>
    <!-- A LOT MORE ROWS -->
  </div>

クラスを指定する利点は、特定の順序に縛られないことです。ビューを再配置するたびに子孫タグを変更しなければならないのは、非常にイライラすることがあります。クラスを指定することのもう 1 つの利点は、CSS を使用する場合、子孫ブロックを解読するよりも、特定のクラス名を検索する方がはるかに簡単であることです。

私の知る限り、それぞれが適切である限り、白黒のガイドラインはありません。独自の裁量で、それぞれのメリット/デメリットを考慮して設計してください。

于 2012-04-20T01:15:44.500 に答える