【譯】謹慎使用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的代碼開始。這歷來都不是保持代碼可維護性的方法。