【譯】謹慎使用CSS中的波浪選擇器

dcr309duan 發布于2019-08-30 12:59 / 2616人閱讀

摘要：它們都錯誤地使用了波浪選擇器，并造成了很多地方的代碼臃腫。大家可能以前也都遇到或者使用過波浪選擇器，畢竟它作為選擇器已經很長時間了，甚至都支持。我的經驗里，使用波浪選擇器一般都是通過而不是來選擇兄弟元素的。

原文：The tilde CSS selector, use carefully!

最近我的一些項目都遇到了一些類似的樣式問題。它們都錯誤地使用了波浪選擇器，并造成了很多地方的CSS代碼臃腫(CSS Bloat)。大家可能以前也都遇到或者使用過波浪選擇器，畢竟它作為CSS選擇器已經很長時間了，甚至IE7都支持。波浪選擇器用來選擇所有匹配到的兄弟元素。

一個例子


Item 1
Item 2
Item 3
Item 4

.something-important {
   color: red;
}
.something-important ~ li {
   font-style: italic;
   color: grey;
}

效果：

這里我們的波浪選擇器匹配了.something-important的所有兄弟元素，item2，3，4。

所以問題在哪兒呢？

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

我的經驗里，使用波浪選擇器一般都是通過type而不是class來選擇兄弟元素的。這樣會造成你不知道這個選擇器寫這兒到底是干嘛用的。上面這個例子我們就不知道.something-important ~li選擇到的

標簽是個啥，不如直接給這些li標簽加上.not-important來的簡單直接。

通常來說多敲幾個字給每個元素都加上class可以給未來的維護減少很多不必要的麻煩。

“在寫代碼的時候，永遠假設最后一個維護你的代碼是一個知道你家住在哪兒的沉默的精神病人。寫點人讀得懂的代碼。——John Woods”

用武之地

待編輯

避免CSS代碼臃腫

我認為這篇文章并不僅僅就是告訴大家避免使用波浪選擇器，更多的是讓大家知道遇到CSS的問題時不要從加上更多的CSS的代碼開始。這從來都不是保持代碼可維護性的方法。

GPU云服務器云服務器 css選擇器基礎選擇器css css選擇 js css 加載器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115221.html

CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
【前端工程師手冊】30分鐘搞清楚選擇器和權重

有哪些選擇器基本選擇器通配選擇器（＊） ID選擇器（#ID）類選擇器（.className）元素選擇器(tagName) 后代選擇器（a b）子元素選擇器(a>b) 相鄰后面兄弟元素選擇器(a + b) 通用后面兄弟選擇器（a ? b）群組選擇器（selector1,selector2,...）這里面平時不太常用的選擇器有相鄰后面兄弟選擇器和通用后面兄弟選擇器首先，很多資料上把它...

boredream 2019-08-30 14:10 評論0 收藏0
【前端工程師手冊】30分鐘搞清楚選擇器和權重

有哪些選擇器基本選擇器通配選擇器（＊） ID選擇器（#ID）類選擇器（.className）元素選擇器(tagName) 后代選擇器（a b）子元素選擇器(a>b) 相鄰后面兄弟元素選擇器(a + b) 通用后面兄弟選擇器（a ? b）群組選擇器（selector1,selector2,...）這里面平時不太常用的選擇器有相鄰后面兄弟選擇器和通用后面兄弟選擇器首先，很多資料上把它...

SexySix 2019-08-01 18:42 評論0 收藏0
css選擇器

摘要：前言選擇器是前端的基本功只要你是一個前端這個一定要掌握今天之所以要重溫一下選擇器主要是和大家再復習一下選擇器中的一些常用符號的使用例如等的使用之所以要復習呢是因為我一個寫后端的哥們前端寫的也很好但是他今天突然問我中加號和大于號是啥意思我說這前言 css選擇器,是前端的基本功,只要你是一個前端,這個一定要掌握!今天之所以要重溫一下css選擇器,主要是和大家再復習一下css選擇器中的一些常用符號...

番茄西紅柿 2019-04-23 13:36 評論0 收藏0
2017-07-28 前端日報

2017-07-28 前端日報精選 React的新引擎—React Fiber是什么？Chromeless 讓 Chrome 自動化變得簡單【譯】JavaScript屬性名稱中的隱藏信息前端測試框架 JestES6中的JavaScript工廠函數Why Composition is Harder with ClassesGET READY: A NEW V8 IS COMING, NODE.JS...

golden_hamster 2019-08-20 18:22 評論0 收藏0