CSSをプロパティごとで折り返さずに書くと意外とよかった

プロパティごとで折り返さないというのはこんな感じです。

p { margin: 0; padding: 10px 0 0; color: #222; font-size: 15px; line-height: 130%; }

プロパティごとで折り返して書く場合はこんな感じです。

p {
  margin: 0;
  padding: 10px 0 0;
  color: #222;
  font-size: 15px;
  line-height: 130%;
}

この2つを比べると当然折り返す方が見やすいです。

では、なぜ折り返さない方がいいと感じるようになったかというと、パソコンのディスプレイを有効に使うことができるからです。

右側に広大なスペースが生まれる

普段Dreamweaverを使っているのですが、CSSをプロパティごとで折り返して書くと右側に広大なスペースができてしまいます。ちなみにディスプレイは1920x1080のものを使っています。WordPressで編集する場合も、これほどでもないですが右側にスペースができます。FC2の場合は編集スペースが小さい（縦は調整できるが横はできない）のであまりスペースはできません。

スペースができると困ること

プロパティごとに折り返してCSSを書くと、当然ながら全体は縦に長くなります。縦に長くなると、お目当てのセレクタを探すのに手間取ります。セレクタはある程度順序だてて並べていますが、セレクタの数が多くなるとコード自体縦長になるので、スクロールする必要があり、探すのに時間がかかってしまいます。

そこで、プロパティを折り返さずに書くと横長の１行になるため、より多くのセレクタをスクロールすることなく見ることができます。

同じコードですが、折り返していたときと比べると非常にすっきりしました。折り返すときと比べると全体の長さは相当短くなります。

この例はコードも短いので折り返さずに書く必要もないかもしれませんが、量が多くなるほど折り返さない方がセレクタは探しやすくなります。

アップするとこんな感じです。

とはいっても折り返さないと見にくいのでは！？

確かに、折り返さないとプロパティは見にくいです。ただ、私の場合プロパティを書く順番を決めているので、意外とすぐ慣れました。

プロパティの順番については以前記事にしています。

プロパティの書く順番については、これが正しいというのはないようですが、私のようにプロパティの性質的に並べる方法や、アルファベット順に並べる方法を採用している方が多いようです。

ちなみにプロパティを指定した順番に並べ替えるサイトもあります。

「Settings」をクリックするとデフォルトの順番が表示されますので、そこを自由に編集すると自分なりの順番に並べ替えることができます。

結局好みの問題

折り返すとプロパティは見やすいですが、セレクタは見つけにくくなります。折り返さないとセレクタは探しやすいですが、プロパティは見にくくなります。

ですので、どちらが正しいというのはなくて、結局好みの問題だと思います。

私はプロパティを折り返さずに書かれていても気にならなくなりましたが、同じ行にプロパティが次から次へと書かれているのは我慢できないという方もいると思います。

そういう場合は、プロパティは折り返して書いた方がいいでしょう。

今あるCSSを修正するには

ここまで読んで、自分も一度試してみようと思った方のために、プロパティごとで折り返しているCSSを折り返さないように整形してくれるサイトを紹介します。

同じようなサイトはいくつかありますが、色々試したなかで一番おすすめなのがこちらです。

Format CSS Online

何がおすすめかというと、カスタマイズ性の高さです。様々なポイントで「折り返し」、「タブ」、「スペース」、「何もしない」を指定するとこができます。英語ですがそんなにややこしくはないと思います。

ということで、CSSのプロパティを折り返さずに書く方法のメリット、デメリットなどを紹介しました。後で元に戻せますので、気になった方はぜひお試しください。