前言

為什么我剛才寫(xiě)的樣式亂了？！

如何給變量，文件命名是程序員的老大難問(wèn)題。命名為什么會(huì)這么難，因?yàn)樗匾恕？梢赃@么說(shuō)，準(zhǔn)確的命名可以提高代碼的可讀性，讓人容易理解，方便調(diào)試，也給以后修改和維護(hù)你的代碼的人帶來(lái)方便。

如何給元素命名

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

• head

• foot

• nav

• menu

• list

嗯，目前為止很不錯(cuò)，這很簡(jiǎn)單，這很語(yǔ)義化。如果再?gòu)?fù)雜一點(diǎn)，比如我要一個(gè)下拉菜單，你可能會(huì)想到：

• dropMenu［駝峰命名］

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

沒(méi)錯(cuò)，命名足夠解釋了它 特點(diǎn)是什么/有什么＋本身是什么。

好，那我們接下來(lái)看看這段代碼：

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

這是一個(gè)表示時(shí)間的列表，用timeList命名非常合適。等會(huì)，現(xiàn)在需求好像變了，產(chǎn)品姐姐剛才湊過(guò)來(lái)說(shuō)要把時(shí)間列表的最后一條數(shù)據(jù)高亮顯示，那我們就得把timeList的最后一個(gè)li掛上一個(gè)class，用來(lái)做樣式的調(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中如是寫(xiě)：

.timeList .last{...}

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

NO! 一點(diǎn)都不好！

我們來(lái)看看這樣命名存在哪些問(wèn)題：

• 首先last這個(gè)命名本身非常讓人疑惑，因?yàn)?strong>最后一個(gè)這個(gè)特性，不管你掛的是什么class，我們本來(lái)都可以從DOM上看出來(lái)的與其命名為last，不如命名為highlight，表明它的特點(diǎn)高亮

• 其次last這個(gè)命名容易引起代碼沖突

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

你想了一會(huì)，改成了：

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

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

.timeList .lastItem{...}

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

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

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

命名空間

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

<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)系，并且如此復(fù)雜的命名一般不會(huì)引起代碼命名上的沖突，并且同時(shí)也簡(jiǎn)化了你的css，因?yàn)楝F(xiàn)在你的css可以這樣寫(xiě)了：

.timeListLastItem{...}

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

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

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

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

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

<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é)語(yǔ)

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。