0

私は、堅実でレスポンシブなコーディングスタイルを構築しようと大いに努力しています。私の一般的な質問は、子クラスのスタイリングに関するものです。最初に例を挙げましょう：

    <div class="pageHeader">
        <div class="cnt">
            <div class="logo">
                <a href="#" title="logo">My Logo</a>
            </div> <!-- .logo-->
            <div class="menu">
            </div> <!-- .menu-->
        </div> <!-- .cnt-->
    </div><!-- .pageHeader -->

メインページの構造には、pageContainer / pageHeader / pageBody/pageFooter表記を使用しています。だからここに質問があります：.logoのような特定のセレクターをどのように書くべきですか？どの表記を使用する必要があり、その理由は次のとおりです。

.pageHeader .cnt .logo a {}
.pageHeader .logo a {}
.cnt logo a{}
.logo a{}

もちろん、この場合の表記法についてもっと良いアイデアがあれば教えてください。

4

5 に答える 5

1

2行目

.pageHeader .logo a {}

その理由は、アプリの他の場所でジェネリッククラス名を再利用することを心配する必要がないため、すべてをその「コンポーネント」コンテナーでスコープしたいからです。一方、デフォルトで最大レベルの特異性を使用したくないので、1行目は実行しません。

于 2012-05-12T19:14:20.833 に答える
1

提供する特定の例では、ページ全体で一意になるため、#logoおよび#logoHrefidセレクターを使用することをお勧めします。また、ブラウザはセレクタを右から左に評価するため、可能な限り子セレクタを使用することをお勧めします（.pageHeader > .cnt > .logo）。したがって、早い段階でDOMトラバーサルを遮断することをお勧めします。ただし、これは、多くの要素/ルールを含む巨大なページに対してのみ完全に正当化されます。

于 2012-05-12T19:24:05.977 に答える
1

可能な限り最短のCSSセレクターを使用する必要があります。これは、必要なものだけを選択するのに十分具体的ですが、他のセレクターを選択する可能性があるほど曖昧ではありません。

CSSセレクターは右から左に読み取られます。つまり、.pageHeader .logoは.logoを検索し、次にDOMを読み取って.pageHeaderのインスタンスが親であることを確認し、その.logo要素を選択します。ただし、.pageHeader .cnt .logoを使用する場合は、すべての.logoが検索され、.cntが親であることを確認してから、.pageHeaderを確認します。.cntチェックは不要です（これは一般的にマークアップによって異なりますが、うまくいけばアイデアが得られます）

さらに良いことに、ロゴにID（#logo）を付け、＃logoを使用してロゴを選択するだけです。IDの方がパフォーマンスが高く、次にクラスなどが続きます。

于 2012-05-12T19:26:44.897 に答える
0

私があなたの意図を正しく理解したなら、 SASSがあなたにより良いサービスを提供すると思います。

于 2012-05-12T19:16:15.720 に答える
0

そもそもhtml5に存在するWebセマンティックでは、タグ、、を使用できます。クラスやIDの代わりにこれを使用する方が適切です。pageHeader、pageFooterなど。

1番目、3番目、および4つのオプションが適切に機能します。

id="logo"のclass="logo"を変更して、次を使用することをお勧めします。

#logo a {}

ロゴは確かにすべてのhtmlコードで一意であるためです。

于 2012-05-12T19:24:18.237 に答える