cssのフォーマット

Ordered List経由。cssの書き方って色々ありますが、一行とかで書くのはどうよ？っての見つけたのでちょっと考えてみます。

個人的にはセレクタにプロパティを設定するのは「{」「}」の中括弧で囲まれているわけで、Pythonみたいにインデントとかにこだわって構文解析しないんだから、一行で書こうが複数行で書こうが好き々々だと思うんですけどね。

以下のようなHTMLに指定をするとした場合。

<div id="head">ヘッダだよ</div>
<div id="contents">
<p>内容だよ</p>
<ul>
<li class="list">リストだよ</li>
<li class="date">リストに日付だよ</li>
</ul>
</div>
<div id="foot">フッタだよ</div>

改行を入れて容量的にも多少考慮

まずは容量も考えて改行を入れて書くとこんな感じになるのかな。あくまで例ですけどね。

#head {
width: 100%;
background: #cc0;
}

#contents {
margin: 1.0em 0;
}
#contents ul {
list-style: none;
}
#contents li {
font-size: 90%;
}
#contents li.list {
font-weight: bold;
}
#contents li.list {
color: #ccc;
}

#foot {
width: 100%;
background: #c00;
}

スポンサードリンク

つまり、改行のみであんまりスペースをいれずに書く感じっすよね。多少分かりやすくインデント入れてもいいかも知れないですが、そこら辺はCSSで容量食うのもなんですので管理のしやすさとのバランスって感じでしょうか。

私が良くやるのは上記のように書いておいて、大枠で分けたいときは(見た目として)コメントを一行入れたりしてます。

んで、試しに一行で書いてみる

次に一行で書いてみます。

#head { width: 100%; background: #cc0; }
#contents { margin: 1.0em 0; }
#contents ul { list-style: none; }
#contents li { font-size: 90%; }
#contents li.list { font-weight: bold; }
#contents li.list { color: #ccc; }
#foot { width: 100%; background: #c00;  }

縦への目線が便利になる。セレクタ部分で苦労するか、プロパティの部分で苦労するかの違いな感じもしてきた。

インデントしたらいいかも

ここで思ったのはインデントしたら分かりやすいのでは？って事。つまりセレクタとプロパティを纏めたブロックはHTML構造的に階層なんだからインデントでそれ表現したらもっと分かりやすいかも。

#head { width: 100%; background: #cc0; }
#contents { margin: 1.0em 0; }
     #contents ul { list-style: none; }
          #contents li { font-size: 90%; }
          #contents li.list { font-weight: bold; }
          #contents li.list { color: #ccc; }
#foot { width: 100%; background: #c00;  }

おー。結構いいかも。結局プロパティの部分の管理とかの難しさは残るけどセレクタの位置関係とかは把握しやすくなるかもしれない。実は一番最初の書き方でもインデントするとかなり分かりやすくなったりするんで本末転倒な印象もあるけど。

ま、結局好みの問題ですけどね。愚にも付かないエントリーでした。スマソ

スポンサードリンク