質問です。現在、各ページにcssを振り分けるために個別にスタイルシートを適用させるのではなくbodyに対してidやclassを付けて単一スタイルシートからそれぞれの背景などを指定しています。代表的なところだとWordPressで使う手法なので特に抵抗無く使用しているのですが、実際のところどうなのでしょうか?
いいんじゃない?おれはよくやってるよ
よく使ってます。
回答ありがとうございます。実は会社の先輩(上司ではない)の方から「そのやり方おかしいんじゃないの?」と指摘されまして質問しました。すっきりしました。
つーか、ソッチのほうが疑問だわ。どういう意図で「おかしい」って質問したの?
この業界ピンキリだからおかしいと言われたぐらいでいちいち反応しちゃダメ
おかしくはない。bodyに対してidやclassをつけるのはその分要素が増えるから、cssで分けるよりも処理回数が必要ってことくらいか。あとは実際のコード見ないと分からないけど、それによって無駄に重複するコードがたくさんでてるとか?
要はなんでその方法を使うの?に対して自分なりに説明できればいいんじゃないかな。他が使ってるって理由は、素人思考すぎでしょ。
ページ数が少なければ結構使いますよ。ファイル1つにしたほうがリクエスト減りますしね。
何がどうおかしいの?それ説明できない先輩はおかしいよ。
フレームワーク等を使ったサイトでbodyタグはレイアウトに記載されている場合はまだしも、個別にいじれるのなら問題はない。が、正直自分もbodyに埋め込むのはどうも癪に触るw個人的にどのCSSを噛むのかはラッパーで対応したくなる。
期待する結果が得られるのであれば、方法は何を使ってもいいはず。おかしいおかしくないの世界ではない。ただこのやり方は、メンテナンス性は落ちるね。小分けして、大元のCSSから@importした方がいいとは思う。
トピ主ではないのですが、メンテナンス性が落ちる理由を教えていただけますか?よろしくお願いします。
@importは表示速度に影響するよ
>メンテナンス性が落ちる理由
メンテナンス性が落ちるんじゃなくて、importを使うことによって管理しやすくなるってことだよ。でも、上で言ってるように、今から新規サイトでimport使うのもどうかと思う。ページの読み込み速度を落とすという理由で、バッドノウハウになりつつある。今なら、sassとかlessとかでimportだね。
答えは出てるので端折るが、importの速度遅延は人間が感知できるほどではない。よほど大量でなければ影響はまずない。まぁsassやlessを使った方がより良いというのは同意。ただし後任がそれらを使えるという前提ならの話。
>importの速度遅延は人間が感知できるほどではない。
ちょっと乱暴な意見に思えます。
リクエスト回数は少ないほうがいいに決まってる。
知ってるとは思うが、cssのimportは、リクエスト数を増やしてしまうこと、パラレルダウンロードされないこと、の2点の懸念がある。特に後者の理由が大きい。サイトの規模にも影響されるが、CSSのコード量、運用方法のありかたで遅延を体感する可能性はある。
仮に体感するほどのものでなかったとしても、「速度遅延は人間が感知できるほどではない」が「やる必要がない」にはならない。CSSだけでいっても、「importしない」「余分な改行、スペース、タブを取り除く」「gzipに圧縮する」「リクエスト数を減らす」「キャッシュを効率よく管理する」など、速度向上のいろんなアプローチがあるが、基本的には、そのひとつひとつは微々たるもの。でも、その積み重ねが、実際の読み込み速読、レンダリングスピードを形成している。サイトのパフォーマンスを向上させるアプローチは、そのひとつひとつの原因を丁寧に取り除く、軽減することだと思う。1要因だけで考えることじゃない。
「メンテナンス性が落ちる」ということはないんですね。ありがとうございます。
「大元のCSSから@import」してbody(ページ)毎に背景を変更する方法を教えてください。よろしくお願いします。
メンテナンス性を犠牲にしてまでもスピードを追求する必要のあるシビアなサイトがそうあるとは思えない。CSSなど画像に比べたら遥かにデータ容量は小さいし、ここに気を使うぐらいなら画像を減らした方がずっとマシ。
私も別に@importはメンテナンス優先なら使ってもいいと思うね。日本のサイトなんてほとんどが情報詰め込みのゴチャゴチャしてるんだから。突き詰めれば所詮、英語だけの欧米のシンプルなサイトの憧れだよ。
> メンテナンス性を犠牲にしてまでもスピードを追求する必要のあるシビアなサイトがそうあるとは思えない。
importが運用においてのベストプラクティスならその理論は正しいね。でも実際は、ベストプラクティスでも何でもないって話かと。
だから、そもそもの@importで各ページにcssを振り分け(割り当て)る方法を教えてくださいよ。
【個別にスタイルシートをlinkで読み込む】index.html -> index.csspage01.html -> page01.csspage02.html -> page02.css
【bodyにidを付与して上書き】index.html -> style.css body{ background: red; }page01.html -> style.css #page01 body{ background: blue; }page02.html -> style.css #page02 body{ background: yellow; }
【@import】???
@importを使うってことは、複数ファイルに分けるってこと。html上は、【個別にスタイルシートをlinkで読み込む】と全く同じだけど、cssの中でサイトやカテゴリに共通するスタイルをimportするってこと。つまり、ページ独自のスタイルは、page01.cssなどに直接書いて、共通スタイルは外部ファイルで統一する。
ってか、考えて分かるレベルだから思考を放棄すんなって。
ちなみに、style.cssにすべてのファイルをimportしてもいける。まぁ、わかるよね。
【@import】index.html -> index.css @import url(’sytle.css’) @import url(’indexSytle.css’)page01.html -> page01.css @import url(’sytle.css’) @import url(’page01Sytle.css’)page02.html -> page02.css @import url(’sytle.css’) @import url(’page02Sytle.css’)
思考放棄?え?ってこと?なにこれ?ページ毎の振分けの話をしてるのであって、複数cssを読み込むのにlinkでするか、@importするかって話ではないぞ。
linkで共通のcssとページに合わせた個別のcssをそれぞれ読むべばいいでしょ。
index.html -> sytle.css indexSytle.csspage01.html -> sytle.css page01Sytle.csspage02.html -> sytle.css page02Sytle.css
もしや、importってhead内でしか呼べないと思ってる?linkはhtmlのhead内でしか呼べない。importはcss内で呼べる。そこからくる違いわかる?
> 【@import】> index.html -> index.css @import url(’sytle.css’) @import url(’indexSytle.css’)> page01.html -> page01.css @import url(’sytle.css’) @import url(’page01Sytle.css’)> page02.html -> page02.css @import url(’sytle.css’) @import url(’page02Sytle.css’)
と書いたんだから、もちろん分かる。違いはなに?ページ毎の振分けの仕方の話をしてるんですよ?
正しいかは知らんけど、HTML5之場合はそれに近い方法はよく使ってる。data属性+属性セレクタで判別して、スタイルを替えたり上書きしたりしてる。自己満の域は出ないけど、classに羅列するよりもこの方が綺麗な気がするし可読性もいい。data属性はjQueryMobileとかで使われてるやつ。
<body data-column="2" data-pagetype="toppage"> 本文 </body> --- /*カラム毎のスタイル*/ body[data-column="1"] .main{width:100%;} body[data-column="1"] .side{width:100%;padding-top:30px;} body[data-column="2"] .main{width:70%;} body[data-column="2"] .side{width:30%;} /*ページ種類毎のスタイル*/ body[data-pagetype="popup"] .hoge{/*設定*/} body[data-pagetype="toppage"] .hoge{/*設定*/} body[data-pagetype="second"] .hoge{/*設定*/}
何でこうもトピの主旨が分からずにコメするかね。
各ページ固有のスタイルがどれだけあるかで、その方法は変わる。例えば、bodyの背景やごく一部のスタイルが固有であるならトピ主のやり方「bodyに対してidやclassを付与し共通のcssで指定」で問題ない。固有のスタイルがある程度の分量があるのであれば、個別のスタイルシートを用意し各ページに合わせて複数linkまたは@importで読む込む。
複数のcssを読み込むのに、linkか@importか、パフォーマンス、メンテナンス、可読性がどうこうなんて話は別トピでやれ。
お ま え お っ さ ん だ な
お れ は お っ さ ん だ
お っ さ ん 即 レ ス あ り が と う
お な じ く 即 レ ス あ り が と う
みんなの回答 10 件
いいんじゃない?おれはよくやってるよ
よく使ってます。
回答ありがとうございます。
実は会社の先輩(上司ではない)の方から「そのやり方おかしいんじゃないの?」と指摘されまして質問しました。
すっきりしました。
おかしくはない。
bodyに対してidやclassをつけるのはその分要素が増えるから、cssで分けるよりも処理回数が必要ってことくらいか。
あとは実際のコード見ないと分からないけど、それによって無駄に重複するコードがたくさんでてるとか?
要はなんでその方法を使うの?に対して自分なりに説明できればいいんじゃないかな。
他が使ってるって理由は、素人思考すぎでしょ。
ページ数が少なければ結構使いますよ。ファイル1つにしたほうがリクエスト減りますしね。
何がどうおかしいの?
それ説明できない先輩はおかしいよ。
フレームワーク等を使ったサイトでbodyタグはレイアウトに記載されている場合はまだしも、個別にいじれるのなら問題はない。
が、正直自分もbodyに埋め込むのはどうも癪に触るw個人的にどのCSSを噛むのかはラッパーで対応したくなる。
期待する結果が得られるのであれば、方法は何を使ってもいいはず。おかしいおかしくないの世界ではない。ただこのやり方は、メンテナンス性は落ちるね。小分けして、大元のCSSから@importした方がいいとは思う。
正しいかは知らんけど、HTML5之場合はそれに近い方法はよく使ってる。data属性+属性セレクタで判別して、スタイルを替えたり上書きしたりしてる。
自己満の域は出ないけど、classに羅列するよりもこの方が綺麗な気がするし可読性もいい。data属性はjQueryMobileとかで使われてるやつ。
<body data-column="2" data-pagetype="toppage">
本文
</body>
---
/*カラム毎のスタイル*/
body[data-column="1"] .main{width:100%;}
body[data-column="1"] .side{width:100%;padding-top:30px;}
body[data-column="2"] .main{width:70%;}
body[data-column="2"] .side{width:30%;}
/*ページ種類毎のスタイル*/
body[data-pagetype="popup"] .hoge{/*設定*/}
body[data-pagetype="toppage"] .hoge{/*設定*/}
body[data-pagetype="second"] .hoge{/*設定*/}
何でこうもトピの主旨が分からずにコメするかね。
各ページ固有のスタイルがどれだけあるかで、その方法は変わる。
例えば、bodyの背景やごく一部のスタイルが固有であるなら
トピ主のやり方「bodyに対してidやclassを付与し共通のcssで指定」で問題ない。
固有のスタイルがある程度の分量があるのであれば、個別のスタイルシートを用意し
各ページに合わせて複数linkまたは@importで読む込む。
複数のcssを読み込むのに、linkか@importか、パフォーマンス、メンテナンス、可読性がどうこうなんて話は別トピでやれ。
関連するトピックス