用属性和属性选择器创造属于你自己的怪诞设计语言

译者：camiler

原文链接

在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 Chiton写的一个更充实的例子:

<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; }

/* 一大堆这样的 */

Demo: 语义化样式语言练习，在CodePen上， 来自Dan Chilton (@bjork24).

这看起来可能很愚蠢，但有时也有“真实的案例”使用它，不久前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; }

Demo: Crazy Box Padding， 在CodePen上，来自 Mark Huot (@markhuot).

这种把样式语言用在属性的想法，离原子性CSS表达的概念不远：

创造一些简单的 @代码碎片，来写原子化的CSS。现在不需要再记住#acss 语法啦!

/cc @thierrykoblentz pic.twitter.com/IvfdsKdOak

— Pankaj Parashar (@pankajparashar) March 13, 2016

或者 Expressive CSS, 也支持特定风格的类名。