Q&A
「CSSをJavaScriptで管理したいと考えています。」とありますが、どのようなやり方でしょうか。
前提・実現したいこと
CSSをJavaScriptで管理したいと考えています。
なぜCSSをJavaScriptで管理したいと考えたのかというと、JavaScriptで管理をした場合、変数・条件分岐・ループ・jQueryなどでの動きや振る舞いが一つのファイルで管理できるので、少しは楽になるのではないかと思いました。
疑問・質問
かなり短絡的な疑問なのですが、JavaScriptでCSSを作成・管理した場合、どのような問題点があるのでしょう。
ページの読み込み速度が落ちたり、レンダリングがおかしくなったり等の問題があったりするのでしょうか？
やめたほうがいい理由などはありますでしょうか？
補足情報（FW/ツールのバージョンなど）
JavaScriptはあまり得意ではなく、普段はjQuery（時代遅れですが）を使用しています。
CSSはCSS3を使用しています。
回答4件
0
ベストアンサー
まぁ、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で追加された機能を利用して対応していく。
投稿2018/12/14 03:50
総合スコア21158
0
やめたほうがいい理由などはありますでしょうか？
- JavaScriptでは指定できない要素がある（例えば擬似要素）
- 必ず描画が遅れる（要素の出現後でないとスタイルを変更できないため）
- 管理と処理が煩雑になる（スタイルを構築するスクリプトを作る必要があるし、要素が増える度にそれを適用させる必要がある）
やってみてから悩んでもよいとは思いますが、ざっくりとこのあたりは避けられません。
投稿2018/12/14 03:03
総合スコア69400
0
ちょっと意味わからないですが
JavaScriptで適宜書き換えるという場合は、HTMLレンダリングの後に動作することになるのでHTML量にはよりますが何もスタイルが当てられていない画面がちょっと表示されてJavaScriptの処理を通ったところから逐次あたっていくので、そのあたりを考慮した作りが必要になるのでは。
いずれにしてもスタイルの定義はcssファイルにすべきとは思いますよ。
役割分担なしに本当に全部JavaScriptで書くなら余程しっかり詳細設計しないとスパゲティソースにしかなりません。
投稿2018/12/14 03:01
総合スコア80850
0
CSSをJavaScriptで管理の意味が分かりません。
素人が一般的な道から外れるようなことをしてはいけません。
CSSはCSS！JavaScriptはJavaScript！
何のために言語がわかれていると思っているのでしょうか？
投稿2018/12/14 02:54
総合スコア2321
あなたの回答
tips
プレビュー
