CSS命名規則規範整理，css命名規則規範

CSS命名規則規範整理，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,…)，例如,不要使用這種哦你那個方式:

 

而要這樣寫:

 

 

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

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

 

使用語義化方式為CSS命名可以像這樣: