Question

我真正喜欢LESS的一个功能是嵌套规则。它使样式表更加清晰，你可以很快找到一个元素。

我想知道在编译优化选择器时是否有选项。例如......

#global {
  /* Styles here maybe */

  .container {
    /* Styles here maybe */

    #sidebar {
      /* Styles here maybe */

      .title {
        font-weight: bold;
      }
    }
  }
}

将编译为#global .container #sidebar .title { font-weight: bold; }。

但前两个选择器没用，因为#sidebar在我的页面中应该是唯一的。

有没有办法让LESS将其编译为#sidebar .title { font-weight: bold; }？

Answer 1

您的假设是错误的，CSS中的多个ID是多余的。想象一下，例如，CMS在输出中生成页面类型的网站，就像它是联系页面一样：

<body id="contact">
  <section id="content">Blah</section>
</body>

根据您的逻辑，下面的CSS将成为“优化”的候选者：

#contact #content {
   background:red;
}

现在，您的主页当然在此虚构的CMS中有<body id="home">。突然，您的主页内容有红色背景，因为您决定错误地优化CSS #contact选择器，而根据此规则，它肯定不应该有红色背景。

所以不，LESS不能这样做，因为它会破坏代码。如果您不想选择者，请不要使用它们，也不要将它们放入您的代码中。

Answer 2

其他答案，包括已接受的答案，已经令人信服地解释了为什么LESS无法以您想要的方式简化您的嵌套选择器。

实际上，SASS有能力做到这一点：

#global {
    .container {
        @at-root #sidebar {
           .title {
               font-weight: bold;

@at-root指令基本上忽略了所有更高的嵌套选择器。我不知道LESS是否有类似的东西。以上简单编译成

#sidebar {
    .title {
        font-weight: bold;

但是这里有一个更深层次的问题，首先是你“喜欢”LESS中的嵌套规则。别再爱他们了。我不了解你，但大多数人都喜欢嵌套规则，因为他们认为完全模仿HTML的层次结构很酷。 SASS文档甚至声称这是一个好处：

Sass允许您以符合HTML相同视觉层次结构的方式嵌套CSS选择器。

所以HTML用户如

<div class="foo">
    <ul>
        <li class="item">

写下LESS，如

.foo {
    ul {
        li.item {

这是一个可怕的，可怕的想法，它使CSS的结构完全依赖于HTML的结构。如果在HTML中更改一个嵌套级别，则CSS会中断。通常这种方法与针对标记名称（例如ul）而不是类名定义的许多规则相结合，这会加剧依赖性，因此将HTML中的ul更改为ol会破坏再次规则。或者它与基于Bootstrap类的规则相结合，例如col-md-6，所以如果你将它改为col-md-4，事情就会再次中断。

CSS规则应该正交到HTML。它们代表了不同的维度。它们代表样式概念，它们在整个HTML中有选择地应用。

我猜你写的是

#global {
    .container {
        #sidebar {
           .title {
               font-weight: bold;

因为你正在采用这种错误的想法来镜像你的LESS中的HTML结构。然后，您会注意到这会编译为包含多个ID的选择器，您认为这些ID必须是低效的（尽管实际上，效率低的程度很小）。你自己在你的LESS中写了无关的嵌套级别，然后抱怨它们可能会降低性能！

更糟糕的是，您已经将关于HTML结构的假设硬连接到CSS中。侧边栏恰好落在.container元素内的global内。所以不要写它们。也许在某些时候您决定将container类更改为container-fluid。砰的一声，你的CSS会立刻崩溃。有条件的事实是标题应该是大胆的，因为它包含在container类中，在任何情况下都是与布局相关的类（或者应该与样式无关）？如果您要使用预处理器嵌套在CSS中复制HTML结构，只需返回编写内联样式即可。至少在这种情况下，当您更改HTML时，您只需要更改一个文件。

在设计CSS时，您应该像编写JS时那样考虑规则的设计和编写类和方法的设计。在这种情况下，你需要问自己，“我希望某些标题是大胆的情况的特征是什么？驱动它的是什么？大胆的本质是什么？我用大胆表示什么？大胆表达的语义概念是什么？？“

假设您希望所有标题都是粗体。然后你只需说：

.title { font-weight: bold }

假设您希望标题只在侧边栏中显示为粗体。然后你只需说：

#sidebar .title { font-weight: bold; }

我的建议是去冷火鸡。在撤回期间停止使用嵌套。使用最小数量的选择器组件编写规则。重构您的类以具有语义名称（例如title-emphasis）。一旦你“清醒”了，你可以在它有用时谨慎使用LESS的嵌套功能，例如可能是悬停：

#boo {
    color: red;
    &:hover {
        color: blue;
    }
}

这实际上很有用，可以避免两次编写#boo，并以易于理解的方式对规则进行分组。

编译时尽量少删除无用的ID

2 个答案: