你可以使用属性和属性选择器来创造你自己的怪异设计语言

在 CSS 中，属性选择器具有一些相当强大的匹配功能。 您可以匹配任何属性以及任何具有精确值、以特定文本开头、包含特定文本、以特定文本结尾等的属性。 这使您能够以您想要的方式以非常奇怪的样式“语言”来实现。

例如…

<div fencing="a bit dotty"></div>

这是一个完全虚构的属性，因此希望它在未来的 HTML 中不会有任何意义。 不过我们现在可以选中它

[fencing="a bit dotty"] {
  border: 2px dotted black;
}

如果我们正在构建一种“语言”，我们可以创建另一种

[fencing="a lot dotty"] {
  border: 4px dotted black;
}

甚至可以像这样分割它…

[fencing] {
  border-color: black;
}
[fencing*="dotty"] {
  border-style: dotted;
}
[fencing*="a bit"] {
  border-width: 2px;
}
[fencing*="a lot"] {
  border-width: 4px;
}

奇怪吧。

我在某些情况下看到过它。 这是 Dan Chilton 提供的一个更加完善的示例

<p style="three quarters width with a black 
          background, light text, red border, 
          thick border, rounded, lots of padding, 
          and a drop shadow">
  Lorem ipsum...
</p>

CSS 就像这样适应语言…

[style*="full width"] { width: 100%; }
[style*="three quarters width"] { width: 75%; }
[style*="half width"] { width: 50%; }
[style*="quarter width"] { width: 25%; }

[style*="gray background"] { background-color: #CCC; }
[style*="black background"] { background-color: #000; }
[style*="yellow background"] { background-color: #FF0; }
[style*="pink background"] { background-color: #FAA; }

/* a bunch more */

演示

查看 Dan Chilton 的 语义样式语言练习 (@bjork24) 在 CodePen 上的笔。

这可能看起来很愚蠢，但“真实事物”有时也会使用它，比如不久前流行的 Flex 布局属性。

Mark Huot 将这个想法与 Unicode 字符结合在一起。 如何使用像这样的 HTML

<div class="box" box="↖"></div>
<div class="box" box="▣"></div>

以及匹配“语言”的 CSS

[box*="▣"] { padding: 20px; }
[box-xl*="▣"] { padding: 40px; }

[box*="↑"] { padding-top: 20px; }
[box*="→"] { padding-right: 20px; }
[box*="↓"] { padding-bottom: 20px; }
[box*="←"] { padding-left: 20px; }

[box*="↕"] { padding-top: 20px; padding-bottom: 20px; }
[box*="↔"] { padding-left: 20px; padding-right: 20px; }

[box*="↖"] { padding-top: 20px; padding-left: 20px; }
[box*="↗"] { padding-top: 20px; padding-right: 20px; }
[box*="↘"] { padding-right: 20px; padding-bottom: 20px; }
[box*="↙"] { padding-bottom: 20px; padding-left: 20px; }

演示

查看 Mark Huot 的 疯狂盒子填充 (@markhuot) 在 CodePen 上的笔。

将样式语言放入属性的想法与原子 CSS 的想法并不遥远

制作了一些方便的 @code 代码片段来编写原子 CSS。 现在不需要记住 #acss 语法了！

/cc @thierrykoblentz pic.twitter.com/IvfdsKdOak

— Pankaj Parashar (@pankajparashar) 2016 年 3 月 13 日

或者 Expressive CSS，它也鼓励使用特定于样式的类名。