成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

切圖崽的自我修養(yǎng)－規(guī)范CSS元素命名

mozillazg / 3613人閱讀

摘要：目前為止，這個命名已經(jīng)可以打分，離滿分存在的差距在哪里如果一律采取駝峰命名，在從屬關(guān)系的可讀性上，稍微差了一點，來比較一下這兩個命名的可讀性和明顯采取駝峰匈牙利命名的方式可讀性更強。

前言 
為什么我剛才寫的樣式亂了？！

如何給變量，文件命名是程序員的老大難問題。命名為什么會這么難，因為它太重要了?？梢赃@么說，準(zhǔn)確的命名可以提高代碼的可讀性，讓人容易理解，方便調(diào)試，也給以后修改和維護你的代碼的人帶來方便。

如何給元素命名

而在css中，如何給元素命名同樣是一門藝術(shù)。我們先來看看css中對常用的組件的命名：

head

foot

nav

menu

list

嗯，目前為止很不錯，這很簡單，這很語義化。如果再復(fù)雜一點，比如我要一個下拉菜單，你可能會想到：

dropMenu［駝峰命名］

drop-menu/drop_menu[匈牙利命名]

沒錯，命名足夠解釋了它 特點是什么/有什么＋本身是什么。

好，那我們接下來看看這段代碼：

    
    
  • 2016/06/01
    • 
    
  • 2016/06/02
    • 
    
  • 2016/06/03
    • 

 

...


    
    
  • 2016/07/01
    • 
    
  • 2016/07/02
    • 
    
  • 2016/07/03
    •

這是一個表示時間的列表，用timeList命名非常合適。等會，現(xiàn)在需求好像變了，產(chǎn)品姐姐剛才湊過來說要把時間列表的最后一條數(shù)據(jù)高亮顯示，那我們就得把timeList的最后一個li掛上一個class，用來做樣式的調(diào)整，才能滿足需求。OK現(xiàn)在變成：

    
    
  • 2016/06/01
    • 
    
  • 2016/06/02
    • 
    
  • 2016/06/03
    • 

 

...


    
    
  • 2016/07/01
    • 
    
  • 2016/07/02
    • 
    
  • 2016/07/03
    •

然后css中如是寫：

.timeList .last{...}

很簡單 父元素＋嵌套子元素 的命名方式輕松搞定，但這樣真的好嗎？

NO! 一點都不好！

我們來看看這樣命名存在哪些問題：

首先last這個命名本身非常讓人疑惑，因為最后一個這個特性，不管你掛的是什么class，我們本來都可以從DOM上看出來的與其命名為last，不如命名為highlight，表明它的特點高亮

其次last這個命名容易引起代碼沖突

因為.last這個命名很容易出現(xiàn)。在網(wǎng)站的開發(fā)過程中，會存在并行開發(fā)的情況，css不止你在寫，你的同事可能也在寫。如果恰巧他寫了一個全局的 .last，那么你這個樣式很可能會因為你同事寫的樣式的疊加而產(chǎn)生問題。

你想了一會，改成了：

    
    
  • 2016/07/01
    • 
    
  • 2016/07/02
    • 
    
  • 2016/07/03
    •

嗯，lastItem至少last好，但還是沒有解決上述的兩個問題，特性不明＋代碼沖突風(fēng)險。反正如果是我，就算寫成：

.timeList .lastItem{...}

這種形式，我還是會擔(dān)心有人寫了.lastItem的全局樣式導(dǎo)致我的代碼樣式會被覆蓋。

所以，上述這種子元素嵌套 (我們叫做濫用子元素選擇器) 的方式是 非常不可取的，即使你自己的代碼寫起來沒有問題，一旦和別人的代碼整合起來，很可能產(chǎn)生命名沖突。

所以，為了避免多人開發(fā)命名沖突的情況發(fā)生，css的樣式命名最好和程序語言一樣，遵循命名空間的原則。

命名空間

所謂命名空間，就是從屬關(guān)系的一種表示方法。還是拿上述的例子來說，如果寫成：

    
    
  • 2016/07/01
    • 
    
  • 2016/07/02
    • 
    
  • 2016/07/03
    •

