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

【问题标题】：Ignore position of selector in a CSS precompiler hierarchy忽略 CSS 预编译器层次结构中选择器的位置
【发布时间】：2015-02-07 18:42:48
【问题描述】：

说我有：

.checkout-form-container {
    // styles

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

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

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

为什么？

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

见：http://csswizardry.com/2011/09/writing-efficient-css-selectors/

选择器具有内在的效率，引用 Steve Souders 的话，效率从高到低的 CSS 选择器的顺序如下：

ID，例如#标题

类，例如.promo

类型，例如div

相邻兄弟，例如h2 + p

儿童，例如li>ul

后代，例如一个

通用，即*

属性，例如[type="文本"]

伪类/元素，例如a:悬停

如果您希望性能更好（即使只是稍微），您应该在您的 css 中编写唯一的类名（或非重复元素的 id）。

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

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

.checkout-form-container {
    // styles

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

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

【问题讨论】：

如果代码以一种方式组织但编译成其他方式似乎会令人困惑。
This is an XY Problem.
在 SASS 中你可以使用at-root()。

标签： sass less stylus

【解决方案1】：

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

目前，less.js 没有办法在层次结构中声明选择器，而是忽略它们在层次结构中的位置。

【讨论】：

【解决方案2】：

您正在使用nesting。

一个嵌套的选择器编译成它的后代组合器：

.parent {
  .child {
  }
}

输出：

.parent .child {}

您也可以使用extend feature:

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

输出：

.selector1,
.selector2 {
 // styles
}

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

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

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

输出：

div.form-container {
//styles
}

您的问题表明您正在寻找命名空间，而您的类名表明您正在寻找嵌套。

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

【讨论】：