Question

说我有：

.checkout-form-container {
    // styles

    .checkout-radio-buttons {
         // styles
    }
}

（我知道这可能是一个范围，但是）有没有办法告诉.checkout-radio-buttons忽略它在层次结构中的位置并编译为：

.checkout-form-container {
     // styles
}        
.checkout-radio-buttons {
     // styles
}

为什么？

预编译器嵌套层次结构非常适合提高代码的可理解性。但是，就性能而言，仅使用顶级选择器比使用更复杂的选择模式更快。</ p>

请参阅：http://csswizardry.com/2011/09/writing-efficient-css-selectors/

选择者具有固有的效率，引用Steve Souders的话   因此，CSS选择器的顺序越来越低效：


ID，例如的#header

类，例如.promo

类型，例如格

相邻的兄弟姐妹，例如h2 + p

儿童，例如li> UL

后裔，例如ul a

环球，即*

属性，例如[类型=＆＃34;文本＆＃34;]

伪类/元素，例如一个：悬停

相反，如果你希望性能更好（即使只是略微），你应该在你的CSS中写出唯一的类名（或非重复元素的id）。

因此，能够以嵌套选择模式进行编写将提高代码的可读性，同时保持顶级选择器的更高性能。

我提出的解决方案需要一个顶级转义字符，例如！

.checkout-form-container {
    // styles

    !.checkout-radio-buttons {
         // styles
    }
}

将使选择器脱离其在层次结构中的位置。是否正在针对Stack Overflow规则向技术的创建者（在这种情况下：less，sass和stylus）提出价值主张？

Answer 1

这个问题的答案是否定的。

目前，less.js无法在层次结构中声明选择器，但忽略它们在层次结构中的位置。

Answer 2

您正在使用nesting。

嵌套选择器编译到其后代组合子中：

.parent {
  .child {
  }
}

输出：

.parent .child {}

或者您可以使用extend feature：

.selector1 { //styles }
.selector2:extend(.selector1) {}

输出：

.selector1,
.selector2 {
 // styles
}

Namespace可用于对mixins进行分组，以用于组织目的。

#checkout {
 .form-container() { //styles}
}

//caller:
div.form-container {
#checkout > .form-container;
}

输出：

div.form-container {
//styles
}

您的问题表明您正在寻找名称空间，而您的班级名称表明您正在寻找嵌套。

请注意，SASS和Stylus似乎也是如此。

忽略CSS预编译器层次结构中选择器的位置

2 个答案: