メディアクエリの書き方について（要素ごとに設定）

Question

現在、ECサイトのリニューアルの準備を進めております。

そこで、モバイルファーストでcssを組んでいくのですが、
以下の記事を拝見し「メイディアクエリは要素ごとに設定」していく方が良いのではないかと思うようになりました。

https://parashuto.com/rriver/responsive-web/organize-media-queries-by-module

また、LIGさんやカヤックさんが制作されたサイトのソースを見ていても、いくつかのサイトは、
要素ごとにメディアクエリが設定されておりました。

質問なのですが、
0. 「メイディアクエリは要素ごとに設定」する書き方は、効率的で、制作の現場でも多く見られる手法なのでしょうか？
0. この書き方は、サイトの規模感などの条件によっては、効率的ではなくなるというようなことは起こるでしょうか。

この記事やサイトを見るまでは、以下のような書き方を想定していたのですが、迷っております。
回答をいただけますと幸いです。

sp

@タブレット {
}

@pc {
}

※命名規則には、BEMを使用します。
※サイトの環境やチームのメンバー的に、sassを使うことはできません。

どうぞよろしくお願いいたします。

Answer 1

あくまでも私の場合ですが
基本的にメディアクエリは要素ごとに使います。
しかし、同様の記述が増えてしまう場合は共通にします。
どちらを使うかは質問者さんがお考えになっているとおり、規模によります。

Answer 2

私の場合は、メディアごとのスタイルが塊で把握しやすいように、1ファイルに同じメディアクエリを複数書かないようにしてます。
1コンポーネント1ファイルにすると、基本的にこの形に行き着くと思います。

どのみちファイルを結合するとメディアクエリの記述がかさむので、記事に載ってる MQ Packer もしくはメディア毎にファイル分割するプラグインを使うと良いです。

.component {
  font-size: 1rem;

  &__header {
    height: 4rem;
  }

  // Tablet
  @media only screen and (min-width: 768px) {
    font-size: 1.125rem;

    &__header {
      height: 5rem;
    }
  }

  // Desktop
  @media only screen and (min-width: 992px) {
    font-size: 1.25rem;

    &__header {
      height: 6rem;
    }
  }
}