自动修复 [class^="icon-"] 属性选择器

[一丝]

问题描述

在不考虑 HTML Class 用法是否正确的前提下，现在普遍存在如下 HTML 结构：

<span class="icon-foo">1</span>
<span class="other-icon icon-bar">2</span>
<span class="other-icon-baz">3</span>

有如下 CSS，期望结果是 1、2显示红色，3为默认颜色（黑色）。

 [class^="icon-"] {
  color: red;
}

测试（Demo）

1 [class^="icon-"] 的本意是匹配icon-开头的 class，但此时无法匹配2、3两种情况。

2 尝试使用*=属性选择器匹配符：

 [class^="icon-"], 
 [class*="icon-"] {
  color: red;
}

此时却匹配到了第三种情况的 other-icon-baz class（并不是以 icon-开头）。

3 所以，全面的做法是增加 [class*=" icon-"](注意前面有一个空格)

解决方案

CSS Grace 检测如果存在 [class^="icon-"] 则自动增加 [class*=" icon-"]，自己书写很容易遗漏前面的空格。

 [class^="icon-"], 
 [class*=" icon-"] {
  color: red;
}

[qingting]

[class^="icon-"] 的本意是匹配icon-开头的 class，但此时无法匹配2、3两种情况。

居然使用 [class^="icon-"] 这种写法本来就不应该匹配的到 2，3 种情况。想要去做正确，我认为应该由开发者自己去注意，如果使用工具来弥补这种事情。岂非像是在“助纣为虐”

其实，从 CSS Grace 刚一发布的时候，自己就存在这种疑问。

比如如果同时有 clear: fix; overflow: hidden; 时会删除 clear: fix;。
比如同时有 position: absolute; float: left; 时会删除 float: left;。

我一直觉得不应该由工具来做这种事情的，今天看到这个 issue，表达下自己的看法。不知一丝有什么看法。

😆

[一丝]

@rguanghui

1. clear:fix 的问题

诚然，闭合浮动类似的情况，如果只是单纯靠开发者「自觉」或者文字规范来控制，始终无法避免这类代码冗余，而工具正是来解决此类问题的。

比如这样一段代码，一眼看上去有问题吗？

.foo {
  animation: foo 200ms ease .8s infinite paused alternate both;
}

参见：#19

但实际上这段代码是存在问题的，所以这些问题应该由工具来更好的保证 CSS 的兼容性，这也是 CSS Grace 的初衷。

2. [class^="icon-"] 属性选择器

是否添加这个功能，是有待考虑的，但主要是考虑其实用性。