【译】谨慎使用CSS中的波浪选择器

原文：The tilde CSS selector, use carefully!

最近个人一些项目都遇到了一些相似的样式问题。它们都错误地使用了波浪选择器，并形成了不少地方的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的代码开始。这历来都不是保持代码可维护性的方法。