CSS設計について

Question

CSS設計について

マルチクラスが5つ前後になっても一つの要素のCSSを下記のように分離するのは、
管理しにくいのでやめるべきでしょうか？

＊base.css

/* 背景画像のグラデーションを一括指定 */
.main-copyright-wrap, .c-businesslist div, section, .content, .footer {
background: linear-gradient(to left bottom );
}

/* ヘッダーとメインコピーライトのシャドウを一括指定 */
.header, .main-copyright-wrap, .c-businesslist div, section, .content {
box-shadow: 0 .1rem .1rem rgba(0,0,0,.9);
}

*それよりも下記のようにマルチクラスが5つ前後になっても一つの要素のCSSを上記のように分離するのは、
管理しにくいのでやめるべきでしょうか？

<div class="c-card c-card-skin c-card--margin-bottom gradient shadow">

どちらも一長一短ですが、どちらが主流でしょうか。
おそらく後者でしょうか。

Answer 1

個人的には後者ですね。ソース見て内容がわかるような命名規則が理想ですが

Comments

[退会済みユーザー]

やはり今はマルチクラスが流行っていますね。
まれにクラス名が6つくらいになってしまうこともありますが、
ブートストラップはもっと多いのをよく見ますので、
それを嫌がられるコーダーなどはあまりいないのですね。

[hyksm]

見てわかるというのが、管理しやすいですよね。自分だけじゃなく色々な人が関わるならなおのこと

[退会済みユーザー]

.main-copyright-wrap, .c-businesslist div, section, .content, .footer {
background: linear-gradient(to left bottom );
}

だとわかりにくいですね。

クラス名が6つくらいでも最悪OKですね

Answer 2

デザイン～コーディング～フロント実装までやるデザイナーですが、マルチクラスすぎるのは嫌ですね。
BEMみたいにシングルクラスすぎるのも嫌ですが。
ようは管理しやすくほどほどのものが好きです。

サクッと作るようなものや、流用して似たようなサイトを量産するときは後者（bootstrapとか含む）でいいと思います。

デザインルールがはっきり固まっているものであれば、ある程度コンポーネントを分離して設計していけば、そこまでclassだらけにならないかなと思います。
誰でもなんでも作れるように敢えてそうなっているbootstrapならともかく、フルスクラッチでそこまで増えたことはありません。

Comments

[退会済みユーザー]

/* 背景画像のグラデーションを一括指定 */
.main-copyright-wrap, .c-businesslist div, section, .content, .footer {
background: linear-gradient(to left bottom );
}

/* ヘッダーとメインコピーライトのシャドウを一括指定 */
.header, .main-copyright-wrap, .c-businesslist div, section, .content {
box-shadow: 0 .1rem .1rem rgba(0,0,0,.9);
}

上記のほうが良いということでしょうか？
それとも同じCSSを複数の要素でコピペする形で良いということでしょうか？
二度書になりますが

[NatsumiOki]

.header, .main-copyright-wrap, .c-businesslist div, section, .content
これらすべてがそれぞれ別のスタイルを持っていて、box-shadowだけ分離して指定したいっていう状況が、そうそうないなってイメージです。

.headerというclassがあるってことは、そのclassがついた特定のコンポーネントがすでにあるはずなので、そこにbox-shadowも書いておけばいいだけかな。
二度書きと言いますが、例のような1プロパティだけをわざわざ分離してセレクタを何行も指定すると結局行数は増えますし、要はバランスですね。
プロパティを上書きするわけじゃないですし。

divのうちbox-shadowを指定したい特定のdivがあるならそれはそれ用の.box-shadowみたいなclassを作ってつけるマルチクラス方式でもいいと思います。

たとえばこれがli要素とかで、毎回必ずbox-shadowがつくっていう状況でもマルチクラスで複数指定するのはHTML側が無駄だなと思います。
もしテンプレートエンジンなどで同じ要素を連続して生成するにしても、その記述量が増えれば増えるほどレンダリングまでの処理時間が長くなるわけですし…
（どっちが速いかはベンチマーク測ってみないとなんともいえませんが）

というわけで、全部をルール通りにシングルまたはマルチクラスにするのではなく、ハイブリッドでやっています。

[退会済みユーザー]

box-shadowだけ背景だけをマルチクラスにするとCSSの二度書が防げますが、HTMLのクラス名は何度も書くのでよくないという考えですね。