CSS命名規則規範整理

你們在寫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代碼的指導方針:

一、爲CSS類名定義的時候，儘可能使用小寫字母，若是有兩個以上的單詞，在每一個單詞之間使用」-」符或單詞首字母大寫(第一個單詞除外)。如:」main-content」或」mainContent」。

二、優化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「.