LESS中的分层/嵌套样式

Question

为了更好的可读性和更清晰的代码，我在LESS中使用嵌套样式，如下所示：

.item {
    .title {
        /* ... */
    }
    .content {
        /* ... */
    }
}

问题是它编译的后代选择器，例如：

.item .title {
    /* ... */
}

据说对性能非常不利。现代浏览器仍然如此吗？如果是这样，那么替代方案是什么？ （我的目标是有组织的代码，我可能不需要后代选择器。）

Answer 1

据我所知.item .title是在.title内选择.item的唯一方法（@ {Oriol提到的.item > .title可能在某些情况下有效） 。 Less使您能够嵌套此关系。

如果您不需要这种关系，则不应将其嵌套在Less代码中。可能使用注释来表明一组选择器属于某个其他选择器。或者考虑BEM方法，请参阅http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/，然后.item .title可写为item__title {}。