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