切图崽的自我修养－规范CSS元素命名
前言
為什么我剛才寫的樣式亂了？！
如何給變量，文件命名是程序員的老大難問題。命名為什么會這么難，因為它太重要了。可以這么說，準確的命名可以提高代碼的可讀性，讓人容易理解，方便調(diào)試，也給以后修改和維護你的代碼的人帶來方便。
如何給元素命名
而在css中，如何給元素命名同樣是一門藝術(shù)。我們先來看看css中對常用的組件的命名：
head
foot
nav
menu
list
嗯，目前為止很不錯，這很簡單，這很語義化。如果再復雜一點，比如我要一個下拉菜單，你可能會想到：
dropMenu［駝峰命名］
drop-menu/drop_menu[匈牙利命名]
沒錯，命名足夠解釋了它 特點是什么/有什么＋本身是什么。
好，那我們接下來看看這段代碼：
<ul class="timeList"><li>2016/06/01</li><li>2016/06/02</li><li>2016/06/03</li> </ul> ...<ul class="timeList"><li>2016/07/01</li><li>2016/07/02</li><li>2016/07/03</li> </ul>這是一個表示時間的列表，用timeList命名非常合適。等會，現(xiàn)在需求好像變了，產(chǎn)品姐姐剛才湊過來說要把時間列表的最后一條數(shù)據(jù)高亮顯示，那我們就得把timeList的最后一個li掛上一個class，用來做樣式的調(diào)整，才能滿足需求。OK現(xiàn)在變成：
<ul class="timeList"><li>2016/06/01</li><li>2016/06/02</li><li class="last">2016/06/03</li> </ul> ...<ul class="timeList"><li>2016/07/01</li><li>2016/07/02</li><li class="last">2016/07/03</li> </ul>然后css中如是寫：
.timeList .last{...}很簡單 父元素＋嵌套子元素 的命名方式輕松搞定，但這樣真的好嗎？
NO! 一點都不好！
我們來看看這樣命名存在哪些問題：
首先last這個命名本身非常讓人疑惑，因為最后一個這個特性，不管你掛的是什么class，我們本來都可以從DOM上看出來的與其命名為last，不如命名為highlight，表明它的特點高亮
其次last這個命名容易引起代碼沖突
因為.last這個命名很容易出現(xiàn)。在網(wǎng)站的開發(fā)過程中，會存在并行開發(fā)的情況，css不止你在寫，你的同事可能也在寫。如果恰巧他寫了一個全局的 .last，那么你這個樣式很可能會因為你同事寫的樣式的疊加而產(chǎn)生問題。
你想了一會，改成了：
<ul class="timeList"><li>2016/07/01</li><li>2016/07/02</li><li class="lastItem">2016/07/03</li> </ul>嗯，lastItem至少last好，但還是沒有解決上述的兩個問題，特性不明＋代碼沖突風險。反正如果是我，就算寫成：
.timeList .lastItem{...}這種形式，我還是會擔心有人寫了.lastItem的全局樣式導致我的代碼樣式會被覆蓋。
所以，上述這種子元素嵌套 (我們叫做濫用子元素選擇器) 的方式是 非常不可取的，即使你自己的代碼寫起來沒有問題，一旦和別人的代碼整合起來，很可能產(chǎn)生命名沖突。
所以，為了避免多人開發(fā)命名沖突的情況發(fā)生，css的樣式命名最好和程序語言一樣，遵循命名空間的原則。
命名空間
所謂命名空間，就是從屬關(guān)系的一種表示方法。還是拿上述的例子來說，如果寫成：
<ul class="timeList"><li>2016/07/01</li><li>2016/07/02</li><li class="timeListLastItem">2016/07/03</li> </ul>timeList下的LastItem，嗯，看出了從屬關(guān)系，并且如此復雜的命名一般不會引起代碼命名上的沖突，并且同時也簡化了你的css，因為現(xiàn)在你的css可以這樣寫了：
.timeListLastItem{...}css里不用嵌套在父元素選擇器里了，因為這個子元素本身的命名就表示了，是在timeList這個父元素下的，也就是，從命名上就定義了自己的從屬關(guān)系。
目前為止，這個命名已經(jīng)可以打90分，離滿分存在的差距在哪里?
如果一律采取駝峰命名，在從屬關(guān)系的可讀性上，稍微差了一點，來比較一下這兩個命名的可讀性：timeListLastItem 和 timeList-lastItem 明顯采取駝峰＋匈牙利 命名的方式可讀性更強。
總結(jié)來說，用劃線作為從屬關(guān)系的分隔符，其實就是講模塊timeList視為了類，從屬元素被看成了timeList的類屬性。通過科學合理的命名上能直觀的看出從屬關(guān)系，降低代碼沖突的風險。
所以如下兩種命名方式，你選擇哪一個呢？
<div class="box"><div class="head"></div><div class="content"></div><div class="foot"></div></div> <div class="box"><div class="box-head"></div><div class="box-content"></div><div class="box-foot"></div></div>結(jié)語
給元素命名從來不是一件簡單的事情，但好的命名規(guī)范絕對可以減少使團隊開發(fā)的潛在風險。雖然這種命名規(guī)范有時候會伴隨著冗長的問題，但它所帶來的好處絕對能掩蓋這點瑕疵。至于擔心命名長度的增加會影響css文件的大小從而會影響加載速度，我只能說同學，你的圖片壓縮過了嗎？做了Sprite處理嗎？那才是優(yōu)化大頭。
文章參考自：編寫高質(zhì)量代碼－Web前端開發(fā)修煉之道
總結(jié)
以上是生活随笔為你收集整理的切图崽的自我修养－规范CSS元素命名的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Navicat Premium 怎么安装
- 下一篇： 算法分析笔记