マークアップの正しい書き方、特に HTML5 のロールアップに非常に興味があります。そして、コンテンツの見た目について何も言わないマークアップを書くのは本当に難しいことに気づきました。そして、オブジェクト指向の CSS とクラスの使用について読んだ後では、決して簡単ではありません。私は、変数とコードの論理構造が鍵となるプログラミングの世界から来ました。そのことを念頭に置いて、このトピック全体に関するいくつかの考えを以下に示します。
クラスを再利用して、いくつかのことを試しました。たとえば、カラー パレット用のクラスのセットを作成しました。そのような：
.color_pr1 {
color: blue;
}
.color_pr2 {
color: red;
}
また、次のようなクイッククラス：
.left {
float:left;
}
.right {
float:right;
}
.bold {
font-weight:bold;
}
「マークアップはコンテンツの表示方法を決定するべきではない」という古い哲学では、.left .right や .bold などのクラスは絶対に使用しないでください。しかし、それらは再利用可能ですよね？再利用可能なコードは素晴らしいです！しかし、次のような肥大化したマークアップになってしまうことがわかりました。
<div class="color_pr1 bold right">
<p>Lorem ipsum</p>
</div>
または、次のようにマークアップを書くこともできます。
<div clas="right">
<p class="color_pr1 bold">Lorem ipsum</p>
</div>
どう見ても雑だと思います。親 div に ID またはクラスを与え、その ID/クラス内に特定のサブクラスを CSS で記述しないのはなぜですか?
ここでは一貫性が重要です。一貫性がなければ、マークアップが肥大化し、プロジェクトのワークフロー全体が損なわれてしまいます。
通常は、SASS の変数として一連のカラー パレットを作成します。サイズの基本セットで、h1 から h6 にデフォルト値を割り当てます。次に、これらを少し混同する必要がある場合は、タグに新しい色クラスを割り当てるか、次のような CSS を作成します。
#somediv, .someclass {
h1 {
color: $color_pr1;
}
}
この方法は、膨大な量のクラスが関連付けられたマークアップで終わるよりはましではないでしょうか? このシナリオはどうでしょうか。レイアウトは次のようになります。
2013.03.15
いくつかの画像
音楽ニュースビートルズが再結成
Lorem ipsum dolor sit amet
この例では、これは正確なマークアップです。
<h3>15.03.2013</h3>
<img>Some image</img>
<h5><strong>Music news</strong></h5>
<h1>The Beatles reunited</h1>
<p>Lorem ipsum dolor sit amet</p>
まず、いつ<h>タグを使うのが適切でしょうか? 最初の h3 タグは日付で使用されます。それは本当に見出しですか？h5タグはどうですか？本当は見出しじゃないの？記事が公開されるカテゴリを定義します。<strong>タグを使用する必要がありますか? そうではありません。マークアップに関しては、それほど重要ではありません。そのように設計されているため、太字のテキストです。
これはより良いアプローチでしょうか？
<section id="news_articles">
<article>
<h3>15.03.2013</h3>
<img>Some image</img>
<h5>Music news</h5>
<h1>The Beatles reunited</h1>
<p>Lorem ipsum dolor sit amet</p>
</article>
</section>
そして、このように見える CSS を書きますか?
*/ デフォルト値 */ h1 { font-size: 16px; }
h3 {
font-size: 12px;
}
h5 {
font-size: 10px;
}
*/ 特定の ID サブクラス */
#news_articles {
h3 {
font-weight: bold;
}
}
つまり、単純なマークアップを書くことと、ここでの私の主な問題である CSS コードを再利用することのバランスを取ることに本当にかかっています。これについてどう思いますか？