title: Is there a proper and wrong way to format CSS?
body: <p>When I first started writing CSS, I was writing it in an expanded form</p>
  
  <pre><code>div.class {
      margin:      10px 5px 3px;
      border:      1px solid #333;
      font-weight: bold;
      }
      .class .subclass {
          text-align:right;
          }
  </code></pre>
  
  <p>but now I find myself writing css like this: (Example from code I'm actually writing now)</p>
  
  <pre><code>.object1 {}
      .scrollButton{width:44px;height:135px;}
          .scrollButton img {padding:51px 0 0 23px;}
  .object2 {width:165px;height:94px;margin:15px 0 0 23px;padding:15px 0 0 10px;background:#fff;}
      .featuredObject .symbol{line-height:30px; padding-top:6px;}
      .featuredObject .value {width:90px;}
          .featuredObject .valueChange {padding:5px 0 0 0;}
          .featuredObject img {position:absolute;margin:32px 0 0 107px;}
  </code></pre>
  
  <p>and I'm beginning to worry because a lot of the time I see the first form done in examples online, while I find the second form a lot easier for me to work with. It has a lower vertical height, so I can see all the classes at a glance with less scrolling, the tabulation of the hierarchy seems more apparent, and it looks more like code I'd write with javascript or html. Is this a valid way of doing code, or to keep with standards when putting it online should I use the vertical form instead?</p>