大家在寫css的時候，經常會遇到關於命名的問題。頁面上成百甚至上千的class或者id，我們就會越來越感到困擾。 所以，這樣我們就很有必要整理自己的一套命名規範。這裏我就說說我自己的命
大家在寫css的時候，經常會遇到關於命名的問題。頁面上成百甚至上千的class或者id，我們就會越來越感到困擾。所以，這樣我們就很有必要整理自己的一套命名規範。這裏我就說說我自己的命名規範。
類-class
類名，我通常用橫線就像這樣
.head-logo { … } /頁面頭部logo的類名/
.nav-li { … } /導航條上list的類名/
.link-panel-h2 { … } /鏈接模塊的標題/
ID
id,我通常用駝峯式命名。在我的理解裏駝峯式命名專門用在獨一無二的變量上。所以我也經常在javascrpt中採用這個方法來定義變量。
#navLastLi { … } /獲取到導航條的最後一個list/
#panelContent { … } /模塊的正文部分/
#sidebarFooter { … } /側邊欄底部模塊/
那麼，頁面模塊很多，我們可以這樣整理
常用的CSS命名規則
頭：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 內容：content 標籤頁：tab
文章列表：list 提示信息：msg 小技巧：tips 欄目標題：title
加入：joinus 指南：guild 服務：service 註冊：regsiter
狀態：status 投票：vote 合作伙伴：partner
(1)頁面結構
容器: container 頁頭：header 內容：content/container
頁面主體：main 頁尾：footer 導航：nav
側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper
左右中：left right center
(2)導航
導航：nav 主導航：mainbav 子導航：subnav
頂導航：topnav 邊導航：sidebar 左導航：leftsidebar
右導航：rightsidebar 菜單：menu 子菜單：submenu
標題: title 摘要: summary
(3)功能
標誌：logo 廣告：banner 登陸：login 登錄條：loginbar
註冊：regsiter 搜索：search 功能區：shop
標題：title 加入：joinus 狀態：status 按鈕：btn
滾動：scroll 標籤頁：tab 文章列表：list 提示信息：msg
當前的: current 小技巧：tips 圖標: icon 註釋：note
指南：guild 服務：service 熱點：hot 新聞：news
下載：download 投票：vote 合作伙伴：partner
友情鏈接：link 版權：copyright
我們在使用腳本進行頁面動態變換的時候，推薦的方法就是修改類名或者修改id名來修改顯示樣式，當然，常用的還是類名class。
修改類名-取名規範
(1)顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用’font+字體大小’作爲名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標題欄樣式,使用’類別+功能’的方式命名,如
.barnews { }
.barproduct { }
注意事項::
1.一律小寫;
2.儘量用英文;
3.不加中槓和下劃線;
4.儘量不縮寫，除非一看就明白的單詞.
常用css文件名
主要的 master.css 模塊 module.css 基本共用 base.css
佈局，版面 layout.css 主題 themes.css 專欄 columns.css
文字 font.css 表單 forms.css 補丁 mend.css 打印 print.css
根據頁面分欄結構的命名
CSS代碼的命名慣例一直是大家熱門討論的話題。通過分析一個流行三欄佈局中的必要元素，來爲大家講解關於使用語義化方法替代結構化方法來命名CSS類的建議和指導。
CSS類命名的語義化VS結構化方式
一般而言，CSS類名的語義化聲明方式應當考慮你的頁面中某個相對元素的”用意”，獨立於它的”定位”或確切的特性(結構化方式)。像left-bar, red-text, small-title…這些都屬於結構化定義的例子。讓我們看看下面這個例子:
…而現在我們想把頁面中的元素調換一下位置，如果你使用的是結構化方式(1)，那麼你就要把所有CSS類名重新進行定義，因爲它們的位置變了。在佈局(3)中，我們看到元素都倒轉了: right-bar 現在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用語義化方式則避免了此類問題。
換句話說，使用語義化方式的話，你在修改網站佈局的時候可以僅僅修改相關CSS類的屬性即可，而不用修改它們的類名了，如果網站的代碼很龐大，這將節省大量的時間。
關於語義化的一些建議:
在開始之前，我想推薦兩種簡單的編寫較好的CSS代碼的指導方針:
1、爲CSS類名定義的時候，儘量使用小寫字母，如果有兩個以上的單詞，在每個單詞之間使用”-”符或單詞首字母大寫(第一個單詞除外)。如:”main-content”或”mainContent”。
2、優化CSS代碼，僅創建關鍵主要的CSS類並重新爲子元素使用符合HTML標準的標籤(h1, h2, p, ul, li, blockquote,…)，例如,不要使用這種哦你那個方式:
<div class=”main”>
<div class=”main-title”>…</div>
<div class=”main-paragraph”>…</div>
</div>
而要這樣寫:
<div class=“main”>
<h1>…</h1>
<p>…</p>
</div>
三欄佈局中使用語義化方式的例子
讓我們來通過這個簡單的例子講解一下如何爲經典的三欄佈局使用語義化方式命名:
使用語義化方式爲CSS命名可以像這樣:
#container{…}
/—- Top section —-/
#header{…}
#navbar{…}
/—- Main —-/
#menu{…}
#main{…}
#sidebar{…}
/—- Footer —-/
#footer{…}
Container
“#container“ 就是將你頁面中的所有元素包在一起的部分，這部分你還可以命名爲: ”wrapper“, “wrap“, “page“.
Header
“#header” 是網站頁面的頭部區域，一般來講，它包含網站的logo和一些其他元素。這部分你還可以命名爲:”top“, “logo“, “page-header” (或 pageHeader).
Navbar
“#navbar“等同於橫向的導航欄，是最典型的網頁元素。這部分你還可以命名爲:“nav”, “navigation”, “nav-wrapper”.
Menu
“#Menu”區域包含一般的鏈接和菜單，這部分你還可以命名爲: ”sub-nav ”, “links“.
Main
“#Main”是網站的主要區域，如果是博客的話它將包含你的日誌。這部分你還可以命名爲: ”content“, “main-content” (or “mainContent”)。
Sidebar
“#Sidebar” 部分可以包含網站的次要內容，比如最近更新內容列表、關於網站的介紹或廣告元素等…這部分你還可以命名爲: ”sub-nav“, “side-panel“, “secondary-content“.
Footer
“#Footer”包含網站的一些附加信息，這部分你還可以命名爲: ”copyright“.