css - スタイルを定義する最良の方法は何ですか? クラス名または相対パス?

Question

今週、新しいプロジェクトに参加しましたが、(すべての .css ファイルを作成する) デザイナーが、私が慣れ親しんでいる方法とは異なる方法で css を使用していることに気付きました。私は主に、クラスとクラス名によって参照される要素を持つことに慣れています。たとえば、定義があります

.myClass { display:block; }

class="myClass"私の要素で属性を使用します。

このデザイナーは、この種のリファレンスを使用してデザイン全体を構築します。

form#myForm div a { display:block; }

または類似。これにより、id=myForm のフォーム内の div 内のすべてのアンカーが取得されます。

どれが最良のアプローチですか？主にクラスを使用していますか、それとも主にこの他のアプローチを使用していますか (私はそれを呼び出す方法がわかりません)?

ありがとう！

score 2 · Accepted Answer

奇妙なことに、まだ誰も回答に含めていないものがありますが、それはすべて、選択にどれだけ具体的にしたい/する必要があるかによって異なります.

基礎：

ページ上の複数の要素を選択する場合は、クラスセレクターを使用するだけで機能します。

.non-unique-elements{
    // some style
}

もう少し具体的にしたい場合、またはページ上の一意の要素を選択したい場合は、IDセレクターを使用します。

#unique-element{
    // some style
}

IDさて、あなたの同僚が行ったように、他の属性を持つ要素のみを選択することで、さらに具体的にすることができます。たとえば、特定のクラス名を含むが、タイプも同じであるすべての要素を選択したい場合があります。form

form.some-class{
    // style
}

したがって、次の例を検討してください。

.some-class{

}

以下によってオーバーライドされます。

#some-id{

}

オーバーライドされる

div#some-id{

}

score 0 · Accepted Answer

あなたが書いているcssプロパティが、htmlタグとその親（および兄弟）との関係に依存するかどうかの問題です：

説明する、

ページ内の一部のテキストの色を赤に設定したい-> クラスのみを使用.redtext

特定の divだけで特定のテキストの色を設定したい->.mydiv .redtext

すべての入力の幅を特定のフォームだけに設定したい->#myform input

長い css セレクターを使用すると、ページ構造に大きく依存するため脆弱になることに注意してください。