paperboy-all/paperboy-all.github.io — pull request #17 by Tacahilo (2013-10-27 14:07:15+00:00)
Title: SCSSの導入

https://github.com/paperboy-all/paperboy-all.github.io/issues/10 に先立って、まずはSCSSを導入してみました。
middlemanはcssのファイル拡張子をscssに変更するだけで自動的にコンパイルしてくれます。

また、scss化にあたって以下の点に注意しました。

## セレクタの要素はアルファベット順に並べる

「なんらかの意味のある順」に並べていくと、複数人が編集していくにつれて分かりにくくなっていくことが懸念されたので、アルファベット順に並べました。
これにより、新たに要素を追加・削除する際に分かりやすくなります。

### 議論：widthやheightは隣り合わせのほうがいい？

widthとheight、あるいはpaddingとmargin、fontとcolorなど、2つ3つ並べることで何らかの意味を見いだせる組み合わせは確かに存在します。
しかし、「何をもって組と成すか」のルールを厳密に決める＆運用するのは体力が必要なため、今回は避けました。

## ワンラインで書くことを避ける

1行で書いてしまうと、あとから要素を追加しにくくなります。
また、場合によっては可読性が下がる可能性があります（改行を入れると逆に読みにくくなるケースもあるので、議論の余地はありますが）。

ただし、cssリセットの一部分に関しては、あのブロックで1つの意味として解釈出来うると考え、そのままにしています。

## セレクタのネストは1段階までにする

2段、3段とセレクタをネストしていくと可読性が下がってしまいます。
ネストを使う場合は1段階までに、孫までネストしないようにしました。