CSSの整理方法について質問です

Question

主にフロントエンドでコーディング業務をしている者です。
ページ数が百ページ以上はある大きなサイトで、長い年月の間、複数の人間が更新を繰り返してきたために、非常に複雑になってしまったサイトの整理整頓をしようと思っています。

特に、CSSの整理ついて
・CSSからCSSの読み込みを多重に繰り返していたり、
・違うディレクトリに同じ名前のCSS（common.cssなど）があったりで、
デベロッパーツールをつかっても構造が分かりづらいため、部分的な更新作業にも時間が取られてしまうことが多く、使用しなくなったCSSやスタイルの記述も溜まっていて、非常に無駄の多くなってしまっているCSSの改善に困っています。

「htmlから使用していないCSSを抽出する方法」について既に質問がされていたようですが、

（1）htmlから使用しているCSS（最終的に効いているスタイル）だけ抽出してまとめてくれるようなツールはないでしょうか？

（2）CSS内に記述されたスタイル側から、そのスタイルが適用されている箇所がわかる方法やツールがあれば教えていただきたいです。

（3）上記以外にも、CSSの整理、管理方法に関して、よい方法やツールなどご助言いただけたら大変たすかります。

よろしくお願いします。

Answer 1

こんにちは。
まずは、ごめんなさい、この回答は**「こういうツールがあるよ」という回答ではない**です。
そこだけ最初に言っておきますね。それでは何かといえば、いま自分が関わっている開発案件
でも、grapeeeさんの担当されているサイトと同様に、大量のHTML（実態は、Smartyテンプ
レートですが）とCSSファイルがあり、本当に活きてるスタイルがどれなのか、すぐには分か
らない状況になっていますので、おっしゃるような

(1) htmlから使用しているCSS（最終的に効いているスタイル）だけ抽出してまとめて
くれるようなツール

(2) CSS内に記述されたスタイル側から、そのスタイルが適用されている箇所がわかる
方法やツール

があればいいなと思いまして、軽くGoogleで調べてみましたが、案外無いものですね。
（あっても良さそうなものだけど、と正直思いましたが）

そこで、（私はサーバー側＋フロントエンドのJSも書くプログラミング担当なのですが、）
もし、WEBデザインやコーディングのチームのほうからgrapeeeさんのような要望があった
場合どうするかを考えましたが、多分「ツールを作ってしまいましょう」という提案をする
と思うので、以下に、実際作るならば、どんなプログラムになるのかのアウトラインを記し
ました。

まず、最も単純な場合として、ある１つのHTMLファイルに１つのCSSファイルが
読み込まれているケースを想定して、以下のプログラム１、２を作成します。

• プログラム１

(1)このCSSファイルのセレクタだけを読み込んで、１行１セレクタのテキストファイルを出力する。

• プログラム2

(1)検証対象のHTMLをパースして、（プログラムの中で）要素のツリーを作る。
(2)プログラム１が作ったセレクタのリストを読んで、上から順にそのセレクタに相当する
要素数を数える。（※該当要素を抽出するために、セレクタをXPathに変換する必要がある
かもしれないので、その際は適宜変換）
(3)その数えた結果を、ファイル（CSVとか）に、セレクタと該当数を１行にカンマ区切りで出力
→注目すべきは、該当数が０のセレクタですね。

といった処理を行うプログラムを書くことになるかと思います。

プログラム１の出力をテキストファイルにしないで、プログラム１と２を結合した
１個のプログラムにすることもできますが、ここではストーリーを分かりやすく
するために分割して２つのプログラムにしています。
このアウトラインを実装するには、HTMLのパーサー、DOM、セレクタ、XPath周辺の
知識があれば、そんなに作るのに難易度の高いプログラムにはならないと思います。

あとは、

• 1つのCSSが複数のCSSをimport している場合

や

• 静的なHTMLではなく、プログラムで動的にHTMLを作っている場合（例：Smarty、JSPなど）

に対応しなければなりませんが、これらは 1HTML-1CSSのチェックの応用なので、
(それなりに時間はかかると思いますが、)すごく難しいアルゴリズムを考えないと
クリアできない種類の難問ではないと思います。

これを実装する言語としては、PHPでもJavaでもRubyでも、または他の言語でも
できそうな気がしますが、機能が充実しているHTMLパーサーのライブラリがある
言語を選ぶのがよいと思います。
とはいえ、HTMLから、CSSセレクタなりXPathで要素を取ってくるのは、いわ
ゆるスクレイピングと呼ばれるよく知られた技術の範疇なので、どの言語でも便利な
ものはあると思います。（JavaならJsoup、RubyならNokogiri、など）

以上が、私からの回答としての
「こんなプログラムを書けばいいのでは？」
というのものになります。

（やや突き放した回答で申し訳ないのですが）もしgrapeeeさんのお近くで、上記の
プログラミングができそうな方がいらっしゃれば、ご相談されてみてはいかがでしょうか？

私からの回答は以上です。

Comments

[grapeee]

ご回答ありがとうございます。

そういったツールがない場合 自前で作るとしたらそれが可能かどうか、という質問を書こうか迷っていたので、ykt68さんの回答は大変ありがたいです。

私はプログラミングやシステムの知識が乏しいので、まずその開発をするとしたら、どの担当者が関わることになるのかというところさえわからなかったので、ご回答大変参考になります。

回答頂いたプログラミングの内容について、知らない用語や知識などあり、まだ全部は理解できていないのですが、難しいプログラムではないことが分かっただけでも良かったです。これから自分なりに少し調べて参考にさせて頂こうと思います。
まず取り急ぎコメントだけさせてもらいました。

ありがとうございました。

[jun68ykt]

ご返信ありがとうございます。お役に立てるかもしれない件、嬉しいです。なのですが、rikさんのご回答にもあるように、JavaScriptで要素を動的に追加しCSSを効かせているコードがかなりの量あるのでしたら、現場で実際に管理ツールとして使えるレベルにまでもっていくには、ツール開発自体がけっこう手強いものになるかもしれません。good luckをお祈りしております。

Answer 2

最近はJavaScriptで動的にタグを追加したり、スタイルを適用させたりという事がありますので、自動処理では漏れが出てしまうのではないかと思います。
私は100ページを超えるサイトであってもスタイルシートやjsは1カ所に集めるようにしていますが、チーム開発では分散することになるのはやむおえないかもしれません。
場所によってはCSSの上書きも考えられますので、CSS適用順番も考慮しなければなりません。
今のタイミングとしては、HTML5でモバイルフレンドリーで作り直しが良いような気もします。
答えになっていなくて申し訳ございません。

Comments

[grapeee]

ご回答ありがとうございます。

確かに、ページによっては作り直したほうが早いという選択肢もありますよね。
実際、内容やデザインが古くなったページを作り直す、という業務は常に、行われているのですが、コーディングや管理方法にルールがないために、私の質問したような問題は解決されないままになっているということもあります。

なので、その根本の運用管理についても同時に解決しなければならないことだと思います。

サイトの特徴として、部分的な改修や細かい更新作業が多いということから、共通のスタイルも個々のスタイルも分けずに、ページごとに一つのCSSファイルを用意するという方法を考えているところです。
回答頂いた「スタイルシートやjsは1カ所に集めるようにしています」と同じことなのかもしれませんね。

ご意見参考にさせて頂きます。ありがとうございました。

[jun68ykt]

そうですね。私が先に書いた回答のプログラムだと、おっしゃるような「JavaScriptで動的にタグを追加したり、スタイルを適用させたり」の部分までは追いかけきれません。Selenium WebDriverを使えば、JSで動的に追加された要素もプログラムから取得、制御できるかもしれないかなあ・・・と妄想しなくもないのですが、それだとツール開発自体が大変になりそうです。

[grapeee]

googleなどのデベロッパーツールでも最終的な適用スタイル（プロパティ）の結果をまとめて表示してくれる欄がありますが、あの結果を新たなCSSファイルとして生成することができればよいのにな（してくれる機能があればよいのにな）、と思ったりしました。
開発やプログラミングを知らない人間の安易な考えで申し訳ないのですが。