QA@IT

cssのクラス名について

4518 PV

例えば、ボタンの形は一緒だけど、色が何種類かある場合、色のクラス名はなんて付けますでしょうか?
僕が考える中で3つ方法があると思っています。
1つ目

common-bg:よく使う色という意味でclass名を
ボタンの色が少ない場合はいいと思います。
ただ、ボタンの色が多いときはクラス名になんて付ければ良いかいつも迷います。

2つ目

search-bg:何のボタンかどうかでclassを決める。
機能ごとに色を決めるので拡張性は高いように思います。
また、このボタンは何処で使われているかがclass名を見ただけで、わかります。
ただ、上記例だと、同じ色のボタンがあったとしてもsearchのボタン以外で使うを意味が分からなくなるので、
同じ色を持ったclass名が増えます。

3つ目

.red-bg:色をclass名として使う。
これは何色のボタンというのがすぐわかります。どのボタンに使っても問題ないように感じます。
ただ、赤は赤でも2種類、3種類と赤系のボタンがあったときclass名を付けるのに迷います。

※.btn:ボタンの形を作るcss

上記三つが僕の中で考えられるclassの付け方です。
1と3に関しては試した事があり、どっちも失敗しました。1が失敗した理由としては、デザインが一枚一枚でてきて、
この色はサイトのメイン色だと思いcommon-bgという名前を付けましたが、似たような色のボタンや、ボタンの色が多くて
なんて名前を付けてよいかわからなくなりました。
3が失敗した理由としては最初にred-bgというclass名を付けたはいいが、赤が4色ぐらいのボタンの色があり、
結果、red1-bg,red2-bg...red4-bgという名前になり、奇麗にまとめられませんでした。

多分上記三つどれを使っても間違いでもないとおもうのですが、
皆さんは色だけ分けたclass名をつけますか??

アドバイス頂けたら嬉しいです。

回答

私はbootstrapのボタンのクラス名の付け方を参考にしています。
そのクラスの意味と色を1対1に対応付ける考え方です。

微妙な赤の違いのボタンを複数作りたい場合には、不向きですが、管理画面など色と意味が意味を持つページでは、有用だと思います。

編集 履歴 (0)

あくまで僕の個人的見解になってしまいますが、自分なりのコーディング規約を持つことだとおもいます。もし、チームで開発するならばチーム内で話しあい意思統一をしてから開発するのが良いと思います。結論としては主流のHTMLやcssを見て自分なりのコーディング規約を持つ事だと思います。

cssのクラス名は自由に書けてしまうので、コーディングルールを統一しないと非常に分かりにくい物になってしまいます。結局コーディング規約も曖昧で、大きいプロジェクトでもHTML,cssを書く人に一任されてしまっているプロジェクトも少なくないと思います。

※(あくまで考え方の一つですが) 現在はBEMという考え方が流行っているようです、
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 http://blog.ruedap.com/2013/10/29/block-element-modifier

非常に曖昧な回答で申し訳ありません。
僕は深いこだわりはありませんが、下記を意識してcssを書いていたりします。
・意味で名前をつけるべき
・色やサイズに関する名前はクラス目に使わない、「.red とか .margin15とか」

また共通の色等に関しては、サイトのカラーを定義して変数として使っています。
lessやsassと言ったcssの拡張言語も調べてみるといいかもしれません。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。