cssで、離れた位置にある、同じタグへのスタイル指定を統合したい。

Question

p {
	margin: 0;
}
div {
	margin: 0;
}
p {
	padding: 0;
}

上記のようにたとえばpタグが、別のタグを一度挟んだあともう一度スタイル指定されているとします。

p {
	margin: 0;
	padding: 0;
}
div {
	margin: 0;
}

それを、上記のように同じ位置へと、自動的に統合してくれるようなツールを探しているのですが、何かないでしょうか？

少しの量しかないcssなら手作業でもいいのですが、実際に作業中のcssは、もう十何年も運用されているサイトのcssであり、ほとんど整理されておらず上書きに上書きを重ねるような書き方が何千行にも渡るので、手作業だと膨大な作業量になってしまいます。

Answer 1

「css まとめる ツール」で検索すると一番に

css最適化ツール

というのが出てきます。

提示されているコードを入れると期待されている動作はしていますが、

要素の書き方などによってはどうなるかわかりません。

Comments

[muro]

ありがとうございます。期待通りの動作をしてくれました。

Answer 2

「CSS 最適化ツール」でWEB検索すればいろいろ見つかりますので、いろいろ試してみてよさげなのを選択してください。

例えばGoogleで最初に出てきた
CSS Optimizer (CSS最適化ツール)-CSS TIPS
だと下記のようにまとめてくれました。

p {
margin:0;
padding:0;
}

div {
margin:0;
}

Comments

[muro]

ありがとうございます。期待通りの動作をしてくれました。

Answer 3

それを、上記のように同じ位置へと、自動的に統合してくれるようなツールを探しているのですが、何かないでしょうか？

ものによっては、自動で統合するとスタイルが変わる危険がありますので、おすすめしません。

pとdivの場合は排他的なので問題ないかと思いますが、クラス指定で複数入りうる場合、順番によってかかるCSSが違ってきます。

.foo { color: yellow; }
.bar { color: green; background-color: white; }
.foo { background-color: blue; }

このようなCSSがあった場合に<p class="foo bar">のように両方かけると、クラス1つで詳細度が同じなので後から書いたほうが優先され、color: green; background-color: blue;が適用されます。

Comments

[maisumakun]

もっとも、このようなCSSを書くこと自体、できれば避けたいものですが。