重複したセレクタを見つけて削除したい

Question

cssファイルを作成しました。
重複しているセレクタもあるので、重複しているものは削除したいです。

行いたいことは重複しているセレクタを見つけたいです。
使用しているエディタはvscodeです。
PCはmacを利用しています。
何か良い解決方法をご存知の方はご教授頂けますと幸いです。
宜しくお願い致します。

Comments

[meg_]

> 重複しているセレクタもあるので、重複しているものは削除したいです。
具体例を提示出来ませんか？

[umechan76]

ご返信頂き有難う御座います。

cssファイルの中に、
.header~
.sidebar~
.footer~
.header~
.sidebar~
.footer~
.header~
.sidebar~
.footer~
被っているものを把握したいです。
結果として１つにしたいです。
.header~
.sidebar~
.footer~
のように。

Answer 1

「CSS 最適化ツール」を使用しました。
CSS最適化ツール (based on CSSTidy 1.2)

設定はこの様にしました。
レスポンシブの記載が上に来てしまいますので、
そこだけをエディタで編集しました。

Answer 2

被っているものを把握したいです。
結果として１つにしたいです。

状況によっては、1つで書けない場合もありえます。

.foo{
  color: yellow;
}

.bar{
  color: green;
  border: 1px solid;
}

.foo{
  border: 2px solid;
}

このようなCSSがあった上で<div class="foo bar">に対して適用されるスタイルは、詳細度が同じなので後に書いたほうが優先され、color: green; border: 2px solid;となります。

むろん、こんな妙な構造を取ること自体よくないのは間違いないですが、シンプルに書き直そうとして元のスタイルを崩す危険もあります。

Comments

[umechan76]

maisumakun様

ご教授頂き有難う御座います。
今回は、CSSの最適化ツールにて解決する事が出来ました。
お忙しい中、ご親切に有難う御座いました。

Answer 3

「CSS 最適化ツール」で検索するといろいろ見つかります。それらを試してみてはどうでしょう。

例えば、
CSS最適化ツール (based on CSSTidy 1.2)
とか。

Comments

[umechan76]

hatena19 様

お時間を頂き有難う御座いました。
ツールの使い方が分からず苦戦しましたが、
無事、重複したクラス名を１つにまとめる事が出来ました。
有難う御座いました。

Answer 4

Ctrl + Shift + f　での検索ではどうでしょうか？

Comments

[umechan76]

検索機能を使用しての方法ではcssの行数が多いため非効率と考えました。
重複しているクラス名を把握出来ればと思っているのですが。

[meg_]

既にご存知の機能でしたか？その旨質問に記入されると回答がスムーズになるかと思います。