QA@IT
«質問へ戻る

質問を投稿

cssのクラス名について

例えば、ボタンの形は一緒だけど、色が何種類かある場合、色のクラス名はなんて付けますでしょうか?
僕が考える中で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名をつけますか??

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

例えば、ボタンの形は一緒だけど、色が何種類かある場合、色のクラス名はなんて付けますでしょうか?
僕が考える中で3つ方法があると思っています。
1つ目
<botton class="btn common-bg">
common-bg:よく使う色という意味でclass名を
ボタンの色が少ない場合はいいと思います。
ただ、ボタンの色が多いときはクラス名になんて付ければ良いかいつも迷います。

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

3つ目
<botton class="btn red-bg">
.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名をつけますか??

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