-
ID:Q3EiWm さんの質問

CSSのclassの付け方で悩んでいます。複数のページで同じcssファイルを共有する際、class名ってどういう風につけてますか？
自分の場合は、bodyにそのページ固有のclassをつけて区別してるんですが、例えば、<body class="under">みたいにするので、CSS側でいちいちはじめに.underとかってつけなくちゃいけないのがすごく面倒です（SCSSとかは使ってません）。かといって、bodyにはclassは何も付けずに、直接.under-text-boxみたいにハイフンで繋いでいくのもclass名が長くなるわ結局面倒だわで...。
皆さんどんな風にされてますでしょうか？？初歩的なことでお恥ずかしいのですが、ぜひ教えて下さい。

みんなの回答 7 件

ID:KrP1.V さんの回答

私は2年前ほどコーディングをやっているときは”underTxtBox”みたいなのが流行りだったとおもいます。最近はコーディングをやっていないのですが、うちのオフィスの外国人フロントエンドディベロッパーはこちらのルールを使っているようです。ベストかどうかはわからないですがご参考までに。

BEMという命名規則

http://blog.ruedap.com/2013/10/29/block-element-modifier
ID:KrP1.V

↑すいません。。質問の答えになってないかもです・・・
ただ、たとえば1年後、自分じゃない誰かが改修しないといけなくなったときとかにはこちらのルールだと便利みたいです。

ID:Q3EiWm

ありがとうございます。つまり、bodyで区別するのではなくて各要素で、という意味ですよね。

ID:OKQRfO さんの回答

なぜSCSS（SASS)とかを使わないの？
ID:Q3EiWm

短時間で終わるものや、パーツを使い回すことがあまりないコーディングが多くて、わざわざSCSSを使うほどではないのかなと思い、これまで使ってきませんでした。そろそろ勉強しないといけない...とは常々思ってます。
例えばSCSSを使う場合は、どんなclassの付け方をするのが一般的なんですか？？SCSSを使おうが使うまいが、classを付けるルールは自分で決めるものだと思ってたんですが、そういうことではないんでしょうか。

ID:OKQRfO

モジュール単位でCSSを記述するときに例えば、ニュースのエリアがあったとして.news、.news-list、.news-list-itemと言ったクラスを用意するときにnewsもlistも一回しかかかなくてすむ。
競合を避けるにはできるだけ具体的なクラス名にするしかないので、長くなるのは仕方ない。
それはBEMじゃなくても一緒だとおもう。

ID:Q3EiWm

ちょっと分からないんですが、.news、.news-list、.news-list-itemというような具体的なclass名を使えば競合しずらいし便利だけど長くなるし面倒くさいよね、でもSCSS使えば楽になるよ、っていう意味ですか？？
今回の質問とSCSSを勧められる関係性が分かりません。

ID:OKQRfO

＞CSS側でいちいちはじめに.underとかってつけなくちゃいけないのがすごく面倒です
面倒だから設計を悩んでるなら面倒な部分を解消すればいいという回答です。

ID:Q3EiWm

なるほどわかりました、ありがとうございます。

ID:OKQRfO

bodyのクラスで振り分けるという事に関しては、例えばカテゴリー毎にスタイルはほぼ一緒で色だけが違う場合など、bodyのクラスで振り分けたりします。
その場合は、共有CSSに色以外のスタイルを記述して、ページ独自のネームスペースがあり、他のページで使用しないスタイルであればCSSファイル自体を分ける
モジュール単位で〜っていう設計は実際デザインがちゃんと統一性のあるモジュールで設計されてないと無理な話なので、それがちゃんとしてれば多分悩む事もない。

ID:Q3EiWm

なるほど、例えば、テンプレートの色だけを変える時にbodyにclass付けるのは問題なさそうということですね。ページ独自のネームスペースの件、勉強になります。

