CSSの記述方法について

Question

http://i.gyazo.com/a061941987ed45dbadcb068c364ddd9a.png

こちらのように、ぎっしりCSSを書いてあるのを初めてみたのですが、

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
background: #fff;
color: #000;
font-size: 14px;
line-height: 1.8;
margin: 0;
padding: 0;
}

こちらのような表示とどのような違いがあるのでしょうか？
ご教示頂けたら幸いです。

Answer 1

上のお二方がおっしゃっていますが、
webページを表示する際にブラウザからサーバに「index.htmlください！index.cssください！index.jsください！test.jpgください！」などの要求が行きます。
その際に要求するファイル「index.html、index.css、index.js、test.jpg」の容量の合計が少ないほど、
ブラウザ上にページが表示される時間が短くなります。
つまりユーザーさんを待たせる時間が少なくなるわけです！

そのため、ブラウザ上からサーバに要求するファイルの大きさを小さくしなければなりません。
→サーバーからファイルを取ってくる時間を短くする
→ファイルの無駄な部分をなくそう！
→スペースとか改行とかも一文字文の容量になっちゃうから全部なくしちゃえ！

ただスペースとか改行とか自分でなくすのマジめんどくさいのでそういう機能も付いたツールを使ってスペースや改行を全てなくしてるんですね！
それが上でおっしゃっているsassとかcompassとかなんです。
っていうことでcssやjavascriptはスペースや改行をなくすようになりました。

長くなっちゃいましたが質問者様の質問に簡単に回答すると

こちらのような表示とどのような違いがあるのでしょうか？

全く違いはありません。

ってかんじです（笑）

失礼します。

Answer 2

機能に違いは無いです。ファイルサイズが小さい方が、転送時間が短くなるので、差が大きければ表示が僅かに速くなります。

Answer 3

CSSの構文では、改行は単なる空白文字です。つまり、

A {
   foo: bar
}
B {
   hoge: moge
}

と書いても、

A { foo: bar } B { hoge: moge }

と書いても同じ意味です。

おそらく、その画像のCSSは、何らかのプログラムによって生成されたCSSであって、人間が手書きしたものではありません。

たとえばSASSあたりを使って生成したのかも。