ID:1RGnEI101QQF さんの質問

708 views

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

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

登録日:2016-08-02 · カテゴリー:HTML・CSS

みんなの回答 4 件

2016-08-02 · ID:xhS66WfrSEYc 報告

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

2016-08-02 · トピ主 報告

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

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

という書き方ですか?

2016-08-02 · ID:W73yO0ck7Mkk 報告

せやで。

2016-08-03 · トピ主 報告

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

2016-08-03 · ID:fdoYrjlqk82G 報告

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

2016-08-04 · トピ主 報告

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

2016-08-03 · ID:2JThzamE4fIz 報告

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

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

2016-08-04 · トピ主 報告

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

2016-08-03 · ID:fdoYrjlqk82G 報告

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

2016-08-04 · トピ主 報告

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

2016-08-03 · ID:nGCNk38Tyg./ 報告

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

2016-08-04 · トピ主 報告

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

2016-08-05 · ID:SYsIMFJsuVH1 報告

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

2016-08-05 · トピ主 報告

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

回答の受付は終了しました。

関連トピック