WEBサイトの作成や修正の時に役立つスタイルシートの運用を考えてみた

最近、ちょっとしたWEB用のページを作るときや修正をするときにCSSの編集に疲れてきたので何とか便利になる方法はないかなと考えてみた

ブログ記事は画像を使っていても画像の大きさを気にして配置のサイズを考える必要もない
記事は下のような感じになる
ブログの構成イメージ

スタイルシートで

と書いておけばなんとなくうまくいく

だけど、しっかりしたコンテンツを作っているとそうはいかない
コンテンツの内容によっては構図は同じでも画像サイズが違えばテキスト部分の幅に違いがでてくる
20160406_011

スタイルシートを普通に書いていくとこんな感じになる
20160406_012

コンテンツ1とコンテンツ2に使用するタイトル部分や画像のサイズが違うので、それぞれの部品を個別で記述して幅を指定してます
20160406_013

3つ目のコンテンツが追加された場合に、タイトル部分はコンテンツ1と同じでテキストと画像の配置関係はコンテンツ2と同じなので、それまでのCSSセレクタを再利用してみると
20160406_014

セレクタを再利用しているのでCSSに余分な記述を増やさずに済みますが、半年後や1年後に「3つ目のコンテンツの画像を違うサイズのものと変えて」とか「3つ目のタイトルだけ色を変えて」と要望が出たときにセレクタを新しく追加すればいいものの、追加せずに書き換えてしまうと他のコンテンツに影響がでてしまいます
同じページならば改修しているときに気がつきますが、別のページでもセレクタを再利用していたら影響範囲は広がってしまいます

セレクタを追加して対応していても、改修が重なるたびに使われていないセレクタが増え、クリーニングしようとしても「別のページで使ってるかも・・・」という脅迫概念が不要なセレクタを削除する勇気を消し飛ばしてしまいます
そこで、考えたのが『メインのセレクタは箱を作ることを基本として細かい指定(サイズや色)は追加で対応する』ということです
20160406_015

スタイルシート自体は下記のような記述を

サイズと色の指定を分解して

使い方は

例の状態だけでは個別にセレクタを作っていったほうが記述も少なくてすみますが、ページ数が増えたり、コンテンツが多いくなってくると便利になってきます
余分な記述も増えるけれどもメンテナンスしやすく、改修作業をやっている時も「こんな感じでどう?」というのがセレクタの追加指定だけで実現できます
※実際に使っている中ではfloatやmargin,borderなども分けて使っています

細かく作ったセレクタはベースのスタイルシートとして保守していれば別のサイトにも使い回しができるので複数のサイトを運営していても管理を簡素化できます

作っている例