CSS 既存のスタイルに重複する項目を削除したい。

Question

前提・実現したいこと

仕事で、外部サイトに埋め込まれるHTMLタグのCSSを作成する仕事をしています。
結果的にはstyleタグで出力されますが、その部分は社内システムで自動化しているため、単なるCSSの質問として考えて構いません。

社内システムで、枠組みとなるデフォルトCSSが用意されており、不足する部分を追加CSSで補っています。
このデフォルトCSSの仕組みが作られたのが最近で、その前は全て手書きCSSでスタイルを指定していたため、
過去作成されたCSSは、多くの部分がデフォルトCSSと重複しています。

保守性の向上のため、過去のCSSから、デフォルトCSSと重複している項目を削除する必要があるのですが、
この作業が全て目視と手作業で実行している状況です。
部分的にでも自動化して、取りこぼしの削減や、作業時間の短縮をしたいです。
よいツールや手法を教えてください。

試したこと

GoogleでCSSの整形ツールを沢山調べたのですが、
重複する部分を統合してくれるツールは沢山ありましたが、重複する部分を削除してくれるツールが見つかりませんでした。
（統合してしまうと、今度は重複しなかった部分が追加CSSに含まれてしまうので、目的に合いません。）

長時間かけて、デフォルトCSSのプロパティをエディタで無意味な文字に置換して、追加CSSの前部にペーストして、
整形ツールで統合してから、プロパティが無意味な文字になっている行だけ削除する、みたいな手法を考えてみたのですが、
それは最終的にただ単に追加CSSで（重複する部分も含めて）全て上書きするだけの結果になってしまい、時間を無駄にしてしまったことを後悔しています。

具体的に試してみたサービス

(仕事中は見つけたものを手当たり次第試してたので、思い出せる範囲内で記録。)

• W3C CSS Validation Service - 重複していても、「おめでとうございます！エラーはありません」という結果になる。
• CSSO,cssnano - デフォルトCSSと追加CSSが統合されてしまい、追加CSSの分だけ取り出すことが出来ず失敗。
• difff - 単純な文章の差分を探すサービスなので、重複しているスタイルなどは抽出できず失敗。
• CSS LINT,SYNCER,WebTools,CSS Portal - インデントや改行の整形機能のみだったため失敗。
• Pretty Diff - 英語かつ、構成が難解で、目的の機能を達成しているかどうかのテストすら難しい。実行結果のどこをコピーしていけば目的の部分を抽出できるのか分からず、実用的じゃない。
• WinMerge - Mac非対応のためテスト不可。
• Diff Checker - 左方に !important を入れたり、右方に書いてないセレクタを左方に書いても左方が赤く表示されるので目的の機能ではない。

勉強会で相談してみた結果

• 未使用のCSSを削除してくれるサービスを使って、重複している項目をリストアップする方法を提案されました。

→この方法だと、追加CSSで値を上書きしているプロパティまで、デフォルトCSSで未使用と判断されてリストアップされてしまう。結局重複してるのか上書きしているのかを目視で確認する必要がある。

補足情報

作業環境はMac OSXです。
デフォルトCSSを取得することはできますが、削除することはできません。
デフォルトCSSを追加CSSで上書きすることは出来るので、必要があれば日常的に上書きしています。
外部サイトに埋め込まれるHTMLタグは、ひとつひとつは小さいものですが、数は沢山あります。
埋め込む対象の外部サイトというのも、不特定多数のサイトです。

Comments

[yasutomi]

Googleで検索して見つからないということはないと思うのですが
どのようなキーワードで検索して見つからなかったのでしょうか。
> GoogleでCSSの整形ツールを沢山調べたのですが、
> 重複する部分を統合してくれるツールは沢山ありましたが、
> 重複する部分を削除してくれるツールが見つかりませんでした。

[H40831]

私も、ありそうだと思ったので、一日中
「CSS 重複 削除」「CSS 重複 チェック」
「CSS 整形」「CSS diff」
などで調べたのですが、重複部分を削除してくれるツールは見つけることができませんでした。
IT業界歴も短いので、検索ワードが検討違いであれば、そのヒントだけでも嬉しいです。

Answer 1

上司に相談した結果、
既存のツールでの対応は難しいと判断し、
オリジナルのツールを制作しようという事になりました。

Answer 2

検索のヒントだけ回答します。
https://support.google.com/websearch/answer/2466433?visit_id=636985300579894860-2933024200&p=adv_operators&hl=ja&rd=1

Comments

[H40831]

ありがとうございます。せっかく教えていただいた上で恐縮ですが、頂いたヒントだけではやはり目的に叶う検索ワードを導きだすことはできませんでした。
検索結果としては、統合して整形してくれる CSSO や、文字の差分を表示してくれる difff などが見つかりましたが、目的の機能ではありませんでした。
あとは、海外製のWEBサービスでいくつかそれっぽいものもあったのですが、表示方法が古風なうえ説明分の英語も難解なため、使いこなせれば目的に合うようなものもあったのかもしれませんが、できれば日本語のわかりやすいツールを探しています。
（仕事中なので、目的に合うかどうかもわからない状態で、そのツールについて詳しく調べ上げるのは躊躇しますし、仕事の引き継ぎがあったときにも一苦労だと思いますので。）

[yasutomi]

日本語に絞るとツールは存在しないので
これ以上探しても徒労に終わります。

あと仕事でコーディングを行っているのであれば
英語もTOEICの平均点程度良いので
学習しておいたほうが良いです。

英語力は情報収集能力と問題解決能力に直結します。
> できれば日本語のわかりやすいツールを探しています。

[H40831]

そうなんですね！
目的は単純なものだと思っていたため、日本語のツールでは目的が達成できないという知識を教えていただき、助かりました。
整形ツールは日本語でもゴロゴロ転がっており、似たようなものだろうと思って探していたので、そうではないという事だけでもビックリしています。

英語のツールは嫌で避けたいたわけではないですし、質問内容に追記したとおり、見かけたものは試してはいたのですが、いまいち目的の処理は行えず困っております。

今後は英語のより深い学習も視野にいれていきますが、
現時点で私の英語レベル(外国人の母親と英語でLINEメッセージするレベル)だと、古いUIかつ専門的な文章のツールの説明を読み解きながら目的に合うものを探せるレベルには至っておりません。

しかし仕事時間を英語学習に使うことはできないので、まだ問題は解決しておりません。
他にも具体的なヒントや回答があれば、教えていただければ助かります。