SNSボタンのクラス名で迷っています。

Question

SNSボタンのクラス名で迷っています。
下記のようにしてマルチクラスが理想なのですが、レスポンシブの場合、横幅によってフォントサイズが違う
場合がありますよね。
すると両方適応するためには下記のようにクラス名sns-btn-small sns-btn-largeとしないと両方充てることができません。
これでいいと思いますか？
HTMLだけ見ると矛盾した記述に見えるし3サイズあったら三つつけないといけないですよね。
コメントアウトで説明しておけばばそれでも拡張性重視でOKと思いますか？

.sns-btn｛｝

.sns-btn-small｛｝

.sns-btn-large｛｝

<a class="sns-btn sns-btn-small sns-btn-large">

Answer 1

すべてのクラスをあててどうやって制御しようとしているのでしょう…？
レスポンシブの場合、ということは.sns-btnだけつけておいて下記のようにメディアクエリで制御するとかでよいのではないでしょうか？

.sns-btn｛｝
@media screen and (max-width: 640px) {
    .sns-btn｛｝
} 

Comments

[退会済みユーザー]

もちろんメディアクエリーズは使っています。
モディファイヤーのsns-btn--large｛｝のサイズがメディアクエリーズでサイズが違うのはおかしくないですか？

[obi_yuta]

画面によってサイズを変えるのがそもそものメディアクエリの目的ですから、サイズが違わなければメディアクエリを使う意味がないかと思うのですが、具体的にはどういった記述に違和感があるのでしょう？（具体的なCSSを追記いただけるとありがたいです）