私が受け取っているデザインは、かなり大きめの案件でない限りあまり統一性がなくて、そのうえ、コーディング時に調整することはある程度可能だったりして、さて、こちらでどこまで統一させるかとかを考えているうちにどんどん時間が過ぎていってしまって余裕がないです（汗）

回答ありがとうございました！

ID:OKQRfO

正直、統一性もなく、更新性もないようなLPとかなら、なーんにも考えない。名前付けるのに悩んでる時間が無駄。

ID:Q3EiWm

そうですね、私も1ページのLPの場合は自分で決めた同じルールでコーディングしており、ほぼ考えていません。複数ページある案件の場合の質問でした。

ID:Dw.i1M さんの回答

逆にメタ言語を使わない理由を知りたい。
ID:Q3EiWm

正直、独自の記法を覚えるのが大変そうだな...と思って、手が出ずにいます。

ID:Dw.i1M

典型的な食わず嫌いだね。
独自の記法は確かにあるけど、独自記法使わなくてもcssのコードをそのまま使えるんだよ。たったそれだけでも、たとえば、変数が使える、ファイルを細分化できる、結合できる、とかいろいろメリットがあるのに、もったいないなぁ。

ID:knkRYt

メタ言語なんてやる必要ない。結局そんなの役立っているのは業界の2割くらいかな

ID:Dw.i1M

>メタ言語なんてやる必要ない
いろんな意見があるのが当然だとは思うけど、その根拠は?
もしかして、やり始めて挫折した口なの?
そうだとすると、まっとうな意見じゃないなぁ
否定するなら、ちゃんと使い倒してからにしてほしい

ID:Q3EiWm

CSSそのまま使えるのは知ってますが、自分の場合、CSSは200行くらいで終わる案件（LP）が多くて、後で変更もないし、使い回しもほぼないので、変数使ったり細分化・結合するほどでもなくて、わざわざ学習して使う意味あるのかなと。ただ、きちんとレギュレーションがあるような大規模な案件については、使ったほうが良さそうだなって思いました。
...でもメタ言語使うかどうかって、今回の質問に関係ありますか？？メタ言語使えば、class名が長くなっても問題ないからbodyにclassつけなくてもいいよ、っていう意味ですか？？

ID:knkRYt

だってこの業界の8割はトピ主みたいな環境だし、事実メタ言語をやっても汚いコードのサイトばかりだからね。

ID:Q3EiWm

確かに、これSCSSで書いたんだろうな、でもなんか汚い、って思うことはあります。初期構築の時にコーディングする人は楽でも、納品後に運用する側がSCSS使えなかったら、かえって面倒じゃないですか？それが嫌だっていうのもSCSS使いたくない（というか先方が嫌がるので使えない）理由のひとつです。でもきっと、きちんと使える人は、SCSS使わない環境に納品する場合でも、先方が困らないように綺麗にコーディングするんでしょうね。

ID:Dw.i1M
  • >メタ言語使うかどうかって、今回の質問に関係ありますか
    元々「複数ページ管理」の質問なのに、「LPが多いから必要ない」っていう返答がくるのが意味不明。トピ主は質問の中で「面倒」というキーワードを出していて、それを吸収するのもメタ言語のはずだけど、確かに「メタ言語を使う使わない」が本題ではないので、使わないって決めてるんだったら別の方法で考えればいいんじゃないかな。
  • >事実メタ言語をやっても汚いコードのサイトばかりだからね
    作業効率=コストっていうのは理解できる?
    汚いより綺麗の方がいいけど、そこは本題じゃなくてね。少なくとも、制作者がツールを使いこなせるかどうかっていう問題と、そのツールがどういう機能をもっているかっていうのは話が違うから切り分けたいね。
ID:Q3EiWm

