まぁ、CSSの表現力の貧弱さはご存知の通りです。
変数、ループ、外部ファイル読み込み周りでどうしても後手後手になるので管理が辛いのはわかります。
私もこの辺色々と悩み、案を考えて来ました。
JavaScriptでCSSを作成・管理した場合、どのような問題点があるのでしょう。
シッチャカメッチャカになるのはほぼ確定、
メンテ出来る人間が居ないので、ずっとあなた一人がWebサイトにつきっきりになるでしょう。
Lispやその他の言語からHTML、CSS、JSを生成する独自のメタ言語を開発する程の技術力があるのならともかく、
素のHTMLとJavaScriptで何とかしたいというレベルでは技術力が不足しすぎて不安になります。
最悪そちらの方向に向かうのも手ですが、
まずは既存技術を色々と調査してからでも遅くはないでしょう。
静的サイトジェネレータ
- Pug: HTMLをYAMLファイルのように記述出来るメタ言語、コンパイルするとHTMLファイルに変換されるのでそれを本番環境へデプロイする
- SASS: CSSに変数・ループ・外部ファイル読み込み・親子関係記述等の改良を施したメタ言語、コンパイルすると1個のCSSファイルに変換される
JSフレームワーク
- React: Facebookが開発している、人気は随一だが難解
- Vue.js: 現在2番手に人気で徐々に人気を拡大させている、導入が簡単
- Angular: Googleが開発している、仕様がコロコロ変わるのでしっかりリファレンスが読める人向け(そろそろ落ち着いたか?)
現状のベスト・プラクティスはこうです。
【簡単なサイトのケース】
Node.jsでPug、SASSをHTML、CSSに変換出来るツールを導入する
フロントエンジニアはPug、SASSファイルを作成・更新し、Node.js製のツールで変換してから本番環境へ適用。
Node.js製のツールにはWatchという概念があるので、Pug、SASSファイルを更新したと同時にNode.jsが検知し、ローカルの開発環境で動いているページを書き換えるのでブラウザでF5キーを押すだけで変更を確認出来る。
慣れてきたら、Node.jsで変換→本番環境へのデプロイを自動的に行えるスクリプトを組んで自動化
【複雑なサイトのケース】
JSフレームワークを導入して変数とテンプレートからDOMツリーが自動的に構築されるように調整
CSSはSASSのまま、JS世界の変数やテンプレートと直接連携が取れないのは少し悲しいが、テンプレートのクラス付けや複雑な要素はテンプレートのstyle属性直書き、CSS3で追加された機能を利用して対応していく。