扣丁學堂HTML5培訓帶你瞭解小白如何進行代碼命名

起名字其實也是一門學問，特別是在咱們的代碼命名方面，有些同窗常常問我，到底該如何給個人方法命名啊，我建一個新的代碼該叫什麼啊？這都是小白的一大難題，那麼扣丁學堂HTML5培訓小編今天就說一下若是來給代碼命名，命名規則究竟是什麼？

1. Container

「container「 就是將頁面中的全部元素包在一塊兒的部分，這部分還能夠命名爲:「wrapper「, 「wrap「, 「page「.

1. Header

「header」 是網站頁面的頭部區域，通常來說，它包含網站的logo和一些其餘元素。這部分還能夠命名爲:「page-header」 (或 pageHeader).

1. Navbar

「navbar「等同於橫向的導航欄，是最典型的網頁元素。這部分還能夠命名爲:「nav」, 「navigation」, 「nav-wrapper」.

1. Menu

「Menu」區域包含通常的連接和菜單，這部分還能夠命名爲: 「subNav 「, 「links「，「sidebar-main」.

1. Main

「Main」是網站的主要區域，若是是博客的話它將包含的日誌。這部分還能夠命名爲: 「content「, 「main-content」 (或「mainContent」)。

1. Sidebar

「Sidebar」 部分能夠包含網站的次要內容，好比最近更新內容列表、關於網站的介紹或廣告元素等…這部分還能夠命名爲: 「subNav 「, 「side-panel「, 「secondary-content「.

1. Footer

「Footer」包含網站的一些附加信息，這部分還能夠命名爲: 「copyright「.

須要注意的幾點

1.儘可能考慮爲元素命名其自己的做用或」用意」，達到語義化。不要使用表面形式的命名.

如:red/left/big等。

2.組合命名規則:

[元素類型]-[元素做用/內容]

如:搜索按鈕: btn-search

登陸表單:form-login

新聞列表:list-news

3.涉及到交互行爲的元素命名:

凡涉及交互行爲的元素一般會有正常、懸停、點擊和已瀏覽等不一樣樣式，命名可參考如下規則:

鼠標懸停:：hover 點擊：click 已瀏覽：visited

如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited

Photoshop圖層結構規範

Photoshop圖層命名遵循樹形結構，凡某元素組成的圖層大於3層，便可造成組，全部圖層儘可能避免使用默認命名(圖層+編號)。

經常使用命名彙總

站頭部: head/header(頭部) top（頂部）

導航：nav 導航具體區分：topnav(頂部導航)、mainnav(主導航)、mininav(迷你導航)、textnav(導航文本)、subnav(子導航/二級導航)

旗幟、廣告和商標：logo（旗幟）、brand(商標)、banner(標語)

搜索：sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按鈕)、sreachinput（搜索輸入框）

註冊和登陸：login(登陸)、regsiter(註冊)、userbox(用戶名/通行證的文本框)、password(密碼)

佈局、分欄和框：layout(佈局)、bigdiv(大div)、leftdiv(左分欄)、rightdiv(右分欄)、leftfloat(左浮動)、rightfloat(右浮動)、mainbox()、subpage(子頁面/二級頁面)

頁腳/底部：foot/footer(頁腳/底部)、copyright(版權信息)、sitemap(網站地圖)

其餘：content(內容)、skin(皮膚)、title(標題)、from(表單)、pic(圖片)、news(新聞)、shop(購物區)、list(列表/清單)、newslist(新聞列表)、 downloadlist(下載列表)、piclist(圖片列表)、dropmenv(下拉菜單)、cor/corner(圓角)、homepage(首頁)、crumb(當前位置導航)

分類命名

id的命名:

(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

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; }

想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育有專業的HTML5講師爲您指導，此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。