CSSの整理方法

質問

スタイルシートを1枚のCSSに
セレクタ { プロパティ : 値 ; }
で加え、長く記述しています。

これを
(1)同プロパティ：値　でまとめる
たとえば
.search{
text-align:center;
margin: 0;
clear:both;
padding-top: 10px;
}
.browse{
text-align:center;
margin: 0;
clear:both;
padding-top: 10px;
}
まとめて
.search, .browse{
text-align:center;
margin: 0;
clear:both;
padding-top: 10px;
}　
このような作業を行いたいのですが、同記述であることを表示確認できるようなフリーソフトはありますでしょうか？
プロパティ基準で自動整形をするフォームは知っていますが...

(2)現在使用していないスタイルを確認できるフリーソフトを教えてください。

CSSディレクトリ構造があいまいなまま膨大な量になってしまいました。ただいま、整理をしています。
よろしくお願いします。

回答No.4

noname#76085

つまり、CSSをきちんと反映させるには、正当なHTMLである必要があるので、最悪の場合HTMLもなおすことになってしまいます。

↑一番大事なところをテキストエディタからコピペミスした#3でした。

回答No.3

noname#76085

W3Cのページに、CSSが正当なものであるか（文法通りに書かれているか）を検証するページがあります。
http://jigsaw.w3.org/css-validator/
このページには、『CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。』と記してあります。
「正当なHTML」とは、HTMLの最初の<!DOCTYPE～～>宣言で決められているタグを使用し、タグの閉じ忘れやスペルミスのないHTMLです。これも検証するページがあります。
http://validator.w3.org/

HTMLは本来、ハイパーテキストに「タグを利用して文章（テキスト）に意味を付ける」ための言語ですが、<font>だのなんだの出てきてわけわからんっ！　と言うことになり、『HTMLは従来の目的通り「意味付け」だけを行って、視覚的効果などは別に指定した物を読み込んで使おう』とW3Cが提唱しています。
<p>は段落、<table>は表組み、などとよくつかわれるものはすでにタグが用意してありますが、個々の用途を考えるとすべてのタグを準備することは無理なので、classで意味付けを行います。
（↑ちょっと記憶があいまいなのでミスがありましたら指摘をお願いします）。

HTMLもCSSもお手軽に見えますが、「厳密なHTML」や「CSS本来の目的通り」は結構難しいものです。

実は私も、個人の道楽サイトですが、CSSの見直しをやっています。個人の趣味ですので、結局HTMLにまでメスを入れる大手術中です（苦笑）

回答No.2

ORUKA1951

これは、No.1さんの言われるように、classを複数記述するのが正解です。
　それ以外に、指定の詳細度を利用して(文字通りカスケードを利用して)、より上位でまとめるとか。HTMLのほうを工夫する。
div.footer{}
div.footer div.note{}
div.footer div.memo{}
・・・
　よほど、紛らわしくない場合以外はあまりまとめないですね。分かりやすさが一番です。
「CSSディレクトリ構造があいまいなまま膨大な量になってしまいました。」
　そりゃ、そんな書き方をしていると膨大になるだけでなく、後デワケワカメになること請合います。
例に挙げられた
　text-align:center;
　margin: 0;
　clear:both;
　padding-top: 10px;
同じ指定は、一度しか書かないということです。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
その方法は、classとHTMLの文書の階層構造を工夫する。セレクタの羅列は感心しません。
h1,h2,h3,h4{指定}
h1{指定}
はしますけどね。

　また、スタイルシートを複数枚用意する。
・初期値 default.css text-indentとかリンクの色とかfont-size
・配置だけ shape.css blockの配置や枠線の太さ
・前景背景 colorScheme.css 色指定

スタイルのどこで何が記述してありどのようになっているかは
firefoxにfirebug( https://addons.mozilla.jp/firefox/details/1843 )を入れれば解決します。

お礼

ありがとうございました。
firebugは便利ですよね。
ORUKA1951のおっしゃる通り、今ワケワカメです。
とりあえず、使用していないクラスをコメントアウトしてます笑。
しかも、私が作ったスタイルでなく前任者のコーディングの処理までしててますますワケわからんす。

非常に参考になりました。
スタイルを複数準備したいと思います。
ありがとうございます。

回答No.1

yambejp

cssは構造化された文書を修飾する仕組みであることは理解されていますね？

つまりここでいうsearchクラスとbrowseクラスは、たまたま構成要素が
同じですが、構造は違う可能性を常に秘めています。
（なんらかの必要に応じて、構造語とに個別に拡張がありうるということです）

つまりあえて.search, .browse{}のようにまとめてしまうのは
構造を捉える上ではあまり有効ではありません。

逆に、表示だけが問題であれば、
.xxx{
text-align:center;
margin: 0;
clear:both;
padding-top: 10px;
}　
という表示を調整するためだけのクラスをつくっておき

<div class="search xxx">hoge</div>

というような列記をしてつかえば、searchだけを拡張したりすることも
可能ですね・・・

お礼

そうなんですよね...
しっかりしたコーディング力、知識がなかった際に記述したもので、
ただ今膨大なCSSを整理しているのです。
ご指摘いただいた記述方法を使いやすいようにスタイルをまとめてます。
ありがとうございます。