使用 Attribute 取代 Class

CSS 有着根据 HTML 的标签或属性来表示样式的能力，通常我们会使用 Class 或者 ID 来达到选择匹配的效果。而其实，使用 HTML 的属性 Attribute，也能达到这个目的。

先晒一下，使用标签的属性（Attribute）作为选择器，其 CSS 的写法如下：

[layout] {
  box-sizing: border-box;
  display: flex;
}

[layout="column"] {
  flex-direction: column;
}

[layout="row"] {
  flex-direction: row;
}

上述这一段代码是摘自 Material Design 中关于布局的一段 CSS 写法。有人会说这样那得自定义标签了，对，使用方法如下：

<div layout="row">
  <div>I'm left.</div>
  <div>I'm right.</div>
</div>
<div layout="column">
  <div>I'm above.</div>
  <div>I'm below.</div>
</div>

为什么要这样使用呢？

一、取之即来，利用率高

我们的 HTML 中，每一个标签，已经有很多的属性（Attribute）了，为什么我们还要再添一个属性叫 class 呢？直接使用标签中的属性作为样式选择器，可以提高 HTML 与 CSS 的结合利用率。

一段 HTML 如下：

<form>
  <input class="input-text" type="text" name="name" placeholder="name" />
  <input class="input-text" type="text" name="email" placeholder="email" />
    <input type="submit" name="submit" />
</form>

使用两种不同的选择器来写样式：

/* 使用 class */
.input-text {
    display: block;
    margin-bottom: 15px;
    padding: 10px;
    width: 250px;
    border: 2px solid steelblue;
}

/* 建议使用 Attribute */
input[type="text"] {
    display: block;
    margin-bottom: 15px;
    padding: 10px;
    width: 250px;
    border: 2px solid steelblue;
}

二、独特语义

特定的标签有特定的属性（Attribute），我们可以利用起来。而一个 class 却可以在不同的标签上使用，一些时候会有"挂羊头卖狗肉"之嫌，不如特定的属性语义化更好。

例如我们的 A 标签中的属性：

<a href="yoursite.com/somepage.html" rel="external">
<a href="mypage.html" rel="internal">

样式的写法如下：

/* 使用 rel 属性来写样式 */
a[rel="external"] { color: green;}

/* 而当我们写了一个样式 .external，却可以随便加在任何的标签上 */
.external { ... }

三、属性及属性值灵活结合

使用属性（Attribute），可以很灵活，因为支持属性、属性值、数值值的匹配等，详见下表：

选择器	常用标签	解释	权重
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[attributeΙ=value]	[langΙ=en]	选择 lang 属性值以 "en" 开头的所有元素。	2
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有元素。	3
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个元素。	3

四、避免污染，提高可扩展性

这个比较虚，却比较真实。因为在编写一个组件的时候，我们以 class 来为一个元素添加一个新的样式，较大几率会遇到样式冲突。使用属性可以保持某一个特定组件样式的唯一性（当然，被覆盖的可能性也存在），使用的一方则不需顾虑因 class 引起的样式问题。

好处虽多，但也有其约束性，权重、表达式等，欢迎探讨。

掌心