Back to Question Center
0

CSS(とHTML)のセマンティックセマンティックルール、間違っているか間違っていますか?

1 answers:

ここで私は最近、このサイト(と同様の)4つの基本的なルールの議論から学んだ要約ですので、私が間違っているか誤解している場合は私を修正してください:

a) CSSでIDを使用しない(またはできるだけ使用しない)

div

の代わりに、 の記事 section . のようにできるだけ多くの記述要素を使用する。

d) あまりにも多くのクラスを使用しないでください。. それはノイズを追加する. "(これを達成する方法はわかりませんが、ほとんどの要素がクラスを必要とするためです. それがセクションであれば、別の セクション が別の場所にあります. 記事 などにも同じです - sub ohm rta. )

これは「哲学的な」質問のようなものですが、目標はすべての読者が利益を得るためにいくつかのことをまっすぐに設定することです。 コンテンツとプレゼンテーションの分離のルール.

February 8, 2018

a)あなたが必要とする数だけ使用しますが、理由のためにIDがあり、目的を果たすことができます. IDの問題は、javascriptのグローバル変数と同じである可能性があります. それは、IDがコーディング中にクロスページに問題を引き起こす別のページで使用されていることを忘れるかもしれません.

私はbとcに同意します.

d)は私のところでより多くの考えを必要とするだろうが、これは事実よりも個人的な好みや意見に挑戦できる.

d)さらに説明すると、下降要素のクラス使用に関する多くの考慮事項があります. すべての要素に固有のクラス名を付ける必要があると言う人もいるかもしれませんので、使いやすさと操作の速さのために直接参照することができます。

. 私のクラス{}. myclass_statement {}. myclass_statement- ハイライト{}

他の人は、親要素の1つだけがクラス名を必要とし、子孫セレクタ

. 私のクラス {}. myclass p {}. myclass p span {}

最初のケースでは物事が冗長になることがありますが、後者のケースでは、気づいていないすべてのスパン要素にプロパティを追加してカスケードに問題が生じる可能性があることを心配する必要があります特性と特異性の.

ブラウザは右から左に評価するため、一度に2つ目の方法による操作の速度に懸念がありましたが、これはChromeで減少している可能性があります(少なくとも. 他のブラウザについてはわかりません).

要素ID

IDスタイリング

あなたは同じくらい多くのIDを使うことができます。IDは、他の要素やクラスと共有されていない特異なクラスとして扱われるべきです. だから、1つのページに1つのスライダーギャラリーしかなければ、#galleryを使うことができますが、複数のギャラリーを使いたいのであれば理想的には両方のi. あなたのCSSでは、ユニークなiと共に共有CSSを使用しました. e

#gallery-main、#gallery-secondary {max-width:33%;}
#gallery-main {背景:#000;}
#gallery-secondary {背景:#FFF;}

ID体験

あなたはまた、IDは 'go tos' iを使ってユーザーのユーザーエクスペリエンスを向上させるのに役立つことに注意する必要があります. e

製品の詳細

Gotoのものを使用するサイトには、数百から数千のIDが付いていることが多く、追加のスクリプトを必要とせずにユーザーが望むコンテンツにすばやく移動する方法として、.

IDの概要

あなたのプロジェクト内で多くのIDを使用するのが理にかなっている限り、IDが多すぎるということはありません.

HTML5記事、セクション、ヘッダー、メインなど.

DIVをバリデーションや検索ランキングのためにDIVで使うのは問題ありませんが、マークアップセマンティックマークアップの場合、プロジェクトごとに異なる可能性があります。. 1つのサイトで1つの記事、いくつかのセクションが必要な場合がありますが、別のサイトでは数百ものコンテンツを使用できます 一般的にはブログであり、たくさんの記事がありますが、ビジネスサイトではDIVをASIDE.

私はあなたが使用することをお勧めしますhttp:// html5doctor. com /あなたのプロジェクトに合った要素を使用する. ちなみにSECTIONはHTML5の開始時にサイトが一般的に使用する最低限のタグの1つですが、多くの人が急ぎ要素を切り取ってスパースするために急いで使用しました. 一般的にHTML5 Doctor上では、DIVはまだ多くの理由から主要な要素であり、HTML5タグはその目的のために使用しないでください.

理想的なクラスの命名

内容に応じた名前クラス、外見ではない これは純粋に個人的な意見であり、あなたのプロジェクトに依存しています. 大量のトラフィックを伴う大規模なサイトの大きなプロジェクトでは、HTMLとCSSのサイズを不必要に大きくすることを避けるため、短いクラス名を使用するようにしてください.

