CSSの真のベストプラクティスは何ですか:IDとクラスまたはセレクターの使用?
結果/送信成功ページのスタイルを設定するためにフォームが送信されたときにPHPで必要となるスタイルシートがあり、IDとクラスを使用する、またはセレクターを使用するためのCSSのベストプラクティスは何でしょうか。
CSSの真のベストプラクティスは何ですか:IDとクラスまたはセレクターの使用?
結果/送信成功ページのスタイルを設定するためにフォームが送信されたときにPHPで必要となるスタイルシートがあり、IDとクラスを使用する、またはセレクターを使用するためのCSSのベストプラクティスは何でしょうか。
基本的に、クラスは、繰り返される可能性がある、または繰り返される可能性のある一般的なページオブジェクトに使用する必要があります。IDは、ページ上に他のどこにも存在しない一意の要素がある場合にのみ使用する必要があります。
これを説明する1つの方法は次のとおりです。
クラス名またはIDを要素に追加しても、デフォルトではその要素には何も影響しません。
これは私を初心者として引っ掛けたものです。あなたは1つのサイトで作業していて、特定のクラス名を適用すると問題が解決することを理解しています。次に、同じ問題のある別のサイトにジャンプして、同じクラス名で修正しようとします。クラス名自体に魔法の特性があると考えて、機能しなかったことを確認します。
クラスとIDには、それ自体でスタイリング情報が含まれているわけではありません。それらをターゲットにしてスタイリングを適用するには、CSSが必要です。
クラスにはブラウザに特別な機能はありませんが、IDには非常に重要なトリックが1つあります。これは、URLの「ハッシュ値」です。http://yourdomain.com#commentsのようなURLがある場合、ブラウザはIDが「comments」の要素を見つけようとし、ページを自動的にスクロールしてその要素を表示します。ここで重要なのは、ブラウザがその要素を表示するために必要な要素をスクロールするため、通常の本文内でスクロール可能なDIV領域などの特別なことを行った場合、そのdivもスクロールされることです。
これが、IDを完全に一意にすることが重要である重要な理由です。したがって、ブラウザはスクロールする場所を認識しています。
1つの要素にIDとクラスの両方を含めることを妨げるものは何もありません。実際、それはしばしば非常に良い考えです。たとえば、WordPressコメントリストアイテムのデフォルトのマークアップを考えてみましょう。
<li id="comment-27299" class="item">
ページ上のすべてのコメントのスタイルを設定するために適用されるクラスがありますが、一意のID値もあります(WordPressによって動的に生成されます。十分にうまくいきます)。このID値は、直接リンクに役立ちます。これで、特定のページに特定のコメントを簡単にリンクして直接行うことができます。
JavaScriptの人々は、おそらくクラスとIDの違いにすでにもっと調和しています。JavaScriptは、特定のページ要素が1つしかないことに依存しています。そうでない場合、一般的に使用されるgetElementById
関数は信頼できません。jQueryに精通している人なら、ページ要素にクラスを追加したり削除したりするのがいかに簡単かをご存知でしょう。これはネイティブであり、jQueryの組み込み関数です。IDにそのような関数が存在しないことに注意してください。これらの値を操作するのはJavaScriptの責任ではありません。それは、価値があるよりも多くの問題を引き起こすでしょう。
ご覧のとおり、クラスとIDは非常に重要であり、必要なスタイル設定とページ操作を毎日それらに依存しています。ただし、それらは慎重かつ意味的に使用する必要があります。
これは、次のようなことを避けることを意味します。
<a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>
この要素がリンクであり、アンカー要素であることはすでにわかっています。すでにタグを介してスタイリングを適用できるため、ここでクラスを適用する必要は特にありません。
また、これを避けてください:
<div id="right-col">
ページには右の列が1つしかない可能性があるため、ここではIDが適切に使用されていますが、名前は不適切です。要素がどこにあるか、どのように見えるかではなく、要素のコンテキストを説明してみてください。ここでの「サイドバー」のIDの方が適切です。
選択は、HTMLがどのように構造化されているかによって異なります。特定のスタイルが複数回使用される場合は、クラスを使用します。スタイルが特定のタグにのみ使用される場合は、IDを使用します。セレクターに関しては、できるだけ短くするのがコツです。
p
クラスは、すべてのタグなど、ページ上またはWebサイト全体で複数の要素をスタイリングする場合に使用する必要があります。IDは、ラッパー、コンテナなどの一般的なレイアウトのスタイルを設定するために、ページごとに1回だけ使用する必要があります。
一意の要素にIDを使用し、クラスを使用してスタイルをより一般的に適用します。
通常、フォームはすべて一意であるため、フォームはIDを使用する必要があります。その中のすべてがクラスを使用でき、必要に応じてIDとクラスを組み合わせてそれらを具体的にターゲットにすることができます。
HTML:
<form id="member-signup">
<div class="align-left">
<input type="text" class="large" />
</div>
</form>
CSS:
#member-signup {
width:600px;
float:left
}
.align-left {
text-align:left;
float:left;
}
input.large {
width:300px;
}
#member-signup input.large {
width:450px;
}
HTML5のセマンティクスでは、セレクターはレイアウトベースのスタイリングを最初に行うための自然な方法です。クラスは、要素にフレアを追加したり、テンプレートの「論理フラグ」を最小限に抑えたりするのに最適です。スクリムオーバーレイ、ページ名、ラッパーなどの特別な要素のIDを保存します。1ページにIDのインスタンスは1つだけ存在する必要があります。これは、コードで生成されたマークアップを作成するときに常に覚えておく必要があります。ページごとに複数のIDがあると、後で厄介なバグが発生する可能性があります。単純なバグですが、発見するのが難しい場合があります。