[翻訳] CSS で wave selector を使用する with 注意_html/css_WEB-ITnose

原文: チルダ CSS セレクター、慎重に使用してください!

最近、私のプロジェクトのいくつかで同様のスタイルの問題が発生しました。これらはすべてチルダ セレクターを間違って使用しており、多くの場所で CSS の肥大化を引き起こします。 Wave セレクターは長い間 CSS セレクターとして使用されており、IE7 でもサポートされています。波状セレクターは、一致するすべての兄弟要素を選択するために使用されます。

例

<ul><li class="something-important">Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li></ul>.something-important {   color: red;}.something-important ~ li {   font-style: italic;   color: grey;}

効果:

ここで、波状セレクターは、.something- important、item2、3、4 のすべての兄弟要素と一致します。

それで、何が問題なのでしょうか？

脆弱なコードを作成するのは簡単すぎます。

私の経験では、wave セレクターを使用する場合、通常、兄弟要素はクラスではなくタイプによって選択されます。これにより、セレクターが何のためにここに書かれているかがわからなくなります。上の例では、 .something- important ~li によって選択された

タグが何であるかはわかりません。 これらの li タグに .not- important を直接追加する方が簡単で直接的です。

一般的に、さらにいくつかの単語を入力し、各要素にクラスを追加すると、将来のメンテナンスで不要なトラブルを大幅に軽減できます。

「コードを書くときは、自分のコードを最後に保守するのは、自分の居場所を知っているサイレントサイコパスであると常に想定してください。人間が読めるコードを書きましょう。」

力を行使してください

編集されるべきです

。

肥大化した CSS コードを避ける

この記事は、波状セレクターの使用を避けるよう皆さんに伝えるだけではなく、CSS の問題が発生したときにこれ以上追加しないように皆さんに知らせることが目的だと思います CSS コードが始まります。これはコードを保守可能に保つ方法ではありません。