webサイトで記事ではなく図のあるページ。
ユーザーがform操作によりページ内のある範囲や部品を表示・非表示。
その方法の区別や使い方で質問です。

(1)CSSに初期値を持たせる
SS…#hoge {display: none;}
JS…$('#hoge').show()、〜.hide();

(2)JSに初期値を持たせる
SS….hide {display: none;}
JS…$('#hoge').addClass('hide')、〜.removeClass('hide')

(3)HTTMLに初期値を持たせる
HTML…<〜 class="hide">
JS…$('#hoge').addClass('hide')、〜.removeClass('hide')

(2)でデフォが非表示の場合、ページ読み込み時の見た目悪いので下の方や小さい部品が主です。
みなさんはどれかに統一？
併用の場合その区別の仕方（○○の場合は(1)など）教えてください。