2009-06-29 12 views
2

に言及基本的に、私はCSSのコードで将来の問題や混乱を避けるために最善であるかを知りたい...CLASSやIDの前にHTMLタグ要素(良いか、不要なCSSの練習?)

この:

div#content 
ul#navigation 
div.float-left 

(?それは、これを行うには本当に不要です)

か、単に

#content 
#navigation 
.float-left 

私は大きなプロジェクトでの経験がないので、HTMLとCSSが長くなるうちに、どの方法を使うのが良いか教えてください。

答えて

8

あなたが何をしたいかによって異なります。

#content 

は、ID = "コンテンツ" とすべてに適用されますが、

div#content 

はID = "コンテンツ" と<DIV>に適用されます。

IDはページのすべての要素で一意である必要があるため、これは通常、クラスの問題です。

したがって、スタイル情報が特定のタイプのHTML要素にのみ適用されることがわかっている場合は、要素タグを含めてください。これにより、スタイルが予期せず同じクラス(またはID、しかしいたずら)の異なる要素に適用されるのを防ぐことができます。

1

必要に応じて明示タグを使用し、必要に応じて一般セレクタを使用します。追加された利点の1つは、タグ名を使用するときに適切な要素を選択する可能性が高いことです。何であるかを知るためにマークアップを見ながらプラスこれはあなたを助けるでしょう。この場合

h1.title { font-size:18px; } 
h2.title { font-size:14px; } 
p.title { font-size:12px; } 

、それは複数のクラスを区別するために絶対に必要だ、タグが何であるかを知っている私にだけでなく、便利です。他にも示唆しているように、classNameの場合は実際には複数のルールに使用できるので、IDはページ上の特定の要素を表すために1回のみ使用されるはずです。

実際には、必要なときに明示的なタグ参照を使用してください(複数の.titleクラスに注意してください)。

0

私は次のことを好む:まだあなたのセレクターを「絞り込む」(または1つをオーバーライドする)特定のシナリオのためのオプションを与えている間

/*IDs by themselves*/ 
#content{...} 
#navigation{...} 

/*Classes by themselves (unless the nesting is required)*/ 
.navoption{...} 
.footerlink{...} 

#specialSection.navoption{...} 

これは、再利用のための最大の柔軟性を可能にします。

関連する問題