くまだどうも、くまだです。
デザインカンプを見てコーディングをする際に、このパーツはどこまで共通化すればいいのか、どういう感じで作ろうか悩むときがあります。
どこまで汎用的に作る？ ボタン編
例えば、以下のようなボタンを共通ボタンとして作ったとして。
<a href="" class="c-commonButton">テキスト</a>.c-commonButton {
padding: 10px 12px;
display: block;
background: lightcoral;
color: #fff;
text-align: center;
letter-spacing: 0.06em;
}
ボタンのようなパーツを作る際は、幅やマージン（余白）を設けていません。
幅やマージン（余白）をパーツに付ける場合は、（自分だったら）実際作ったパーツをセクションの中やページの中で使うときに、以下のように書いて、p-work__buttonクラスやp-about__buttonクラスに対して余白や横幅を指定したりします。
パーツ自体ではなく、例えばセクションの中のボタン、みたいなクラスに対して余白や幅を設ければ、そのクラスを外せばそのスタイルがなくなります。なので、パーツ自体は汎用的に使いまわせます。
例1：worksセクションの中のボタン（パーツに専用クラスを付与するパターン）
<a href="" class="p-work__button c-commonButton">詳しく見る</a>
例2：worksセクションの中のボタン(パーツの親divにクラスパターン）
<div class="p-work__button">
<a href="" class="c-commonButton">詳しく見る</a>
</div>
例3：aboutセクションの中のボタン
<a href="" class="p-about__button c-commonButton">詳しく見る</a>/* こっちにマージンやら横幅をつける */
.p-work__button {
margin-top: 100px;
}
.p-about__button {
margin-top: 50px;
max-width: 100px;
}
ボタンの背景色だけ違うとか、テキストの文字色が異なるぐらいだったら、以下のように指定します。共通ボタンのバージョン違いとかだったらこれで対応できます。
<a href="" class="c-commonButton c-commonButton--bgRed">詳しく見る</a>
<a href="" class="c-commonButton c-commonButton--colorBlack">詳しく見る</a>
.c-commonButton.c-commonButton--bgRed {
background: red;
}
.c-commonButton.c-commonButton--colorBlack {
color: #000;
}悩むのが、パッと見て似ているけど違うボタンのとき。例えばアイコンがあるとか、パディングが小さい（大きい）とかサイズ感が違うみたいな。これを上のパターンで対応しようと思うと、以下にみたいな感じになります。
<a href="" class="c-commonButton c-commonButton--largeSize c-commonButton--icon c-commonButton--border">詳しく見る</a>自分はクラス名が長くなるのは許容できるので、上のパターンもなくはないですが、それよりもcーcommonLargeButtonとかcーcommonArrowButton、みたいな感じで別パーツ扱いで作ってしまう気がします。
ベースが似ているからといって汎用的に作りすぎるの逆にどうなんだろう、と思ったり。かえって別パーツとして作ってしまったほうがいい気がしているのですが、この辺の正解がいまだにいまいち分からない。
ちなみに以下みたいな指定をしていると、ファイル構成によってはスタイルが効かないときがあります。（以下の例だと、c-commonButtonに背景色つけているので、p-works__buttonで背景色つけてもスタイル適用されない）
背景色効かないパターン
<div class="p-work__button">
<a href="" class="c-commonButton">詳しく見る</a>
</div>
背景色効くパターン
<a href="" class="p-work__button c-commonButton">詳しく見る</a>.c-commonButton {
padding: 10px 12px;
display: block;
background: lightcoral;
color: #fff;
text-align: center;
letter-spacing: 0.06em;
}
.p-work__button {
margin-top: 100px;
background-color: red;
border: 1px solid #000;
}
どこまでを汎用的に使えるようにするか、どこまでをバージョン違いで対応するか、などボタン一つとっても考えることは多いのですが、最適解がまだまだ分かっていないという結論笑
ここまで読んでくださりありがとうございました。