ねこめしにっき（2007年1月）

2007年5月20日

「ぴんくいんでんと」 : ぴんくすとらいぷ的萌える CSS 書式 (2007/05/20 - 07:00)

一度くらいはこの日記かサイト中のどこかで言及してたような気がしていたけど、実はしていなかったらしい話。

CSS や JavaScript を記述するとき、中括弧の前で改行してインデントを入れ、その中身とインデント幅をそろえるというスタイル。具体的には、以下のような書き方になります。

body
    {
    margin: 0;
    padding: 0.5em 10px 0.5em 40px;
    text-align: left;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    }

このスタイルは「娘娘飯店しるきぃうぇぶ (www.remus.dti.ne.jp) 」というサイトで使われているのですが、このサイトがおおむねピンク色であることから、「ピンク色のサイトで使われているインデント」ということで「ピンクインデント」と呼ばれるようになりました。

えーと、ひらがなで「ぴんくいんでんと」とするのが正しいです！　そもそも何故かひらがなで書く事になっている「ぴんくすとらいぷ」（当サイトのどピンクな優先スタイルのなまえ）の CSS を書いてるうちに編み出した萌えるインデント規則なので。それと、JavaScript を記述するときとありますが、ぼくはジャバスク書く時までぴんくいんでんとしてませんヨー。

あ、そうそう、ここでは <pre> 要素の仕様都合上、インデントを半角スペース 4 つで表現していますが、実際にはタブ文字ひとつです。

上記ルールのほかにはこんな縛りも：
  • プロパティとその後ろのコロンは間を開けない。コロンとプロパティ値の間は半角スペースひとつ。

  • セレクタの列挙をするときは、（それが文字数的にどんなに短くても）ひとつひとつ必ず改行する。つまりこういうこと：

    h1,
h2,
h3,
h4,
h5,
h6
    {
    font-weight: bold;
    }

    当サイトの CSS 群は最早 5 年以上メンテモードなんで、この縛りの無い頃の状態をそのまま引きずってきてますが。

そして効能：
  • 開く閉じるの両カッコまでもプロパティ群と同じ段に揃えたことで、問題のセレクタを目視でざーっと探す時にすぐ見つかる。
    （両カッコがインデント無しの行頭にあると、おなじくインデント無しのセレクタ部と水平位置が混じって目にジャマクサイ）
  • 開始カッコをセレクタ群の次の行へ追いやることで、セレクタ記述をコピペ追加するときや、行選択でサクッと消すときに面倒くない。
    （セレクタと同じ行の行末に開始カッコを置くルールだと、いちいちカッコ位置を調整しなおしになってウザイ）
  • 同じく開始カッコをセレクタ群の次の行へ追いやることで、セレクタ列挙末尾の余計なうっかりカンマにも気づきやすい。
    （セレクタと同じ行の行末に開始カッコを置くルールだと、なかなか気づきにくく、そのせいでスタイル効かなかったりしてムキーとなる）
  • セレクタひとつにつき必ず改行するので、列挙時のカンマの付け忘れに気づきやすい。
    （カンマして横にづらづら書いて行く形だと、単純子孫セレクタなのかどうなのか、見分けが一瞥でつかなくて死ねる）

そりゃね、ぱっと見、キモいインデント規則ですから人様にはオヌヌメしませんよ？　ってか自分自身も編み出した当初はキモい恥ずかしいでモニョモニョしてたモンですが。慣れきった今ではもう、時々人から「キモイネ」とかイランこと言われる他に問題は何もありませぬ。昨今何かの業務的用事（何）で書く際も、特にルールに制約が無いならば、積極的にイケイケでぴんくいんでんとしちゃうます。

そういえば、ずいぶん前にこの「ぴんくいんでんと」的な何かについては言及され済みだったのでした。

少しでもプログラミングをしたことがある人なら、最後の方法（「ぴんくいんでんと」な書き方の事）は絶対に避けるでしょう。実際に、避けたほうが無難です。将来、複雑な入れ子をするような仕様になってきた時に、対処しきれなくなります。

確かに入れ子するとキモさが倍増しますが、いまんとこ問題ありませんことよ。たとえばぼくの Camino のユーザスタイル中にはこんなのが。

@-moz-document domain(ime.nu),
               domain(ime.st),
               domain(pinktower.com)
    {
    body > div,
    body > table,
    body > hr,
    body > p,
    body > center
        {
        display: none !important;
        }
    }

…いやこれはさすがにキモすぎるかも。

Copyright © 1998-2007 ALIMIKA SATOMI/NYAN-NYAN-HANTEN.