CSS “装饰”

一位读者前几天给我写信，询问他们在维基百科的 Common.css 中遇到的这段 CSS 代码。

.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
  /* @noflip */
  float: left;
  /* @noflip */
  text-align: left;
}

@noflip 是怎么回事？这就是他们所说的“CSS 装饰器”，我认为这是一个很好的术语。实际上，它们只是 CSS 注释，但显然这里还有更多内容，因为它们看起来像是具有功能的程序化语句。

如果没有某种 CSS 处理，这些注释将不起作用。就我个人而言，我不确定这里使用了哪种 CSS 处理器，但我认为可以合理地假设它在运行时会生成一个“从右到左”的样式表，将 float: left 转换为 float: right，并将 text-align: left 转换为 text-align: right。

我认为值得注意的是，现在使用 原生支持的 text-align: start 可能更明智，这样您就不必依赖 CSS 处理和备用样式表来帮助您。不幸的是，我认为 float 没有“逻辑”等效项，但可能有一种方法可以重构布局（使用网格？）使“翻转”变得不必要。不过，将元素包裹在元素周围对于 float 来说非常独特，因此这里可能没有简单的替代方法。

四处搜索了一下，似乎 /* @noflip */ 的来源是 CSSJanus。

仓库 表明它是由维基媒体制作的，所以我认为这是一个已解决的案例。看起来这项技术已经应用于其他事物，例如 插件（适用于 styled-components），插件（适用于 Sublime Text），甚至 Salesforce 也在他们的设计系统中 使用过 它。

还有一个名为 css-flip （已归档，来自 Twitter）的处理器，它看起来执行了完全相同的事情，并且 README 显示了可能需要这种操作的属性数量之多

background-position, background-position-x, border-bottom-left-radius, border-bottom-right-radius, border-color, border-left, border-left-color, border-left-style, border-left-width, border-radius, border-right, border-right-color, border-right-style, border-right-width, border-style, border-top-left-radius, border-top-right-radius, border-width, box-shadow, clear, direction, float, left, margin, margin-left, margin-right, padding, padding-left, padding-right, right, text-align transition transition-property

如果不存在用于此的 PostCSS 插件，我会感到非常惊讶，稍微搜索了一下，就找到了 postcss-rtl，但遗憾的是，它也被所有者弃用了。

---

这一切都是从讨论“CSS 装饰器”开始的，我想我们将其定义为“包含处理器指令的 CSS 注释”。我个人最常用的一个就是这个

/* prettier-ignore */
.cool {
  linear-gradient(
    to left,
    pink
    pink 20%
    red  20%
    red
  )
}

我非常喜欢 Prettier，但如果我花时间自己格式化一段 CSS 以提高可读性，我会在上一行添加一个 /* prettier-ignore */，这样它就不会影响它。

您在代码库中使用任何 CSS 装饰器吗？