亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

【譯】謹(jǐn)慎使用CSS中的波浪選擇器

dcr309duan / 2684人閱讀

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

原文：The tilde CSS selector, use carefully!

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

一個(gè)例子 
    

  • 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。

所以問題在哪兒呢？

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

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

  • 標(biāo)簽是個(gè)啥，不如直接給這些li標(biāo)簽加上.not-important來的簡單直接。

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

    “在寫代碼的時(shí)候，永遠(yuǎn)假設(shè)最后一個(gè)維護(hù)你的代碼是一個(gè)知道你家住在哪兒的沉默的精神病人。寫點(diǎn)人讀得懂的代碼。——John Woods”
    用武之地

    待編輯

    避免CSS代碼臃腫

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

    • 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115221.html

    相關(guān)文章

    • CSS開發(fā)

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

      warkiz 評論0 收藏0

    • 【前端工程師手冊】30分鐘搞清楚選擇器和權(quán)重

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

      boredream 評論0 收藏0

    • 【前端工程師手冊】30分鐘搞清楚選擇器和權(quán)重

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

      SexySix 評論0 收藏0

    • css選擇器

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

      番茄西紅柿 評論0 收藏0

    • 2017-07-28 前端日報(bào)

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

      golden_hamster 評論0 收藏0

    發(fā)表評論

    0條評論

    閱讀需要支付1元查看
    <