スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

正月からWordPressでサイトを作っているのですが、そこでお世話になったテーマのCSSがプロパティごとで折り返していませんでした。見にくいなと思いつついじっていくうちに、折り返さない方がいいのではないかと思うようになってきました。

css-my-writing4.png

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

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-my-writing.png

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

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

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

css-my-writing2.png

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

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

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

css-my-writing5.png

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

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

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

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

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

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

結局好みの問題

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

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

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

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

今あるCSSを修正するには

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

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

Format CSS Online
css-my-writing3.png

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

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。