CSS設計について、プロのフロントエンドの方教えてください。

Question

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;
}

Comments

[退会済みユーザー]

こちらの質問が他のユーザから「プログラミングに関係がない質問」という指摘を受けました
teratailでは、プログラミングに関して困っていることがないと思われる質問を推奨していません。
「質問を編集する」ボタンから編集を行い、具体的に困っている理由や解決したいことを明確に記入していただくと、回答が得られやすくなります。

Answer 1

CSSでのクラス設計の考え方が当方のコーディングルールでは異なりますがクラスの数については当方では3個程度が限界とされています。
何か参考になればよいのですが……。

もし私が同様の設計をするなら他の回答者の方がおっしゃるように、元となるボタン(.btnや.ghost-btnなど)とオプション(.btn-size-lや.btn-size-mなど)で構築できるようにしますかね

Comments

[退会済みユーザー]

三つが限界ということですね。

ありがとうございます。下記のようにするということですね。

・CSS
/* mousepointer-finger,hover-opacey */
.animation-hover,.main__top-gnav a {
transition-duration: 1s;
transition-property: all;
}
↓
/* 動き */
.act-btn-fade {
transition-duration: 1s;
transition-property: all;
}

.act-btn-fade:hover {
opacity: 0.5;
}

.act-btn-fade:hoverは.act-btn-fadeとしてセレクタに指定するので同じセレクタでhoverも指定できる。

.action-hover:hover,.main__top-gnav a:hover {
cursor:pointer;
opacity: 0.5;
}
↓
/* 見た目 */
.modal-btn {
cursor: pointer;
border: solid 1px #CCC;
background: #FFF;
}

ちなみにマルチクラスは現場ではいくつくらいが限界と考えていますか？
特になく、5個くらいあっても問題ないですか。

[Cf_cwd]

前述の通り、設計思想が異なるため明確に示すことはできないのですが、私の職場でのルールや私の個人的な感覚ですとマルチクラス3個に収まるよう設計できている方がスマートだと考えます。
要するに私の職場ですと4個以上のマルチクラスは基本的に使いません。
基本的に3個以下に収まるよう設計していますね。

質問者様の希望の情報を知るにはどちらかというとbootstrapやPure.css、foundationなどのフレームワークの設計を参考にするといいかもしれません。
個人的にはあまりに細分化しすぎて5個以上のマルチクラスを許容するような形にしていくと.font-color-redのようなクラス名が許容されるようになるのではないかと懸念を感じます。
ですので
・機能や用途(.textareaや.btn、.icon-xxx)
・分類や種類(.ttlや.headline、.section、.category) / (.btn-type-ghost、.btn-type-modalなど)
・サイズ(.btn-size-l、.btn-size-sなど)
の3個ほどのクラスで要素を表現、構築できると設計的に分かりやすいのではないでしょうか？

参考程度にお話ししますと、いくつかのWeb系大手や有名どころのコードを見た限り、1つの要素に対してclass数は大体2-3によって構成されている印象です。
最も多かったもので4でした。
(サンプル数が少ないので偏りがあるかもしれません)
個人的な意見ですがやはり5個付けなければいけない状況というのが想像しにくいですし、一般的な設計ではないのかなという印象を受けます。
こればかりは実際のコードを見ないと何とも言えませんが……。

少し面白い参考資料としては
http://liginc.co.jp/222680
ですね。
これは株式会社LIGのトレーニング法についての企画記事です。
複数人で短い時間で、比較的簡単なお題を各々作成するというものです。
それぞれの方の設計思想や癖、クラスの付け方が見れるので参考に良いと思いますよ。

[退会済みユーザー]

>>>
質問者様の希望の情報を知るにはどちらかというとbootstrapやPure.css、foundationなどのフレームワークの設計を参考にするといいかもしれません。

仰るとおり参考になる、このサイトは、フレームワーク用の変なクラスなどもなくよいというサイトを探しています。
下記でしょうか？具体的なURLやサンプルサイトを教えていただければ幸いです。
http://getbootstrap.com/examples/carousel/

・マルチクラスは三つまでがよいのですね。
確かに見た目、構造とすれば、一般的にはその二つのみですみます。
ただそこに、JSで動くクラスやidがひとつ二つはいって、しかも下記のように、WEBフォントのCSSも入り、icon_large、icon_middleなどのモディファイヤーによるサイズなどもあれば、
かなりのクラス数になることもまれにあると思います。
こういうWEBフォントなどがあり、モディファイヤーでサイズを変更するときだけは例外としてよいと考えてよいでしょうか？

