命名參考

CSS選擇器命名及經常使用命名

        規範的命名也是Web標準中的重要一項，標準的命名可使代碼更加易讀，並且利於搜索引擎搜索，好比定義了兩個div，一個id命名爲「div1」，另一個命名爲「News」，確定第二個比較易讀，並且搜索引擎抓取率要高，在團隊合做中還能夠大大提升工做效率。爲了達到這種效果咱們就要規範化命名（語義化命名）！

        說個題外話，規範化命名的代碼，會顯着你更加專業！

        關於CSS命名法，和其餘的程序命名差很少，主要有三種：駱駝命名法，帕斯卡命名法，匈牙利命名法。看他們的名字挺很差理解的，不要被嚇到了，其實很容易，不信的話繼續往下看~



【駱駝命名法】
      說到駱駝你們確定會想到它那明顯的特徵，背部的隆起，一高一低的，咱們的命名也要這樣一高一低，怎麼才能這樣，就用大小寫字母唄~，大寫的英文就至關於駱駝背部的凸起，小寫的就是凹下去的地方了，可是這個也是有規則的，就是第一個字母要小寫，後面的詞的第一個字母就要用大寫，以下：

1. #headerBlock

複製代碼

第一個單詞（header）的第一個字母（h）用小寫，第二個單詞（block）的第一個字母用大寫（B），若是第二個單詞後面還有單詞呢？那就是下面這種狀況

1. .navMenuRedButton

複製代碼

第一個單詞（nav）的第一個字母（n）用小寫，第二個單詞（menu）的第一個字母用大寫（M），第三個單詞（red）的第一個字母也用大寫（R），第四個單詞（button）的第一個字母仍是用大寫（B），一樣後面全部單詞的首字母都要大寫。



【帕斯卡命名法】
      這種命名法一樣也是大小寫字母混編而成，和駱駝命名法很像，只有一點區別，就是首字母要大寫，以下：

1. #HeaderBlock

複製代碼

和駱駝命名法只有一點區別，就是全部單詞的首字母都要大寫，固然也包括第一個單詞（header）的首字母（h）了，也要大寫。

1. .NavMenuRedButton

複製代碼

若是有多個，也是所有單詞的首字母均要大寫。

題外話，若是說「駱駝命名法」是單峯駝的話，那麼「帕斯卡命名法」就是雙峯駝了~



【匈牙利命名法】
匈牙利命名法，是須要在名稱前面加上一個或多個小寫字母做爲前綴，來讓名稱更加好認，更容易理解，好比：

1. #head_navigation

複製代碼

1. .red_navMenuButton

複製代碼

        以上三種，前兩種（駱駝命名法、帕斯卡命名法）在命名CSS選擇器的時候比較經常使用，固然這三種命名法能夠混合使用，只須要遵照有一個原則「容易理解，方便協同工做」就OK了，或者說「即便不懂代碼的人看了代碼也知道這塊起什麼做用」，沒有必要強調是哪一種命名法，根據我的喜愛使用就行。

        如下爲頁面模塊的經常使用命名：
        頭：header
        內容：content/container
        尾：footer
        導航：nav
        側欄：sidebar
        欄目：column
        頁面外圍控制總體佈局寬度：wrapper
        左右中：left right center
        登陸條：loginbar
        標誌：logo
        廣告：banner
        頁面主體：main
        熱點：hot
        新聞：news
        下載：download
        子導航：subnav
        菜單：menu
        子菜單：submenu
        搜索：search
        友情連接：friendlink
        頁腳：footer
        版權：copyright
        滾動：scroll
        小技巧：tips


        到這節課，都是CSS比較基礎的知識，爲了照顧沒有一點基礎的同窗，從下節課開始，在「基礎四」「基礎五」將介紹CSS佈局頁面中的很重要的兩個概念：
       
1）盒子模型       
2）內聯元素VS塊狀元素

       強調：這兩塊內容要求你們必定要理解透徹，否則會對後面的實戰練習有影響，好比作出來的頁面錯位，就是由於對這兩塊的內容理解不夠致使的。