国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

dcr309duan / 2629人閱讀

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

原文：The tilde CSS selector, use carefully!

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

一個(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。

所以問(wèn)題在哪兒呢？

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

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

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

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

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

    待編輯

    避免CSS代碼臃腫

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

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

    轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115221.html

    相關(guān)文章

    • CSS開(kāi)發(fā)

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

      warkiz 評(píng)論0 收藏0

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

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

      boredream 評(píng)論0 收藏0

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

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

      SexySix 評(píng)論0 收藏0

    • css選擇器

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

      番茄西紅柿 評(píng)論0 收藏0

    • 2017-07-28 前端日?qǐng)?bào)

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

      golden_hamster 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    閱讀需要支付1元查看
    <