資訊專欄INFORMATION COLUMN
摘要：目前為止，這個命名已經可以打分，離滿分存在的差距在哪里如果一律采取駝峰命名，在從屬關系的可讀性上，稍微差了一點，來比較一下這兩個命名的可讀性和明顯采取駝峰匈牙利命名的方式可讀性更強。
前言
為什么我剛才寫的樣式亂了？！
如何給變量，文件命名是程序員的老大難問題。命名為什么會這么難，因為它太重要了。可以這么說，準確的命名可以提高代碼的可讀性，讓人容易理解，方便調試，也給以后修改和維護你的代碼的人帶來方便。
如何給元素命名而在css中，如何給元素命名同樣是一門藝術。我們先來看看css中對常用的組件的命名：
head
foot
nav
menu
list
嗯，目前為止很不錯，這很簡單，這很語義化。如果再復雜一點，比如我要一個下拉菜單，你可能會想到：
dropMenu［駝峰命名］
drop-menu/drop_menu[匈牙利命名]
沒錯，命名足夠解釋了它 特點是什么/有什么＋本身是什么。
好，那我們接下來看看這段代碼：
這是一個表示時間的列表，用timeList命名非常合適。等會，現在需求好像變了，產品姐姐剛才湊過來說要把時間列表的最后一條數據高亮顯示，那我們就得把timeList的最后一個li掛上一個class，用來做樣式的調整，才能滿足需求。OK現在變成：
然后css中如是寫：
.timeList .last{...}
很簡單 父元素＋嵌套子元素 的命名方式輕松搞定，但這樣真的好嗎？
NO! 一點都不好！
我們來看看這樣命名存在哪些問題：
首先last這個命名本身非常讓人疑惑，因為最后一個這個特性，不管你掛的是什么class，我們本來都可以從DOM上看出來的與其命名為last，不如命名為highlight，表明它的特點高亮
其次last這個命名容易引起代碼沖突
因為.last這個命名很容易出現。在網站的開發過程中，會存在并行開發的情況，css不止你在寫，你的同事可能也在寫。如果恰巧他寫了一個全局的 .last，那么你這個樣式很可能會因為你同事寫的樣式的疊加而產生問題。
你想了一會，改成了：
嗯，lastItem至少last好，但還是沒有解決上述的兩個問題，特性不明＋代碼沖突風險。反正如果是我，就算寫成：
.timeList .lastItem{...}
這種形式，我還是會擔心有人寫了.lastItem的全局樣式導致我的代碼樣式會被覆蓋。
所以，上述這種子元素嵌套 (我們叫做濫用子元素選擇器) 的方式是 非常不可取的，即使你自己的代碼寫起來沒有問題，一旦和別人的代碼整合起來，很可能產生命名沖突。
所以，為了避免多人開發命名沖突的情況發生，css的樣式命名最好和程序語言一樣，遵循命名空間的原則。
命名空間所謂命名空間，就是從屬關系的一種表示方法。還是拿上述的例子來說，如果寫成：
timeList下的LastItem，嗯，看出了從屬關系，并且如此復雜的命名一般不會引起代碼命名上的沖突，并且同時也簡化了你的css，因為現在你的css可以這樣寫了：
.timeListLastItem{...}
css里不用嵌套在父元素選擇器里了，因為這個子元素本身的命名就表示了，是在timeList這個父元素下的，也就是，從命名上就定義了自己的從屬關系。
目前為止，這個命名已經可以打90分，離滿分存在的差距在哪里?
如果一律采取駝峰命名，在從屬關系的可讀性上，稍微差了一點，來比較一下這兩個命名的可讀性：timeListLastItem 和 timeList-lastItem 明顯采取駝峰＋匈牙利 命名的方式可讀性更強。
總結來說，用劃線作為從屬關系的分隔符，其實就是講模塊timeList視為了類，從屬元素被看成了timeList的類屬性。通過科學合理的命名上能直觀的看出從屬關系，降低代碼沖突的風險。
所以如下兩種命名方式，你選擇哪一個呢？
結語
給元素命名從來不是一件簡單的事情，但好的命名規范絕對可以減少使團隊開發的潛在風險。雖然這種命名規范有時候會伴隨著冗長的問題，但它所帶來的好處絕對能掩蓋這點瑕疵。至于擔心命名長度的增加會影響css文件的大小從而會影響加載速度，我只能說同學，你的圖片壓縮過了嗎？做了Sprite處理嗎？那才是優化大頭。
文章參考自：編寫高質量代碼－Web前端開發修煉之道
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111321.html
摘要：前言不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前端工程師從方面來說，前端工程師和切圖崽的區別，并不是指寫單條技巧的高低，甚至很多工程師在一些的奇技淫巧都比不上切圖崽那切圖崽到底和工程師之間的差別是什么呢差別是年工作經驗視野，是格局，是 前言 不要再叫我切圖崽，我很生氣，這樣很不禮貌，請叫我前！端！工！程！師！ 從css方面來說，前端工程師和切圖崽的區別，并不是指寫單條css技巧的...
摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標識。 前言 高能預警，前方山路十八彎 在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規范: CommonJs 同步加載模塊規范 AMD/CMD 異步加載模塊規范 其中CMD規范的產出是國內目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...
摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標識。 前言 高能預警，前方山路十八彎 在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規范: CommonJs 同步加載模塊規范 AMD/CMD 異步加載模塊規范 其中CMD規范的產出是國內目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...
摘要：但是這么多模塊合并在一個文件里，全是匿名的話，系統如何區別哪個是哪個模塊呢因此，我們需要對這些模塊給不同的進行標識。 前言 高能預警，前方山路十八彎 在上一篇文章里簡單的討論了一下模塊化Js, 先來回顧一下目前模塊化的兩大規范: CommonJs 同步加載模塊規范 AMD/CMD 異步加載模塊規范 其中CMD規范的產出是國內目前十分火爆的SeaJs, 這篇文章主要是解釋幾個使用S...
摘要：前言梳理一下中還不太熟悉的事件綁定統一用摒棄掉之前的解綁事件統一用語法糖，支持多個事件綁定同一個函數語法糖，支持多個事件綁定不同的函數語法糖，支持多個事件綁定不同的函數可以往里傳參可以給未創建的上綁定事件只能采取事件委托的形式所以寫成這樣是 前言 梳理一下Jquery中還不太熟悉的API Jquery事件綁定統一用on(摒棄掉之前的click,bind),解綁事件統一用off 語法...
閱讀 1397·2021-11-24 09:39
閱讀 3686·2021-11-24 09:39
閱讀 1859·2021-11-16 11:54
閱讀 1463·2021-09-30 09:47
閱讀 1712·2021-09-26 10:16
閱讀 2342·2021-09-22 15:33
閱讀 1453·2021-09-14 18:01
閱讀 2435·2021-09-07 09:59
