2011-12-23 9 views
2

私は自分のCSSを自分のHTMLから可能な限り切り離す方法を工夫しています。これを行う方法は、基本的なレイアウト要素を標準的な方法でHTMLに書き込むことです。そのため、異なるCSSファイルでは、マークアップがどのように動作しているかを正確に知ることができます。HTMLレイアウト要素のクラス名の基準は?

だから、レイアウト要素に名前を付ける方法と、それをどのように配置するのかに関する基準のセットがあるかどうかは疑問でした。次のようにマークアップするために私のページを賢明な方法は、(私はHTML5の要素を使用してthe theory that you should never use IDs for CSS rulesを以下てることに注意してください)のようになります。

<body> 
    <div class="container"> <!-- central "squeeze" for the content --> 
    <header> 
     <img class="logo" /> 
     <nav class="primary"></nav> <!-- main navigation --> 
    </header> 
    <aside class="pre"></aside> <!-- left column --> 
    <article class="main"></article> <!-- central main content --> 
    <aside class="post"></aside> <!-- right column --> 
    </div> 
</body> 

多くのページが、この基本的なレイアウトに似たものを使用します。しかし、あなたが見ることができるように、 "コンテナ"または "プライマリ"クラスの名前は、列のための<aside>の使用と同様に、大きく変わるでしょう。また、一部の人が<header>の後に<nav>の要素を入れたり、<article>要素の中の列の要素を配置したりするような、順序の違いが考えられます。

一般的に使用されているレイアウト要素の順序付けと命名を標準化するために行われた作業について知っている人はいますか?マイクロフォーマットのようなもの?

+3

クラス名には厳密な規則や一般的に受け入れられている標準はなく、ここではどのマイクロフォーマットも使用されていません。あなたのサイトに最も適したものを作ってください。CSS用のIDを使用することを恐れないでください。理由のために、IDセレクタをその言語に置きます。 – BoltClock

+0

「CSSルールにIDを使用しないという理論はどこから来たのですか?そのことを聞いたことがない、私はそれが理にかなっているとは思わない。 IDは、とりわけ、特定の理由のために特に有用である。 –

+2

IDを使わないという理論:https://github.com/stubbornella/csslint/wiki/Disallow-IDs-in-selectors; http://oli.jp/2011/ids/ http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/これは、大規模なプロジェクトでCSSを使用することについて多くのことを知っている人が書いた非常に健全な理論です。私は間違いなくそれに個人的に同意します。 –

答えて

3

絶対的な基準はないと思いますが、2つのウェブサイトは同じではありません。

大丈夫、いくつかありますが、それはポイントではありません。 :)

とにかく、CSSはその単一のウェブサイトをマークアップするために作られているので、あなたはそのような詳細でそれを実際にデカップリングすることはできません。あなたはあなたのウェブサイトをプラグインして、それらのナビゲーションコンテナをすべて配置することができる準備が整ったCSSシートを見つけることはできません。

私は最良の方法は自分自身のための標準を思いついてそれに固執することだと思います。私はあなたが頻繁に使用されるが、非常に抽象的な 'コンテナ'よりも良い名前を見つけることができることを願っています。そしておそらく、ある日、それはデファクトスタンダードになるでしょう。

+0

私はこれが当てはまると思われます。多くのウェブサイトでは、非常によく似たレイアウト(中央に絞ったコンテンツ、ヘッダーの上にヘッダー、メインのナビゲーション、メインのコンテンツ、オプションの左または右の列)が使用されているため、標準を持つことは可能ですこのための最高のマークアップ。また、CSSとHTMlドキュメントが標準に従うと、そのようなドキュメントを理解し編集する作業がフロントエンド開発者にとってより簡単になります。 –

+0

私は自分のスタンダードを書いて、既存のものがないときにブログなどに公開しますが、他の誰かが有用なことを知っている場合には、この質問をもう少し長くしておきます。 –

関連する問題