CSSの関連要素をインデントするのは良いコーディング規則ですか？

Question

このようにコードをインデントして、CSSのコーディング規則を整えていますか？

 .bg-twitter { 
      padding: 50px 0; } 
      .bg-twitter .tile-twitter .twitter-message { 
      border: 2px solid #eee; 
      padding: 10px; 
      margin: 10px; 
      display: block; 
      color: #222; } 
      .bg-twitter .tile-twitter .twitter-message:hover, .bg-twitter .tile-twitter .twitter-message:focus, .bg-twitter .tile-twitter .twitter-message:active { 
       border-color: #0C518A; 
       text-decoration: none; } 
      .bg-twitter .tile-twitter .twitter-message:focus { 
       border-color: #999; } 
      .bg-twitter .tile-twitter span { 
      text-align: center; 
      display: inherit; } 
      .bg-twitter .tile-twitter span a:hover, .bg-twitter .tile-twitter span a:focus, .bg-twitter .tile-twitter span a:active { 
       border-color: #0C518A; 
       text-decoration: none; 
       font-weight: 400; } 

そうでなければ、まっすぐに進むべきですか？

Answer 1

どのコードを読みやすくすると思いますか？本当にきれいなコードを書くことが少ないかSASS使用:)

.bg-twitter { 
     padding: 50px 0; 
    } 
    .bg-twitter .tile-twitter .twitter-message { 
     border: 2px solid #eee; 
     padding: 10px; 
     margin: 10px; 
     display: block; 
     color: #222; 
    } 
    .bg-twitter .tile-twitter .twitter-message:hover, 
    .bg-twitter .tile-twitter .twitter-message:focus, 
    .bg-twitter .tile-twitter .twitter-message:active { 
     border-color: #0C518A; 
     text-decoration: none; 
    } 
    .bg-twitter .tile-twitter .twitter-message:focus { 
     border-color: #999; 
    } 
    .bg-twitter .tile-twitter span { 
     text-align: center; 
     display: inherit; 
    } 
    .bg-twitter .tile-twitter span a:hover, 
    .bg-twitter .tile-twitter span a:focus, 
    .bg-twitter .tile-twitter span a:active { 
     border-color: #0C518A; 
     text-decoration: none; 
     font-weight: 400; 
    } 

SCSS：

.bg-twitter { 
    padding: 50px 0; 

    .tile-twitter { 
     .twitter-message { 
      border: 2px solid #eee; 
      padding: 10px; 
      margin: 10px; 
      display: block; 
      color: #222; 

      &:hover, 
      &:focus, 
      &:active { 
       border-color: #0C518A; 
       text-decoration: none; 
      } 

      &:focus { 
       border-color: #999; 
      } 
     } 

     span { 
      text-align: center; 
      display: inherit; 

      a { 
       &:hover, 
       &:focus, 
       &:active { 
        border-color: #0C518A; 
        text-decoration: none; 
        font-weight: 400; 
       } 
      } 
     } 
    } 
}