CSS選擇器命名及常用命名

? ?? ???規(guī)范的命名也是Web標(biāo)準(zhǔn)中的重要一項(xiàng)，標(biāo)準(zhǔn)的命名可以使代碼更加易讀，而且利于搜索引擎搜索，比如定義了兩個(gè)div，一個(gè)id命名為“div1”，另外一個(gè)命名為“News”，肯定第二個(gè)比較易讀，而且搜索引擎抓取率要高，在團(tuán)隊(duì)合作中還可以大大提高工作效率。為了達(dá)到這種效果我們就要規(guī)范化命名（語(yǔ)義化命名）！

? ?? ???說(shuō)個(gè)題外話，規(guī)范化命名的代碼，會(huì)顯著你更加專業(yè)！

? ?? ???關(guān)于CSS命名法，和其他的程序命名差不多，主要有三種：駱駝命名法，帕斯卡命名法，匈牙利命名法。看他們的名字挺不好理解的，不要被嚇到了，其實(shí)很容易，不信的話繼續(xù)往下看~



【駱駝命名法】
? ?? ?說(shuō)到駱駝大家肯定會(huì)想到它那明顯的特征，背部的隆起，一高一低的，我們的命名也要這樣一高一低，怎么才能這樣，就用大小寫字母唄~，大寫的英文就相當(dāng)于駱駝背部的凸起，小寫的就是凹下去的地方了，但是這個(gè)也是有規(guī)則的，就是第一個(gè)字母要小寫，后面的詞的第一個(gè)字母就要用大寫，如下：

#headerBlock

復(fù)制代碼

第一個(gè)單詞（header）的第一個(gè)字母（h）用小寫，第二個(gè)單詞（block）的第一個(gè)字母用大寫（B），如果第二個(gè)單詞后面還有單詞呢？那就是下面這種情況

.navMenuRedButton

復(fù)制代碼

第一個(gè)單詞（nav）的第一個(gè)字母（n）用小寫，第二個(gè)單詞（menu）的第一個(gè)字母用大寫（M），第三個(gè)單詞（red）的第一個(gè)字母也用大寫（R），第四個(gè)單詞（button）的第一個(gè)字母還是用大寫（B），同樣后面所有單詞的首字母都要大寫。



【帕斯卡命名法】
? ?? ?這種命名法同樣也是大小寫字母混編而成，和駱駝命名法很像，只有一點(diǎn)區(qū)別，就是首字母要大寫，如下：

#HeaderBlock

復(fù)制代碼

和駱駝命名法只有一點(diǎn)區(qū)別，就是所有單詞的首字母都要大寫，當(dāng)然也包括第一個(gè)單詞（header）的首字母（h）了，也要大寫。

.NavMenuRedButton

復(fù)制代碼

如果有多個(gè)，也是全部單詞的首字母均要大寫。

題外話，如果說(shuō)“駱駝命名法”是單峰駝的話，那么“帕斯卡命名法”就是雙峰駝了~



【匈牙利命名法】
匈牙利命名法，是需要在名稱前面加上一個(gè)或多個(gè)小寫字母作為前綴，來(lái)讓名稱更加好認(rèn)，更容易理解，比如：

#head_navigation

復(fù)制代碼

.red_navMenuButton

復(fù)制代碼

? ?? ???以上三種，前兩種（駱駝命名法、帕斯卡命名法）在命名CSS選擇器的時(shí)候比較常用，當(dāng)然這三種命名法可以混合使用，只需要遵守有一個(gè)原則“容易理解，方便協(xié)同工作”就OK了，或者說(shuō)“即使不懂代碼的人看了代碼也知道這塊起什么作用”，沒(méi)有必要強(qiáng)調(diào)是哪種命名法，根據(jù)個(gè)人喜好使用就行。

? ?? ???以下為頁(yè)面模塊的常用命名：
? ?? ???頭：header
? ?? ???內(nèi)容：content/container
? ?? ???尾：footer
? ?? ???導(dǎo)航：nav
? ?? ???側(cè)欄：sidebar
? ?? ???欄目：column
? ?? ???頁(yè)面外圍控制整體布局寬度：wrapper
? ?? ???左右中：left right center
? ?? ???登錄條：loginbar
? ?? ???標(biāo)志：logo
? ?? ???廣告：banner
? ?? ???頁(yè)面主體：main
? ?? ???熱點(diǎn)：hot
? ?? ???新聞：news
? ?? ???下載：download
? ?? ???子導(dǎo)航：subnav
? ?? ???菜單：menu
? ?? ???子菜單：submenu
? ?? ???搜索：search
? ?? ???友情鏈接：friendlink
? ?? ???頁(yè)腳：footer
? ?? ???版權(quán)：copyright
? ?? ???滾動(dòng)：scroll
? ?? ???小技巧：tips


? ?? ???到這節(jié)課，都是CSS比較基礎(chǔ)的知識(shí)，為了照顧沒(méi)有一點(diǎn)基礎(chǔ)的同學(xué)，從下節(jié)課開始，在“基礎(chǔ)四”“基礎(chǔ)五”將介紹CSS布局頁(yè)面中的很重要的兩個(gè)概念：
? ?? ??
1）盒子模型? ?? ??
2）內(nèi)聯(lián)元素VS塊狀元素

? ?? ??強(qiáng)調(diào)：這兩塊內(nèi)容要求大家一定要理解透徹，不然會(huì)對(duì)后面的實(shí)戰(zhàn)練習(xí)有影響，比如做出來(lái)的頁(yè)面錯(cuò)位，就是因?yàn)閷?duì)這兩塊的內(nèi)容理解不夠?qū)е碌摹?/p>

轉(zhuǎn)載于:https://www.cnblogs.com/suqifeng/p/3813801.html

總結(jié)

以上是生活随笔為你收集整理的命名参考的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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