LessCSS編碼標準

Question

有沒有？

切換到less後，我通常這樣的代碼最終會：

.topNav{  
    prop: value; 
    ... 

    li{  
    prop: value; 
    ... 

    &:hover{ 
     ... 
    } 

    &.active{ 
     prop: value; 
     ... 

     a{ 
     prop: value; 
     ... 

     &:hover{ 
      prop: value; 
      ... 

      span{ 
      ... 
      } 
     } 

     span{ 
     ... 
     } 

     } 

    } 

    a{ 
     prop: value; 
     ... 

     &:hover{ 
     prop: value; 
     ... 
     }  

    } 

    } 

} 

它是壞？

Answer 1

我會說這不太理想。您應該查看http://smacss.com - 關於CSS組織的出色書籍。這不是特別的，有點相關。

其中一個原則與選擇的深度有關。部分上面的LESS編譯爲.topNav li.active a:hover span，它開始變得有點深（至少4，加上列出的層次結構中存在的任何元素）。這個問題將你的CSS緊密地結合到一個特定的HTML結構中。在不破壞CSS的情況下，稍後更改標記更加困難。

LESS提供了很多很酷的工具，但在我看來，嵌套選擇器的能力是一個容易被濫用的能力。