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

1、為CSS類名定義的時候,盡量使用小寫字母,如果有兩個以上的單詞,在每個單詞之間使用”-”符或單詞首字母大寫(第一個單詞除外)。如:”main-content”或”mainContent”。 
 

2、優化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“.

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com