timeList下的LastItem，嗯，看出了從屬關(guān)系，并且如此復(fù)雜的命名一般不會引起代碼命名上的沖突，并且同時也簡化了你的css，因為現(xiàn)在你的css可以這樣寫了：

.timeListLastItem{...}

css里不用嵌套在父元素選擇器里了，因為這個子元素本身的命名就表示了，是在timeList這個父元素下的，也就是，從命名上就定義了自己的從屬關(guān)系。

目前為止，這個命名已經(jīng)可以打90分，離滿分存在的差距在哪里?

如果一律采取駝峰命名，在從屬關(guān)系的可讀性上，稍微差了一點，來比較一下這兩個命名的可讀性：timeListLastItem 和 timeList-lastItem 明顯采取駝峰＋匈牙利 命名的方式可讀性更強。

總結(jié)來說，用劃線作為從屬關(guān)系的分隔符，其實就是講模塊timeList視為了類，從屬元素被看成了timeList的類屬性。通過科學(xué)合理的命名上能直觀的看出從屬關(guān)系，降低代碼沖突的風(fēng)險。

所以如下兩種命名方式，你選擇哪一個呢？
結(jié)語

給元素命名從來不是一件簡單的事情，但好的命名規(guī)范絕對可以減少使團隊開發(fā)的潛在風(fēng)險。雖然這種命名規(guī)范有時候會伴隨著冗長的問題，但它所帶來的好處絕對能掩蓋這點瑕疵。至于擔(dān)心命名長度的增加會影響css文件的大小從而會影響加載速度，我只能說同學(xué)，你的圖片壓縮過了嗎？做了Sprite處理嗎？那才是優(yōu)化大頭。

文章參考自：編寫高質(zhì)量代碼－Web前端開發(fā)修煉之道

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

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

相關(guān)文章

  • 切圖崽的自我修養(yǎng)－合理組織CSS結(jié)構(gòu)

    摘要：前言不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前端工程師從方面來說，前端工程師和切圖崽的區(qū)別，并不是指寫單條技巧的高低，甚至很多工程師在一些的奇技淫巧都比不上切圖崽那切圖崽到底和工程師之間的差別是什么呢差別是年工作經(jīng)驗視野，是格局，是 前言 不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前！端！工！程！師！ 從css方面來說，前端工程師和切圖崽的區(qū)別，并不是指寫單條css技巧的...

    cangck_X 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－SeaJs重要概念剖析

    摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標(biāo)識。 前言 高能預(yù)警，前方山路十八彎 在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規(guī)范: CommonJs 同步加載模塊規(guī)范 AMD/CMD 異步加載模塊規(guī)范 其中CMD規(guī)范的產(chǎn)出是國內(nèi)目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...

    voidking 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－SeaJs重要概念剖析

    摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標(biāo)識。 前言 高能預(yù)警，前方山路十八彎 在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規(guī)范: CommonJs 同步加載模塊規(guī)范 AMD/CMD 異步加載模塊規(guī)范 其中CMD規(guī)范的產(chǎn)出是國內(nèi)目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...

    Taste 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－SeaJs重要概念剖析

    摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統(tǒng)如何區(qū)別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標(biāo)識。 前言 高能預(yù)警，前方山路十八彎 在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規(guī)范: CommonJs 同步加載模塊規(guī)范 AMD/CMD 異步加載模塊規(guī)范 其中CMD規(guī)范的產(chǎn)出是國內(nèi)目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...

    jhhfft 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－梳理Jquery API

    摘要：前言梳理一下中還不太熟悉的事件綁定統(tǒng)一用摒棄掉之前的解綁事件統(tǒng)一用語法糖，支持多個事件綁定同一個函數(shù)語法糖，支持多個事件綁定不同的函數(shù)語法糖，支持多個事件綁定不同的函數(shù)可以往里傳參可以給未創(chuàng)建的上綁定事件只能采取事件委托的形式所以寫成這樣是 前言 梳理一下Jquery中還不太熟悉的API Jquery事件綁定統(tǒng)一用on(摒棄掉之前的click,bind),解綁事件統(tǒng)一用off 語法...

    warnerwu 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<