最近我的一些项目都遇到了一些类似的样式问题。它们都错误地使用了波浪选择器，并造成了很多地方的CSS代码臃肿( CSS Bloat )。大家可能以前也都遇到或者使用过波浪选择器，毕竟它作为CSS选择器已经很长时间了， 甚至IE7都支持 。波浪选择器用来选择所有匹配到的兄弟元素。

一个例子

<ul>
<li class="something-important">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
.something-important {color: red;
}
.something-important ~ li {font-style: italic;color: grey;
}

效果：

这里我们的波浪选择器匹配了 .something-important 的所有兄弟元素，item2，3，4。

所以问题在哪儿呢？

它太容易制造出脆弱的代码了。

我的经验里，使用波浪选择器一般都是通过type而不是class来选择兄弟元素的。这样会造成你不知道这个选择器写这儿到底是干嘛用的。上面这个例子我们就不知道 .something-important ~li 选择到的<li>标签是个啥，不如直接给这些li标签加上 .not-important 来的简单直接。

通常来说多敲几个字给每个元素都加上class可以给未来的维护减少很多不必要的麻烦。

“在写代码的时候，永远假设最后一个维护你的代码是一个知道你家住在哪儿的沉默的精神病人。写点人读得懂的代码。—— John Woods ”

用武之地

待编辑

避免CSS代码臃肿

我认为这篇文章并不仅仅就是告诉大家避免使用波浪选择器，更多的是让大家知道遇到CSS的问题时不要从加上更多的CSS的代码开始。这从来都不是保持代码可维护性的方法。