前言

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

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

如何給元素命名

而在css中，如何給元素命名同樣是一門藝術。我們先來看看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命名非常合適。等會，現在需求好像變了，產品姐姐剛才湊過來說要把時間列表的最后一條數據高亮顯示，那我們就得把timeList的最后一個li掛上一個class，用來做樣式的調整，才能滿足需求。OK現在變成：

<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這個命名很容易出現。在網站的開發過程中，會存在并行開發的情況，css不止你在寫，你的同事可能也在寫。如果恰巧他寫了一個全局的 .last，那么你這個樣式很可能會因為你同事寫的樣式的疊加而產生問題。

你想了一會，改成了：

<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的全局樣式導致我的代碼樣式會被覆蓋。

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

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

命名空間

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

<ul class="timeList"><li>2016/07/01</li><li>2016/07/02</li><li class="timeListLastItem">2016/07/03</li> </ul>

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

.timeListLastItem{...}

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

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

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

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

所以如下兩種命名方式，你選擇哪一個呢？

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

結語

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

文章參考自：編寫高質量代碼－Web前端開發修煉之道

總結

以上是生活随笔為你收集整理的切图崽的自我修养－规范CSS元素命名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。