記載するjsコードでの読みやすい書き方などを教えていただきたいです。

Question

質問したいこと

3つの異なる要素を取得し、イベントリスナーを使用して同じタイミングでクラスを切り替えする際、どういった方法で記述するのが、読みやすさ・効率・パフォーマンスなどにおいてよいのかお聞きしたいです。

上記について、実装したjsコードをもとにご教示いただきたいです。

実装したコード

まずは、簡単にHTMLを記載します。
（id名やクラス名は今回適当につけております。）

「#el1」「#el2」「#el3」に、スクロールイベント・クリックイベント時にクラスを切り替えます。

今回、肝になると思われるのが、【クラスを切り替えるタイミングは全く同じでも、付与されるcssプロパティはそれぞれ異なる】という点です。

<div id="el1"></div>

<div>
  <p id="el2"></p>
</div>

<div>
  <div>
    <p> id="el3"></p>
  </div>
</div>

<button id="btn"></button>

上記のHTMLをもとに実装したjs（ほかのコード省略）を記載します。
（末尾に、クラスが追加された際のcssも一緒に記載しておきます。）

const el1 = document.getElementById('el1');
const el2 = document.getElementById('el2');
const el3 = document.getElementById('el3');
const btn = document.getElementById('btn');
const eventClass = 'js-el';                              //切り替えを行うクラス名

let elFunc = ()=> {
  el1.classList.toggle(eventClass);
  el2.classList.toggle(eventClass);
  el3.classList.toggle(eventClass);
}

window.addEventLisntener('scroll', ()=> {
  elFunc();
}

btn.addEventLisntener('click', ()=> {
  elFunc();
}

/*
//js-elが追加された際のcss
#el1.js-el {color: red;}
#el2.js-el {color: blue;}
#el3.js-el {color: orange;}
*/

私が実装する際に考えたのは、「jsの読みやすさを重視して切り替えるクラス名を同じにし、cssでそれぞれプロパティを変える」という方法です。

また、コードの効率を重視する下記の考え方もありました。

HTMLで3つの要素をidではなく同じクラス名を付与し、getElementsByClassで取得。
上記を配列に変換し、forEachでそれぞれ「js-el」を切り替える。
（どの要素にjs-elを追加したのか、jsをパッと見ただけで想像つかないという観点から辞めました。）

上記の考え方以外にもまだまだ考え方はたくさんあるかと思います。

そもそも、切り替えるタイミングは同じでも付与するcssプロパティが異なるなら、クラス名は別々にした方がいいなど。

読みやすさ・効率・パフォーマンス面でどういう考え方がよいのかなど意見お聞きしたいです。

よろしくお願いいたします。