<li class="link-block">
<a class='top-header__social-btn　icon_large　 drawermenu__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=http://" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a>

株式会社LIGのトレーニング法はよいですね。
ありがとうございます。

[Cf_cwd]

Webフォント、アイコンなどが絡む場合、確かに数が多くなることもあるでしょうね。
JavaScriptも同様ですが、idやdata属性を使用できるなら使用することを検討してもいいかもしれません。

気になる点として
・top-header__social-btn drawermenu__social-btn
と役割、種類が2つあり、あまりコードとして明確でないように思えます。
(個人的にですがソーシャルボタンなのにドロワーメニュー出てくるの？ってなります
<ul>にdrawermenuが付いてる想定ですかね？)

私はあまりBEM的な書き方をしないので少し微妙かもしれませんが改変するなら以下のような感じですかね？
(JavaScript関連は省いています)

<ul class="top-header-social-btns drawer-menu">
<li class="top-header-social-btns__item">
<a class="icon_large symbol animation-hover action-hover"></a>
</li>
</ul>

少し書き換えましたがこれでも.animation-hoverと.action-hoverの違いが文脈から読み取れないように思えます。
各クラスの意図が汲み取れていないので<a>辺りはあまり大きく書き換えられないですね。
(書いた本人やそのコーディングルールを共有する人にはわかると思うのですが……)

有名なサイトとしてPhotoshopVIPのソーシャルボタンのClass付けを参考にしてみるのはどうでしょうか?
http://photoshopvip.net/archives/86971

また再びLIGの記事ですが
http://liginc.co.jp/web/html-css/html/173153
http://liginc.co.jp/web/html-css/css/166585
など参考になるかもしれません。

以下はバッドパターンの例ですね。
http://liginc.co.jp/184916

余談としてBEMを使わずコーディングするとすれば大体以下のような感じになりますかね。
(Webクリエイターボックスやコリスなどはこのパターン？)
<ul class="social-links">
<li class="twitter-link"><a class="social-btn"></a></li>
<li class="facebook-link"><a class="social-btn"></a></li>
</ul>

[Cf_cwd]

http://qiita.com/mrd-takahashi/items/07dc3b4bad027daa2884
こういった記事も参考になるかもしれません

[退会済みユーザー]

とても参考になりましたありがとうございました。

Answer 2

まとめ方はいろいろあると思いますが、
まずは、

• ボタンの見た目に関する設定
• ボタンの動き・アニメーションに関する設定

の2つにまとめてみてはいかがでしょうか？
クラス名は「見た目」に関するものか「動き・アニメーション」に関するものかが区別できる名前にすると良いと思います。

<a class="modal-btn act-btn-fade"></a>

/* 見た目 */
.modal-btn {
 cursor: pointer;
 border: solid 1px #CCC;
 background: #FFF;
}

/* 動き */
.act-btn-fade {
 transition-duration: 1s; 
 transition-property: all; 
}

.act-btn-fade:hover {
 opacity: 0.5;
}

Comments

[退会済みユーザー]

ありがとうございます。下記のようにするということですね。

・CSS
/* mousepointer-finger,hover-opacey */
.animation-hover,.main__top-gnav a {
transition-duration: 1s;
transition-property: all;
}
↓
/* 動き */
.act-btn-fade {
transition-duration: 1s;
transition-property: all;
}

.act-btn-fade:hover {
opacity: 0.5;
}

.act-btn-fade:hoverは.act-btn-fadeとしてセレクタに指定するので同じセレクタでhoverも指定できる。

.action-hover:hover,.main__top-gnav a:hover {
cursor:pointer;
opacity: 0.5;
}
↓
/* 見た目 */
.modal-btn {
cursor: pointer;
border: solid 1px #CCC;
background: #FFF;
}

ちなみにマルチクラスは現場ではいくつくらいが限界と考えていますか？
特になく、5個くらいあっても問題ないですか。

Answer 3

数は少ない方がよいですが、再利用しやすい形に設定がまとまっているかどうかだと思います。
そういう意味ではクラス単体の指定が最も使いやすいですね。
タグ指定は汎用性がないです。

マルチクラスを使うなら、ベースとなるクラス（共通設定）、バリエーションのクラス（バリエーションによってことなる色や大きさの設定）のような2つを組み合わせる形が基本だと思います。

■ボタンの枠線や色設定は共通、大きさが異なるケースの場合

<a class="blog-btn blog-btn-small"></a>

<a class="blog-btn blog-btn-large"></a>

Comments

[退会済みユーザー]

少ないほうが良いのでさすがに5つなどは多すぎるのですね。