>逆にメタ言語を使わない理由を知りたい。
これの回答が「LPが多いから」であって、今後も使う気がない、とは言ってません。複数ページコーディングが必要なサイトでは、SCSS使ったほうがいいんだろうな、勉強しなきゃな、とは思ってたんですが、LPに比べて件数がかなり少ないので、そのために学習コストを割くことができなくて、これまでは一切使ってきませんでした。これまでは、作業効率UPで期待できるコスト削減より学習コストや先方との調整など諸々のデメリットの方が大きいと判断してきたので。
ただ本題はSCSS使うかどうかが知りたいのではなくて、「複数ページ作る時にclass名どうやってつけてますか？」ってことなので、単純に、bodyに独自のclassをつけて区別してるか、設置するページに関係なくパーツごとに独自のclassをつけてるのか、どちらですか、もしくは他に方法ありますか？っていう質問でした。いずれかを選択するうえで、SCSSを使うと別に面倒ではないよ、ってことであればそれで納得しますし。SCSSを使うのと使わないのとでは、色々と考慮しなきゃいけないことが出てくるので、そこは一旦置いといて、まずはclassの付け方についての回答が欲しいです。質問の仕方が悪くてすみません。「SCSSを使わない場合」っていう、前置きをつけるべきでしたね。
あらためてお聞きしますが「逆にメタ言語を使わない理由を知りたい。」というのは、「メタ言語使えば、bodyに独自のclassをつけても面倒ではなくなるのになぜ使わないの？」っていう意味ですか？？それとも別の意味ですか？

ID:igBGse

フリーランスで全部1人で完結してるとか、社内みんなが導入してるとかじゃないもSassとか導入してもねってのはわかるよ。
しかし、タスクランナーとかSassとか積極導入してる人はそれ否定されると烈火のごとくキレるから怖い。

ID:knkRYt

自分でデキル奴と勘違い野郎が多いからなあ

ID:Pcb8mI

メタ言語にはメリットもデメリットもあるので使いたい奴だけ使えば良い。

ID:Dw.i1M

>「メタ言語使えば、bodyに独自のclassをつけても面倒ではなくなるのになぜ使わないの？」っていう意味ですか？
こうやって書いたら、
.under{
p{
color: red;
}
div{
color: blue;
}
}
こういうCSSになる
.under p{
color: red;
}
.under div{
color: blue;
}
これ以上何も言うことないので自分で面倒かどうか判断してみなされ。

ID:Q3EiWm

入れ子にできることは知ってます。仰りたいことは「面倒だから設計を悩んでるなら面倒な部分を解消すればいい」というOKQRfOSgOutnさんと同じですよね。
色々ご意見頂いて、実際にいまやってる案件で少し試してみて、やっぱりbodyにclassをふるのは私の使い方だと適切でない気がしてきたので、別の方法をとろうと思います。そのうえでメタ言語が有用かどうかまたあらためて判断したいと思います。
回答ありがとうございました！

ID:nPkGOl さんの回答

以下、優しい人達のコメント。
ID:Q3EiWm

SCSSを使う使わないに関わらず、サイト全体で単一のCSSファイルを使う時に、どんな風にclassを付けて管理しているのかが知りたいです。。

ID:BuX23B さんの回答

とりあえず今は別にCSSプリプロセッサやタスクランナーを勉強する必要ないよ。それよりもまずはモジュール単位の設計ですすめてみな。結局は案件数をこなしたり、自社サービスなんかの運用性を考えたり、組織やチームとしての効率化を検討しないと身につかないから以下の参考書でも空き時間に読んどけ

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法: 谷 拓樹: 本

http://www.amazon.co.jp/Web制作者のためのCSS設計の教科書-モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法-谷-拓樹/dp/4844336355
ID:Q3EiWm

ありがとうございます。これ持ってて、少し大きめの案件の度に読んでます。実践するとなるとなかなか難しいです。

ID:Q3EiWm

>組織やチームとしての効率化を検討しないと身につかない
本当にこれだと思います。ほぼ1人でやってるので、自分さえ分かればいいっていうのがあって...。チームとしての経験をしてみたいです。

