在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

您如何看待哪些代码更易于阅读？使用less或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;
                 }
             }
         }
     }
 }