CSS選擇器命名及常用命名
阿新 • • 發佈:2018-12-26
規範的命名也是Web標準中的重要一項,標準的命名可以使程式碼更加易讀,而且利於搜尋引擎搜尋,比如定義了兩個div,一個 id 命名為“div1”,另外一個命名為“News”,肯定第二個比較易讀,而且搜尋引擎抓取率要高,在團隊合作中還可以大大提高工作效率。為了達到這種效果我們就要規範化命名(語義化命名)!
說個題外話,規範化命名的程式碼,會顯著你更加專業!
關於CSS命名法,和其他的程式命名差不多,主要有三種:駱駝命名法,帕斯卡命名法,匈牙利命名法。看他們的名字挺不好理解的,不要被嚇到了,其實很容易,不信的話繼續往下看~
【駱駝命名法】
說到駱駝大家肯定會想到它那明顯的特徵,背部的隆起,一高一低的,我們的命名也要這樣一高一低,怎舉才能這樣,就用大小寫字母唄~,大寫的英文就相當於駱駝背部的凸起,小寫的就是凹下去的地方了,但是這個也是有規則的,就是第一個字母要小寫,後面的詞的第一個字母就要用大寫,如下:
#headerBlock
如果第二個單詞後面還有單詞呢?那就是下面這種情況,
.navMenuRedButton
也就是說,無論幾個單詞湊一塊,後面所有單詞癿首字母都要大寫。
【帕斯卡命名法】
這種命名法同樣也是大小寫字母混編而成,和駱駝命名法很像,但和駱駝命名法有一點區別,就是所有單詞的首字母都要大寫,當然也包括第一個單詞,如下:
#HeaderBlock
.NavMenuRedButton
題外話,如果說“駱駝命名法”是單峰駝的話,那麼“帕斯卡命名法”就是雙峰駝了~
【匈牙利命名法】
匈牙利命名法,是需要在名稱前面加上一個或多個小寫字母作為字首,來讓名稱更加好認,更容易理解,比如:
#head_navigation
.red_navMenuButton
以上三種,前兩種(駱駝命名法、帕斯卡命名法)在命名CSS選擇器的時候比較常用,當然這三種命名法可以混合使用,另需要遵守一個原則“容易理解,方便協同工作”就OK了,或者說”即使不懂程式碼的人看了程式碼也知道這塊起什麼作用”,沒有必要強調是那種命名法,根據個人喜好使用就行。
頭:header | 導航:nav | 選單:menu | 友情連結:friendlink |
頁面外圍包裹:wrapper | 子導航:subnav | 子選單:submenu | 下載:download |
頁面主體:main | 廣告:banner | 側欄:sidebar | 小技巧:tips |
內容:content | 標誌:logo | 欄目:column | 滾動:scroll |
頁尾:footer | 搜尋:search | 熱點:hot | 上一個:prev |
版權:copyright | 登入條:loginbar | 新聞:news | 下一個:next |