ID:BuX23B

bodyに独自のclassを振り分けるのはよくないかな。上位階層のタグで振り分けてしまったら、もうそれで他に手はなくなるからね。イレギュラー的な要素や後付の設定でグチャグチャになりがち。


  • それよりもデザインパターンを洗い出し、適宜divでグルーピングして、モジュール単位で管理するほうがベストかな。もう今だったらCSSセレクタもいろいろ使えるでしょ。
ID:Q3EiWm

なるほど、やっぱりそうですか。確かに、その場ではよくても、後々にこのせいで触りづらくなることが何度もありました。デザインパターンの洗い出しってすごく難しいです。パターン化するかしないかの判断に時間がかかったり。。紹介していただいた本にも3回出てきたらリファクタリングするって書いてありますが、時間がかかる。。とりあえず、今日から着手する案件ではbodyにつけるのやめて試してみようと思います。

ID:BuX23B

ま、最初に時間がかかるのは、設計なんだから仕方ないってのもある。コーディングは下流工程だから、焦る気持ちもわかるけどね。行き当たりばったりでサクッと終わらせることができたらそれもいいけどね。


  • もちろん制作おける経験や慣れ、要領の良さや判断推測力などが必要だけど、デザインパターンの洗い出しってのは、実はコミュニケーション能力が大半を占めてる。つまり、きちんと認識内容をすりあわせて、案件がちゃんと進んでいれば、そんなにしんどくないはず。

  • コーダーがディレクターやデザイナー、クライアントに振り回されることが一番の問題なのよ。根本的な原因は、実は社内の体制＝敵は社内にアリってのも大半を占めてるからねwCSSプリプロセッサやタスクランナーなんて、実はそんなに必要なかったりするのも多々あるしね。
ID:Q3EiWm

仰ることよくわかります。私の場合はデザイナー・ディレクターが社外で、コーディングだけを任されてるような状態なので、仕様を何度も確認できないとか、何が言いたいのか空気を読まないといけないとか、相手の時間をそう簡単に取れない（社内であっても同じとは思いますが...）というのがコミュニケーションの障壁になってます。
せめて大きめの案件の時には、お互いの負担にならない程度にしっかりコミュニケーション取っていけるよう、頑張りたいと思います。

ID:ZoHVjM さんの回答

トピ主みたいなCSS設計、大手サイトでも多く見るな。単語や略語ばかりで他人が見ても分かりづらかったり、ページが増えた時に困るやつ。
俺も昔は「クラス名が長くなるのは嫌」だったけど、マルチクラス（複数クラス）で「class="under text box"」みたいな事するなら1語で「under-text-box」にした方が分かりやすいし、バッティングも起きないと思うけどな。
面倒だと言うけど、後から修正するときもCSSだけだし、HTMLとCSS両方修正するマルチクラスより楽だと思うがな。
ID:Q3EiWm

私も、一つにまとめたほうがほぼバッティングがないので楽だと思ってます。ただ、ページ数が増えると途端にCSSが大量になってしまうので、たぶんこれは良くないコーディング方法なんだろうなと悩んでました。難しいですね...。やっぱりSCSS勉強しようかなと思います。

ID:4NebiS さんの回答

class="dragon" とか class="snake" とか、かっこいい名前にするといい。自分にしかわからないオシャレなコーディングになる。歴代の彼女の名前にするとかもいいね。
ID:knkRYt

吉野家のサイトもclass="hayai umai yasui"だからね

ID:Q3EiWm

見に行ってしまった...

ID:rGtmeT

同じく。
これは、なかなかうずく釣りだ。んなわけないと思いつつも期待してしまった。

ID:knkRYt

うぷぷ…

ID:4NebiS

おっと、俺もつられそうだっだぜ。。。ｗ

最終更新日:2015-11-16 (3,569 views)

関連するトピックス

ページ上部に戻る