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

[camiler]

原文：https://css-tricks.com/weird-design-languages-with-attributes/

在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, 也支持特定风格的类名。