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提供了很多很酷的工具，但在我看来，嵌套选择器的能力是一个容易被滥用的能力。