CSS命名規則規範整理

轉載聲明:
原載:彬Go
本文連接:http://blog.bingo929.com/css-coding-semantic-naming.html

在此，很是感謝該文章做者的分享，本文徹底轉載自上面連接，此處做爲備份，方便查看使用。

 

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,…)，例如,不要使用這種哦你那個方式:

1. <div class=」main」> 
2.     <div class=」main-title」>…</div> 
3.     <div class=」main-paragraph」>…</div> 
4. </div> 

 

而要這樣寫:

1. <div class=「main」> 
2.     <h1>…</h1> 
3.     <p>…</p> 
4. </div> 

 

 

三欄佈局中使用語義化方式的例子

讓咱們來經過這個簡單的例子講解一下如何爲經典的三欄佈局使用語義化方式命名:

 

使用語義化方式爲CSS命名能夠像這樣:

1. #container{…}  
2. /*—- Top section —-*/ 
3.     #header{…}  
4.     #navbar{…}  
5.     /*—- Main —-*/ 
6.     #menu{…}  
7.     #main{…}  
8.     #sidebar{…}  
9.     /*—- Footer —-*/ 
10.     #footer{…} 

 

1. Container
   「#container「 就是將你頁面中的全部元素包在一塊兒的部分，這部分你還能夠命名爲: 」wrapper「, 「wrap「, 「page「.
    
2. Header
   「#header」 是網站頁面的頭部區域，通常來說，它包含網站的logo和一些其餘元素。這部分你還能夠命名爲:」top「, 「logo「, 「page-header」 (或 pageHeader). 
    
3. Navbar
   「#navbar「等同於橫向的導航欄，是最典型的網頁元素。這部分你還能夠命名爲:「nav」, 「navigation」, 「nav-wrapper」. 
    
4. Menu
   「#Menu」區域包含通常的連接和菜單，這部分你還能夠命名爲: 」sub-nav 」, 「links「. 
    
5. Main
   「#Main」是網站的主要區域，若是是博客的話它將包含你的日誌。這部分你還能夠命名爲: 」content「, 「main-content」 (or 「mainContent」)。 
    
6. Sidebar
   「#Sidebar」 部分能夠包含網站的次要內容，好比最近更新內容列表、關於網站的介紹或廣告元素等…這部分你還能夠命名爲: 」sub-nav「, 「side-panel「, 「secondary-content「. 
    
7. Footer
   「#Footer」包含網站的一些附加信息，這部分你還能夠命名爲: 」copyright「.