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

LessCSS编码标准

1 个答案: