W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:1RGnEI さんの質問

同名のコンテンツが複数ページで出てくる場合のCSSコーディング・命名について相談です。
例えばトップページ(index.html)に「サイトの特徴」という箇所があるとします。コーディングを
<section class="feature">
<h1 class="feature-title">サイトの特徴</h1>
<div class="feature-body">サイトの説明~~</div>
</section>
こんな感じにしているとします。
そして、利用案内(guide.html)にも同じように「サイトの特徴」を記述したいとします。HTML構造は違うのでコピペせずに。

この場合、利用案内のページではどういう命名にすると、クラス名が衝突せずに済みますでしょうか?良いアイディアがあったら教えて下さい。

みんなの回答 4 件

ID:xhS66W さんの回答

外枠を"id"で括ってクラス名は同じ

ID:1RGnEI

つまり、CSSの書き方は
//トップページ
#home .feature{}

// 利用案内
#guide .feature{}

という書き方ですか?

ID:W73yO0

せやで。

ID:1RGnEI

そうですか・・・JSの処理以外でIDを使うって方法は今やってないし、良い方法とは思えません。すみません。

ID:fdoYrj

jsの処理以外で云々って言いたいことはわかるけど、その解釈は誤りというか拡大解釈せてしまってる。所属組織のコーディング規約でそうなら仕方がないが、そうでないなら正しい認識が必要。

ID:1RGnEI

IDは再利用が利かないし、私の組織以外も禁止してると思いますよ。(有名なGoogleコーディング規約、サイバーエージェントの規約とか)

ID:2JThza さんの回答

同じ内容だけど、別ページでcssでは同じスタイル使わないの?目的がわかんないや。

ともかく自分ならclass使わないなあ。これじゃだめなの?
.feature h1 {}
.guide h1 {}

ID:1RGnEI

私の質問は「トップページと利用規約ページと同じ意味の違うスタイルが出た場合の命名方法」を訪ねているのであって、コメントされてる方法は単にページ名のスタイルなだけだと思います。

ID:fdoYrj さんの回答

サイトの特徴のcssスタイルはページによって変わるの?

ID:1RGnEI

変わります。というか見たことないですか?トップページとそれ以外のページで同じ意味の要素って。
最近だと、トップページをランディング風に縦長にして、コンテンツページにある内容を記述したりしていますし。

ID:nGCNk3 さんの回答

CSSファイル自体を分ける。使わない設定を読み込まずに済むというメリットもある。

ID:1RGnEI

私も数年前はCSSファイルを分けていたのですが、昨今はSassなどを使っていることから、1つのスタイルシートにまとめるのがスタンダードかと思います。複数ファイルに分けるより1つのファイルにまとめた方が読み込み量も少ないし。

ID:SYsIMF

sassがファイルを分けない理由にはならないし、同じクラス名を使いながらそれをIDでラップするのを拒否る意味も不明。効率を重視しながらエラいめんどくさい方法を探すとか矛盾してるよ。

ID:1RGnEI

「1つのスタイルシートにまとめること」の部分を着目していただければ意味不明ではなくなるかと思います。
また、同じクラス名を使う方法自体を問題視しているから、IDでラップする方法を拒否しているわけで、それはこちらの説明不足でした。

最終更新日:2016-08-03 (772 views)

関連するトピックス

ページ上部に戻る