私は自分の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>
要素の中の列の要素を配置したりするような、順序の違いが考えられます。
一般的に使用されているレイアウト要素の順序付けと命名を標準化するために行われた作業について知っている人はいますか?マイクロフォーマットのようなもの?
クラス名には厳密な規則や一般的に受け入れられている標準はなく、ここではどのマイクロフォーマットも使用されていません。あなたのサイトに最も適したものを作ってください。CSS用のIDを使用することを恐れないでください。理由のために、IDセレクタをその言語に置きます。 – BoltClock
「CSSルールにIDを使用しないという理論はどこから来たのですか?そのことを聞いたことがない、私はそれが理にかなっているとは思わない。 IDは、とりわけ、特定の理由のために特に有用である。 –
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を使用することについて多くのことを知っている人が書いた非常に健全な理論です。私は間違いなくそれに個人的に同意します。 –