1

私はmodernizrを試しています。同じスタイルシートで「さまざまな機能の賛成/反対」を混在させても問題ありませんか?もしそうなら、それらを混在させる方法に関する一般的なルールはありますか?

たとえば、これは問題ないですか、それとも悪い習慣ですか。規則を混在させると混乱が生じるのではないかと思います。また、必要な場合にのみ例外を使用して、一般的に 1 つの規則に固執する方がよいのではないかと考えています。または、すべての例外を回避するような方法でプログラムすることが重要かどうか。

    .no-borderradius .some-element {
    ...
    }

    .boxshadow .some-other-element {        
    ...
    }
4

1 に答える 1

3

それは本当に状況に依存します。つまり、スタイルの依存関係があるかどうかです。

たとえば#box、border-radius が適用されている場合はパディングが必要で、ブラウザがサポートしていない場合は必要ありません。その場合、次のことができます。

.border-radius #box {
  border-radius: 5px;
  padding: 5px;
}

(ベンダー接頭辞がないことは無視してください。)

ただし、たとえば、見た目を強調するだけの微妙なグラデーションがあり、それに依存するものがない場合は、次のようにすることができます。

#box {
  background: white linear-gradient(...);
}

それをサポートするブラウザーは表示されますが、サポートしないブラウザーは劣化した白い外観を表示するだけです。

別の例では、ボックス シャドウが正常に適用されたかどうかに応じて、異なる境界線の色が必要です。box-shadowless スタイルをセットアップし、box-shadow がサポートされている場合はオーバーライドできます。

#box {
  border-color: gray;
}
.box-shadow #box {
  box-shadow: black 0 0 5px;
  border-color: white;
}

逆の方法でもかまいませんが、私の意見では、最初に劣化したスタイルを与えてから、それを強化する方が理にかなっています. この例では、.no-box-shadow境界線の色をオーバーライドしているため、使用する必要がないことがわかります。また、灰色の境界線を持つ box-shadow が視覚的に許容できる場合は、box-shadow スタイルを#box(の代わりに.box-shadow #box) 下に配置できます。

結論として、「一貫性」を保つためだけにコードをクラスで乱雑にする必要はなく、スタイルのセマンティクスについて考えるだけで済みます。また、スタイルが JavaScript によって生成されたクラスに大きく依存している場合は、JavaScript を無効にしたページを想像してみてください。

于 2012-06-03T13:42:32.373 に答える