CSS設計について、プロのフロントエンドの方教えてください。
コンポーネント化がはやっているので下記のようにしたのですが、
マルチクラスのやりすぎでしょうか?
マルチクラスはどれくらい使うのが良いでしょうか?
妥協点がわかりません。
・HTML
<a class="animation-hover action-hover modal-button-wrap__button">
・CSS
/* mousepointer-finger,hover-opacey */
.animation-hover,.main__top-gnav a {
transition-duration: 1s;
transition-property: all;
}
.action-hover:hover,.main__top-gnav a:hover {
cursor:pointer;
opacity: 0.5;
}
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ベストアンサー
CSSでのクラス設計の考え方が当方のコーディングルールでは異なりますがクラスの数については当方では3個程度が限界とされています。
何か参考になればよいのですが……。
もし私が同様の設計をするなら他の回答者の方がおっしゃるように、元となるボタン(.btnや.ghost-btnなど)とオプション(.btn-size-lや.btn-size-mなど)で構築できるようにしますかね
投稿2016/02/09 17:22
総合スコア730
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/02/10 01:25
2016/02/12 18:03
退会済みユーザー
2016/02/14 04:27
2016/02/16 09:15
2016/02/16 09:20
退会済みユーザー
2016/02/17 00:05
0
まとめ方はいろいろあると思いますが、
まずは、
- ボタンの見た目に関する設定
- ボタンの動き・アニメーションに関する設定
の2つにまとめてみてはいかがでしょうか?
クラス名は「見た目」に関するものか「動き・アニメーション」に関するものかが区別できる名前にすると良いと思います。
HTML
1<a class="modal-btn act-btn-fade"></a>
CSS
1/* 見た目 */ 2.modal-btn { 3 cursor: pointer; 4 border: solid 1px #CCC; 5 background: #FFF; 6} 7 8/* 動き */ 9.act-btn-fade { 10 transition-duration: 1s; 11 transition-property: all; 12} 13 14.act-btn-fade:hover { 15 opacity: 0.5; 16} 17
投稿2016/02/04 02:09
総合スコア2092
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/02/04 03:44
0
数は少ない方がよいですが、再利用しやすい形に設定がまとまっているかどうかだと思います。
そういう意味ではクラス単体の指定が最も使いやすいですね。
タグ指定は汎用性がないです。
マルチクラスを使うなら、ベースとなるクラス(共通設定)、バリエーションのクラス(バリエーションによってことなる色や大きさの設定)のような2つを組み合わせる形が基本だと思います。
■ボタンの枠線や色設定は共通、大きさが異なるケースの場合
html
1<a class="blog-btn blog-btn-small"></a> 2 3<a class="blog-btn blog-btn-large"></a>
投稿2016/02/04 15:24
編集2016/02/04 15:27総合スコア2092
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/02/05 01:41
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。