スタイルシートの記述方法に関して。

質問

スタイルシートで、基本的なデザインは一通り出来ると思っています。

実は今サンプルのスタイルシートを修正しています。
スタイルシートの記述方法に関して、質問があります。

サンプルのスタイルシートの記述方法ですが、要素の記述にて上位の要素を全て記述し、最終的な要素を記載しています。

例として

一番外側の要素を：#wrapper
ヘッダー：#header
コンテンツ：#content
メインコンテンツ：#main
サイドコンテンツ：#side

とします。
自分の場合であれば、スタイルシート内の記述は

div#wrapper {
width: 500px;
margin: 0px auto;
padding: 0px;
}

div#header {
width: 480px;
margin: 0px auto;
padding: 0px;
}

div#content {
width: 480px;
margin: 0px;
padding: 0px;
}

div#main {
float: left;
width: 300px;
margin: 0px;
padding: 0px;
}

div#side {
float: right;
width: 170px;
margin: 0px;
padding: 0px;
}

と記述していましたが、サンプルでは以下の通りに記述されています。

div#wrapper {
width: 500px;
margin: 0px auto;
padding: 0px;
}

div#wrapper #header {
width: 480px;
margin: 0px auto;
padding: 0px;
}

div#wrapper #content #main {
float: left;
width: 300px;
margin: 0px;
padding: 0px;
}

div#wrapper #content #side {
float: right;
width: 170px;
margin: 0px;
padding: 0px;
}

と記述されています。
上記の記述に、技術的に有利になる点は有るのでしょうか、単に CSS の記述を判りやすくしているだけのように思えます。
上記の記述方法は、一見判りづらいと思いますが、記述している要素が確実に判ると思います。
ただ、その反面 CSS のソースが肥大化します。

上記の記述方法に、他にメリット、デメリットがあるのかアドバイスを頂ければ幸いです。
ちなみに、参考にさせて頂いてる CSS のソースは海外で作られたソースになります。
海外では一般的に使われている記述方法になるのでしょうか。

回答No.2

snowize · ベストアンサー

あくまでもCSSは主である(X)HTMLに従うものであるので、CSSは記述の分かりやすさよりも論理的正確さを問う物だと認識しています。
ついでに言っちゃえば、一言コメントを書けば「記述している要素が確実に判る」なんてメリットは吹いて飛んでしまうのですが、でもまあ個人サイトでしたら質問者様のような書き方でもサンプルのような書き方でも好きな方で構わないと思います。
自分はマークアップを完全にしてから項目を洗い出しますので、どちらかというとサンプルのような書き方に必然的になることが多いでしょうか。

お礼

snowize 様

アドバスをありがとうございます。

>自分はマークアップを完全にしてから項目を洗い出しますので、どちらかというとサンプルのような書き方に必然的になることが多いでしょうか。

自分もそのようにして作っています。
ただ、今まで漠然と CSS を書いていただけで、今回のサンプルを見て疑問を持ち質問しました。
また、サンプルをよくよく見てみると、これ判りやすいなと思い、他の方はどうされているのか疑問に思い質問させて頂きました。

基本的に独学で一人で作業を行っている為、参考になるのが書籍と web の情報だけにため、今回質問させ頂きとても参考になりました。

回答No.4

caz04

サンプルはわかりやすいからそのように記述しているのだと思います。
ご質問の通り、CSSのデータ量は大きくなるので、質問者様のやりかたで良いと思います。

他の見方としましては、親要素を追加した方が、比重が重くなります。
例えば、共通CSSのプロパティを他ページで少しずつ変える等の場合、プロパティの上書きをしますが、
質問者様の記述では上書きされない場合があります。その際に親要素も記述して、重みを付け、適用させる場合があります。

簡単に説明しますと、例えば

div#content #main　{
float: left;
width: 300px;
margin: 0px;
padding: 0px;
}

に

div#main　{
margin: 20px;
}

と後から上書きしても適用されません。その場合、

div#content #main　{
margin: 20px;
}

または

div#wrapper #content #main {
margin: 20px;
}

とすると適用されます。

若干この説明だと用途が微妙ですが、意外とそういったケースが発生します。（クラスを付加したりした場合などに）
まぁ、!important 使えば済むのですが。

お礼

caz04 様

アドバイスをありがとうございました。

>他の見方としましては、親要素を追加した方が、比重が重くなります。

実は、今現在もたとえば単に、

p {
font-size: 100%;
}

としおり特定の領域 #main に対して文字サイズを変更したい場合は、

div#main p {
font-size: 90%;
}

としています。現在混在している状態です。

今回サンプルを見て、全て親子関係を明示した方が判りやすいかなと感じた次第です。

ただ現状でも CSS ファイル複雑・肥大化してきており、CSS 等は少しでも容量を減らしたいかなと思っており、矛盾する件で積極的に、親子関係を明示した方が良いのか、必要な部分だけで良いのか判らず、質問させて頂いた次第です。

皆様のご意見とても参考になっています。

回答No.3

yambejp

idの子供のidは必要でしょうね。

css自体は、いろんなhtmlから呼ばれたり、cssにインポートされたり
製作者の意図していない使用がされる可能性もあります。
とくにmain、side、contentなんて一般語を使っていれば思わぬところで
トラブルにつながることもあるでしょう。

そういった意味で、明示的に親子関係を書く方式は大きなメリットがあります。

お礼

yambejp 様

アドバイスをありがとうございます。

>idの子供のidは必要でしょうね。

この言葉に納得しました。とてもすっきりしました。
今後は、サンプルのように親子関係が判りやすいように記述したいと思います。

回答No.1

noname#66720

例えば複数のページに同じcssを適用する場合はメリットがあるかもしれません。
まぁ私はどちらかというとCSSはできるだけ軽いほうが良いと思っていますし、個人で作っているページなので上記のような書き方だとidだけで全部済ませてしまいますけど。

お礼

metametamu 様

アドバイスをありがとうございます。
やっぱり、メリットは管理面だけですかね。

質問には書いていませんでしたが、サンプルの CSS はブログ CSS でした。