在编译时删除无用的ID

我真正喜欢LESS的一个特性是嵌套规则。它使样式表更加清洁，您可以快速找到元素。在编译时删除无用的ID

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

#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; }而不是？

来源

2014-09-19 Samuel Bolduc

你的建议是不正确的;这样的选择器对于排除其中外部ID不在其中的内部页面或状态是有用的。 – SLaks 2014-09-19 15:36:32

此外，指定多个ID可能会提高规则的优先级，以防还有一个'#myTitle {font-weight：300; }'属性（只有一个ID）。当你和像我这样的ID痴迷开发人员一起工作时，有这些功能是很有用的。 – Katana314 2014-09-19 15:37:51

LESS不能假定在给定页面中'＃sidebar'总是以'#global .container＃sidebar'出现，即使它在该页面内是唯一的，这就是为什么它不会尝试通过以下方式删除前两个选择器：默认。但真正的问题是，为什么你要把它放在那里呢？这看起来更像是一个创作错误，而不是预处理器的限制。 – BoltClock 2014-09-19 15:37:54

你的假设是错误的，CSS中的多个ID是多余的。试想一下，作为一个例子，在CMS生成的页面类型到输出，就像它的联系页面网站：

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

按照你的逻辑，以下CSS的一块将是“优化的候选对象'：

#contact #content { 
    background:red; 
}

但是，现在您的主页有<body id="home">当然在这个想象的CMS。突然你的主页内容会出现红色背景，因为你决定错误地将这个#contact选择器从CSS中优化出来，而根据这个规则它肯定不应该有红色背景。

所以不行，LESS不能做到这一点，因为它会破坏代码。如果你不想想要的选择器，不要使用它们，也不要把它们放在你的代码中。

来源

2014-09-19 15:39:15

或者将内部规则集移出，如果您需要外部规则组合。 – BoltClock 2014-09-19 15:44:38

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

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

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

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

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

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

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

因此，与HTML的人，如

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

写不像

.foo { 
    ul { 
     li.item {

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

对于HTML，CSS规则应该是正交。它们代表了不同的层面。它们代表着在整个和整个HTML中有选择地应用的造型概念。

我猜测你写

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

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

更糟的是，您已经将HTML结构的假设硬编码到CSS中。这是无关紧要的，侧边栏碰巧落入global元素内的.container。所以不要写它们。也许在某个时候，您决定将container类更改为container-fluid。繁荣，即刻您的CSS断裂。这个标题应该大胆地被包含在一个container类中，这在任何情况下都是一个布局相关的类，它与样式无关（或应该）无关，这有什么意义呢？如果您要使用预处理器嵌套在您的CSS中复制HTML结构，请回头编写内联样式。至少这样，当你改变你的HTML时，你只会有一个文件需要改变。

在设计CSS时，您应该认真考虑设计规则的问题，因为您在编写JS时需要考虑类和方法的设计。在这种情况下，你需要问自己：“什么特征说明我想要一些标题是大胆的情况？是什么驱使的？大胆的本质是什么？我用胆略来表达什么？大胆表达的语义概念是什么？”

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

.title { font-weight: bold }

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

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

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

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

这实际上是有用的，从写#boo两次可以节省您和组规则以易懂的方式呈现。

来源

2014-09-19 16:03:27

+1，值得加我的答案。 – 2014-09-20 01:09:43

在编译时删除无用的ID

回答

相关问题