いちゃもんおじさんが来ないので、jQueryとCSSの相性と
コンポーネントの再利用についてのサンプル https://jsfiddle.net/rueg1xv2/

要件：フォームコントロールにフォーカスがあたったら背景色を変えたい。
ただし全てではなく指定した要素のみ色などはCSSで指定したい。
（CSSの:focus擬似クラスでできるがあえてjQueryでｗ）

設計：CSSベースで設計する。対象としたい要素のクラスにtargetを指定する
フォーカスがあたっている場合のクラスをfocusとし、jQueryからはクラス名を
変えるだけで、具体的なデザインはCSSで行えるようにする

実装：
[CSS]
.target.focus {
　　background-color: #eee;
}
[jQuery]
$(document).on({
　　focusin: event => $(event.target).addClass('focus'),
　　focusout: event => $(event.target).removeClass('focus')
}, '.target');

解説：構造（といっても今回のは要素だけのフラットなものだが）を
CSSで最初に決めるて処理を適用している。HTMLの構造には依存しないので
HTMLに変更があったとしてもjQueryのコードに変更は必要ない

HTMLとCSSの基本であるデザインをCSSに分離しており、CSSを変えるだけでデザインを変えられる

jQueryで必要なのは適用する要素のセレクタとクラス名だけなので、それを変数で
変えられるようにすれば再利用が可能だし、社内共通名として定義できるなら決めうちでも良い
複数の要素に対応していながら、コードにはループはなく、宣言的に記述している。
DOMを直接変更するなとか変な制限があるフレームークを使っていなければ、今すぐ導入が可能