だからあなたは次のようなものを使うことができます:

. コメントボックス下の記事{}. comment-box-below-product {}

を使用するか、. cbba {}. cbbp {}しかし、これも個人的なパフォーマンスになります。SASSやLESSを使用すると、ライブサイトの短縮名をスクリプトとして記述することができます。.

私はいくつのクラスを使うべきですか?

クラスをあまり使わない あなたはあなたのプロジェクトが必要とする数のクラスを使用する必要があります。ここには間違いがなく、あなたはあなたが好きなだけ、.

一般的にはlessを使う方が良い:例えば

これらの要素がサイト全体で同じであれば、クラス名を使用するよりも良いでしょうが、ページごとに異なる場合は、クラスと要素のスタイリングを使用するように選択する必要があります

article aside {}.

あなたの記事が次のようなフォーマットを厳密に使用している場合:

<記事>

記事名記事に関する短いこと
コンテンツはここに<脇に>
  • 関連リンク1
  • 関連リンク2
  • 関連リンク3
    Blahによって発行

次に使用することができます:

article aside {}
記事div {}
記事ヘッダーh1 {}
記事ヘッダースパン{}
しかし、ヘッダーや複数のdivに複数のスパンが必要な場合や、悪いことではないが、CSSのサイズが大きくなるにつれて乱雑になる可能性のある複数の疑似コードを使用する必要があるときに問題が発生する可能性があります

正しい計画

あなたのCSSはあなたのサイトが将来どこになるのかを計画しなければなりません。もしあなたがCSSを増やす必要がないのを見てもらえないならば、できるだけ少ないCSSクラスとIDを使うようになります。この変更を見越してCSSをできるだけアダプタにして、多くのクラス名とIDを使用するようにしてください。要素でこれが可能になります.

"規則"は、意見やコーディングスタイル以外にはほとんどありません. 彼らはそのような危険はありません。厳密なルールとして採用されると危険になり、独自の基準に従って「純粋」または「セマンティック」または「正しい」(または流行語であれば)になるように工夫された方法や仕掛けを展開できます.

いくつかの例:

a)id属性を、スタイリングに絶対必要以上に定義することに害はありません. 彼らはCSSだけではありません。それらはリンクにも重要であり、 "余分な"id属性(e. g. 、すべての見出しとすべてのデータテーブルに)他の人があなたのページの特定の部分にリンクさせる. CSSでは、idセレクタは特定の要素をスタイリングするのに便利です. しかし、ほとんどの場合、クラスセレクタ(または他のセレクタ)を使用する方が、将来的に他の要素が同じスタイリングを必要とする可能性に備えて準備するほうがよい. しかし、大きな問題ではありません。 idセレクタをクラスセレクタに変更し、class属性を追加するのはそれほど難しいことではありません.

b)「記述的要素」は、最近流行っているコーディングスタイルであるが、それに続く具体的な利益を与えない(i. e. おそらくあなたの仲間のデザイナー/作家/開発者にとってより受け入れられるでしょう). これは、IEの古いバージョンで動作させるために余分なコードを必要とするという明確な問題があります. (それほど多くはないが、まだ. )

c)クラス名は、HTMLとCSS(およびJavaScript)のソースコードを読んだ人以外は何の影響もありません. しかし、一般的には、構造(と意味)を反映する名前を、単に提示. class = redのような属性とのようなクラスセレクタは、. ページがレイヤースタイルの場合、少なくともメディアの場合は、赤色をまったく使用せず、おそらくさらに別の色を強調表示に使用しても、赤いは愚かに見えます. しかし、ハートスーツシンボルを赤色で表示するには、を使用している場合、非プレゼンテーションクラス名.

d)必要以上に多くのクラスを設定することに害はありません. 将来的にあなたを助けるかもしれないし、自分の好みに合わせてページをスタイルする訪問者を助けるかもしれない. 一方、クラス名の発明は、class属性が特に必要ない場合はほとんど無意味です. 必要に応じて特定の方法でスタイルを設定できるようにするために、いくつかの構文に対してclassを使用することができます. しかし、必要に応じて属性(およびspanまたはdiv要素)を追加することもできます.

ほとんどすべての要素にクラスが必要だと思うなら、おそらくページデザインとスタイル設定に対するあなたのアプローチに何か問題があるでしょう.