プロパティ別整理法は損益分岐点が高いので、要注意。私は過去に3回挑戦して、ことごとく失敗しました。
私が失敗した理由は簡単、私の書く CSS はいつも簡単なものでしかなかったからです。あきやんさんのいう図書館方式の欠点
は、あくまでもヘビーなカススタイラーの抱える問題。私には関係ないのでありました。直感的なわかりやすさを犠牲にするだけの価値があるかどうか? 導入の際はよく注意すべきですね。
もう1点、付け加えるならば、そもそも CSS を基本的な形で利用する限り、CSS ファイルが肥大化なんてするはずがない。class 属性や id 属性や div 要素なんかを駆使して、同じ種類の要素に対して全然違うスタイルを指定しようとすること自体に問題がある。p 要素は段落なんだから段落らしくスタイル設定すればそれでよい。どうせいろいろ腑分けしてみたところで、ユーザスタイルシートの利用者には無関係な話。私は Opera でユーザモードを常用しているので、とくにそう思う。（参考："いろは"の先のCSS 第2回）
つまり、基本的には、1要素型につきスタイル指定は1回でよいのだし、であれば図書館方式
さえ必要ない。現に、最近のアドバイスで私が作成した改善案に用いられている CSS は、グループ化とか分類とか、そんなことは一切していない。50行に満たない CSS を書くのに、そんなことをいちいち考える方が面倒くさい。
……というレベルの方は、少なくないと思う。そして、それで別にいいんじゃないかと。
webmasterの印象では、多くのCSSは以下のルールで記述されています。
- 一つのセレクタに複数のプロパティを与える。
- 製作者の任意のグループ別に集める。
この文書内において、以上に基づいた整理法を図書館方式と呼びます。
- １セレクタに記述できるプロパティは一種類のみ。
- プロパティでグループする。
- グループは、プロパティの文字コード順にソートする。
- [セレクタ] { [識別名]:[値] }[改行] で記述する。
@charset "Shift_JIS";
/*-- position,width,height,float,display,margin,padding,color,background,font,border,etc. --*/
/*-- html,body,class,id --*/
*
{margin:0; padding:0; color:#333; background:transparent; font:normal normal normal 100%/1.5 Times,"Times New Roman","ＭＳ Ｐゴシック",Osaka; font-weight:inherit; border:none; text-align:left; text-decoration:none;}
html
{background:#fff url("/x/etc/img/x-walk.png") no-repeat fixed right bottom;}
body,div.break
{padding:0 30px;}
body
{padding-bottom:5em;}
body#index
{padding:0 0 5em;}
div.lv1a,dl.lv3
{float:left;}
div.lv1a
{width:49%;}
dl.lv3
{width:50%;}
div.lv2
{padding:0 10px 0 30px;}
div.lv2 h2
{margin-right:-10px;}
div.break,div.end,ul#address
{clear:both;}
div.break ul#ln,.hidden
{display:none;}
#gn
{position:absolute; right:0; top:0em; margin:0; padding:0.4em 1em 0.2em 0.5em; z-index:1; background:#fff; border-left:1px solid #bebebe; border-bottom:1px solid #7f7f7f; list-style:none outside;}
#gn li,.memo li,#address li,#address address
{display:inline; margin:0; padding:0 0.1em;}
#gn li
{white-space:nowrap;}
#ln
{width:17em; float:right; margin:0 -30px 1em 1em; padding:1.5em 1em 0.5em 0.5em; background:#fff; border-left:1px solid #006; border-bottom:1px solid #006; list-style:none;}
#ln ul
{margin:0; padding:0; border:none; list-style:none;}
#ln li
{margin:0; padding:0; font-size:100%;}
#ln ul li
{margin-left:1em;}
#recently
{width:10em; float:right; margin:-2em -30px 1em 1em; padding:0.5em 60px 0.5em 0.5em; background:#fff; border:1px solid #006; border-right:none;}
#recently dd
{margin-left:0;}
.selectsheet
{position:absolute; right:1em; top:2.5em; margin:0; padding:0.5em 0.5em 0.2em; z-index:1; background-color:#fff; border:1px solid #006;}
#address,address
{margin:1em -30px; padding:0.25em 30px; display:block; color:#000000; background-color:#eef; text-align:right; border-style:solid; border-width:thin 0; border-color:#ccd;}
#address li
{padding:0 0 0 0.5em;}
#address address
{padding:0; border:none;}
img
{border:none; vertical-align:bottom;}
/*-- common --*/
h1,h2,h3,h4,h5,h6,strong,caption,th
{font-weight:bold;}
h1
{margin:0 -30px; padding:1.1em 0.8em 0.1em; font-size:160%; color:#ddf; background:#006 url("/x/etc/img/x-h1bar.png") left top;}
h2,h3,h4,h5,h6
{margin:1em 0 0.8em; padding:0.1em 5px 0;}
h2,h3,h4
{color:#446;}
h2
{margin:1em -30px 0.8em -30px; padding:0 10px; font-size:130%; background:transparent url("/x/etc/img/x-hdg.png") no-repeat left top; border-top:1px solid #446;}
h3
{margin-left:-15px; font-size:110%; border-width:1px; border-style:outset; border-color:#bebebe #7f7f7f #7f7f7f #bebebe;}
h4
{margin-left:-10px; font-size:105%; border-bottom:1px solid #779;}
h5
{margin-left:-5px; border-bottom:1px dashed #779;}
h6
{padding-left:0; border-bottom:1px dotted #444;}
p,ul,ol,pre,blockquote,table
{margin:0.5em 0 0.5em 0.5em;}
p
{text-indent:0.8em;}
p.source,.longsource,pre
{text-indent:0; padding:0.5em; font-family:"ＭＳ ゴシック",monospace; border:1px solid #600;}
.longsource
{height:200px; overflow:auto;}
@media screen,tv {
p.long
{height:200px; overflow:auto;}
}
ul
{list-style:square outside;}
ol
{list-style:decimal outside;}
dl,dd blockquote dl,dd dl.lv3
{margin:0.5em 0;}
dd dl
{margin-left:-0.5em;}
li,dt,dd
{margin:0.2em 0;}
li
{margin-left:2em;}
dt
{padding-left:0.5em; background:#ddf; border-top:1px solid #99c;}
dd
{margin-left:2em;}
blockquote
{padding:0 0.5em; border:2px dashed #699;}
q,em,strong
{padding:0 0.3em;}
q
{color:#366; border-bottom:1px dashed #699;}
em,strong
{background:#eef;}
table
{border:1px solid #669; border-collapse:collapse;}
td,th
{padding:0 0.4em; border:1px solid #99c;}
th
{background:#eef; text-align:left; vertical-align:top;}
th,.start-tag,.end-tag
{white-space:nowrap;}
table.fig td
{text-align:right;}
textarea,input
{border:1px solid #446;}
input
{text-align:center;}
a
{text-decoration:underline; padding:1px;}
a:link
{color:#300;}
a:visited,a:active
{background:transparent;}
a:hover,dt a:hover
{padding:0; background:#ddf; border:1px solid #99f;}
del
{text-decoration:line-through;}
ins
{background:#eee; text-decoration:none;}
hr
{display:none;}
これくらい大きな CSS ファイルともなると、私も要素のグループ化をしていないわけじゃないですね。目次とかの段組関連とナビゲーションをコンパクトにまとめるためのスタイル指定は、HTML 文書の装飾として異常な部分なので、別枠にしてあります。ただ、それらはあくまでも例外部分の記述という扱い。中核をなすのは common と題されたグループで、全内容の6割以上を占めています。
HTML 文書は本質的には1段組であり、リストはリスト、段落は段落、という単純なフォーマット。その本分を外れたスタイル指定は例外であるべきだし、そういう考えがあれば、グループがどんどん増えていくなんて馬鹿なことは起こりえない。私の CSS のように、表紙専用の指定が少々、あとはナビゲーション関連、それくらいじゃない? 趣味レベルのサイトに必要なグループなんて、他に思いつかないんですけど。
長々とソースを記述する場合、最近はよく overflow 属性を使って小さな枠に押し込めてしまうのだけれど、それはなぜかというと、「どうせまじめに読む人は少ないでしょ」という。あと、私の書くのは、まじめに読まれても恥にしかならないソースだったりするので、それを隠蔽する意味でも全部の長々しいソースを圧縮表示（?）している次第。備忘録の本文まで圧縮し始めたら末期症状だと思う。
私は HTML ソース中で基本的にタブを用いません。タブを使うとソースが読みにくくなるからです。……と書くと、「頭オカシイんじゃないの?」といわれたりするのですが、そういうことをいう人のエディタをみたら、なんと「折り返し」を使っていなかったのでビックリしました。ウェブでは横スクロールバーは許せないとかいっているのに、エディタならいいの? その感覚、よくわかんない。
私は「折り返し」機能のないエディタなんて能率が悪くって使えません。マウス操作しにくいでしょ。……と書くと、「いい加減、キーボードに慣れたら?」といわれたりするのですが。私はブラインドタッチもできなくて、それはなぜかといったら、必要がないから。ブラインドタッチできる大抵の同僚よりも文章を書くのは早いし。みんな、キーボードを打つ時間より、何を書くか考えている時間の方がずっと長いわけで。負け惜しみですか、そうですか。
でもとにかく、ブラインドタッチもときどき練習するのだけれど、すぐに飽きてやめてしまう。「必要性」がなく「楽しさ」も感じない技能は身につかない。英語とか。社会人になって英語ができないなんてクズだからね! って脅されて20数年、案外、英語ができなくても社会人できちゃってたりする。会社には申し訳ないけれど。
文法チェック機能付タグ補完型エディタ Crescent Eve がフリーソフトになってからしばらく経ちましたが、みなさん利用されてますか? 私が以前、ご紹介したときにはシェアウェアだったのですが、フリーソフトになってからも順調にバージョンアップを重ねており、ますます便利になりました。
今、私はブラウザの「ソースを開く」で Crescent Eve が起動するように設定しており、また Crescent Eve の設定でファイルを開く際に文法チェックするようにしています。すると案外、記述ミスがよくみつかるので重宝しています。Another HTML lint より簡単ですし、みなさんにもお勧めします。
で、何がいいたかったかというと……（以下略／文法ミスの指摘なんてのはメールでした方がいいと思い直しました）