blg-css: CSS 用 block grep |Emacs|blgrep|CSS|

CSS記述規則「プロパティ別整理法」の提案

大きな CSS ファイルを作ると、整理ができなくなって HTML につけた id や class 名が混沌としてくる。または、どんな id・class 名をつけるべきか混乱してくるという。そこで、あきやんさんが提案するのが「プロパティ別整理法」というもの。詳しい説明は、 あきやんさんのページを見てもらうとして、とりあえず概略をば。サンプルは、 自分のページで使っている CSS ファイル。

あきやんさん曰く、大低の人はセレクター毎にプロパティーを設定している。ぼくの CSS ファイルもそう。

body {
 margin: 1em 5%;
 line-height: 1.35;
}

h1 {
 text-align: center;
 text-family: sans-serif;
 text-size: xx-large;
 margin: 0.8em -5%;
 padding: 0.5em;
 background-color: #ffff00;
}

h2 {
 text-family: sans-serif;
 text-size: xx-large;
 border-bottom: 4px dotted #666666;
 padding-bottom: 4px;
 padding-top: 20px;
}

h3 {
 text-size: x-large;
 border-bottom: 2px dotted #666666;
 padding-bottom: 4px;
 padding-top: 20px;
}
(続く)

この方式を 図書館方式と名付けてる。不満点を一言であらわすと、

とにかく無駄な時間がかかることが不満です。

メンテナンス性の低さ、見栄えと関係の無い事象への負担が無視できないほどに大きいのです。これは、良いスタイルを目指す際の重い足かせとなっています。

とのこと。ぼくは、それほど大きな CSS ファイルは作ってないので不満はないけど、CSS 処理にバグを持つ NN4 とか IE5 の対策を入れている CSS ファイルはすごい事になっているので、大変そうなのは薄々分かる。

そこで プロパティ別整理法。これはシンプルに、1 セレクターに 1 プロパティーと割り切ってしまう方法。上の例をプロパティ別整理法で書くとこうなる。

/* background-color */
h1 { background-color:#ffff00 }

/* border-bottom */
h2 { border-bottom:4px dotted #666666 }
h3 { border-bottom:2px dotted #666666 }

/* line-height */
body { line-height:1.35 }

/* margin */
body { margin:1em 5% }
h1 { margin:0.8em -5% }

/* padding */
h1 { padding:0.5em }

/* padding-bottom */
h2 { padding-bottom:4px }
h3 { padding-bottom:4px }

/* padding-top */
h2 { padding-top:20px }
h3 { padding-top:20px }

/* text-align */
h1 { text-align:center }

/* text-family */
h1 { text-family:sans-serif }
h2 { text-family:sans-serif }

/* text-size */
h1 { text-size:xx-large }
h2 { text-size:xx-large }
h3 { text-size:x-large }
(続く)

いろいろ利点はあるそうだけど、ぼくはプロパティーごとに設定が分かるのがよいなぁと思う。セレクター単位でプロパティー値を見るには、grep を使えばよい、とのこと。

blg-css.el

さて、ここからが本題。プロパティー別な情報をセレクター別な情報に grep で変換できるというなら、セレクター別な情報 (旧来の方法) をプロパティー別に直すこともできるんじゃない? というわけで、 blgrep の CSS 用フロント・エンドを作ってみた。フロント・エンド名は blg-css。提供する関数は blg-css と blg-css-line の二つ。

実行例はこんな感じ。

• M-x blg-css RET text-size

  h1 {
   text-align: center;
   text-family: sans-serif;
   text-size: xx-large;
   margin: 0.8em -5%;
   padding: 0.5em;
   background-color: #ffff00;
  }
  
  h2 {
   text-family: sans-serif;
   text-size: xx-large;
   border-bottom: 4px dotted #666666;
   padding-bottom: 4px;
   padding-top: 20px;
  }
  
  h3 {
   text-size: x-large;
   border-bottom: 2px dotted #666666;
   padding-bottom: 4px;
   padding-top: 20px;
  }
  (続く)
    

• M-x blg-css-line RET text-size

  h1 {
   text-size: xx-large;
  h2 {
   text-size: xx-large;
  h3 {
   text-size: x-large;
  h4 {
   text-size: x-large;
  h5{
   text-size: large;
    

blg-css-line が、プロパティ別整理法の代わりに使える。ただし、検索結果が不完全な CSS ファイル (閉じの中括弧がない) になってしまうのと、セレクターとプロパティーの間に改行が入ってしまうのが嫌らしい。 blg-css は、検索に引っかかったセレクターを丸ごと出力するので旨味はないかな。

完全なプロパティ別整理法がやりたければ、あきやんさんが作っている 蓄々CSS自動整形を使うべきだと思うけど、

尚、小規模なCSSは例外ケースとなります。

また、CSSを新たに構築する際もプロパティ別整理法で書き始めることは推奨されません。 多くのCSSは図書館方式で整理されている

ということなので、プロパティー別整理法に移行する前の中位いの CSS ファイルで blg-css は使えるじゃないかな。

blg-css のインストール

まず、 blgrep 0.2 をインストール。その後、下の blg-css.el をダウンロードして、blgrep.el をインストールした場所と同じ所に入れます。

• blg-css.el

最後に、.emacs に次の二行を入れれば、 M-x blg-css, M-x blg-css-line ができるようになります。

(autoload 'blg-css "blg-css" "CSS grep." t)
(autoload 'blg-css-line "blg-css" "CSS grep line." t)

via

• たつをの ChangeLog: プロパティ別にCSSを記述する方法