class 命名規範
常見class關鍵詞
布局類：header, footer, container, main, content, aside, page, section
包裹類：wrap, inner
區塊類：region, block, box
結構類：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表類：list, item, field
主次類：primary, secondary, sub, minor
大小類：s, m, l, xl, large, small
狀態類：active, current, checked, hover, fail, success, warn, error, on, off
導航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互類：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay
星級類：rate, star
分割類：group, seperate, divider
等分類：full, half, third, quarter
表格類：table, tr, td, cell, row
圖片類：img, thumbnail, original, album, gallery
語言類：cn, en
論壇類：forum, bbs, topic, post
方向類：up, down, left, right
其他語義類：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
頁面結構
容器: container/wrap
整體寬度：wrapper
頁頭：header
內容：content
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
中間內容：center
導航
導航：nav
導航：mainnav/globalnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
邊導航圖標：sidebarIcon
菜單：menu
子菜單：submenu
標題: title
功能
標誌：logo
登錄：login
登錄條：loginbar
註冊：regsiter
產品：products
產品價格：productsPrices
產品評論：productsReview
編輯評論：editor-review
最新產品：news-release
廣告/標語：banner
摘要:summary
生產商：publisher
縮略圖：screenshot
常見問題：faqs
關鍵詞：keyword
博客：blog
論壇：forum
搜索：search
搜索輸入框：search-input
搜索輸出：search-output
搜索結果：search-results
加入我們：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg/message
當前的: current
小技巧：tips
皮膚：skin
充值：pay
活動：activities
推廣：promotion
公告：announcement
排行：ranking
公司簡介：companyProfile
公司設備：equipment
公司榮譽：glories
企業文化：culture
企業規模：scaleScale
營銷網絡：salesNetwork
組織機構：organization
技術力量：technology
分支機構：branches
企業資質：EnterpriseQualification
公司實力：strengthStrength
經營理念：operationPrinciple
經理致辭：manager_oration
發展歷程：developmentHistory
工程案例：EngineeringProjects
分類瀏覽：browseByCategory
應用領域：applicationFields
人力資源：humanResourceHr
領導致辭： leader_oration
客戶留言：customerMessage
客戶服務：customerService
您的要求：yourRequirements
銷售信息：salesInformation
招商：EnterpriseEstablishing
教育培訓：EducationTraining
在線交流：onlineCommunication
質量認證：qualityCertification
合作加盟：joinInCooperation
產品描述：productsDescription
業務範圍：businessScope
產品銷售：salesSales
聯系我們：contactUs
信息發布：Information
返回首頁：homepage
產品定購：order
電子商務：E-business
版權所有：copy Right
友情連結：hot Link
行業新聞：tradeNews
行業動態：trends
郵編：postalCodeZipcode
新聞動態：newsTrends
公司名稱：companyName
銷售熱線：salesHot_Line
聯系人：contactPerson
建設中：InConstruction
證書：certificate
地址：ADD/Add
電話：TEL/Tel
傳真：FAX/Fax
產品名稱：productName
產品說明：description
價格：price
品牌：brand
規格：specification
尺寸：size
生產廠家：manufacuturer
型號：model
產品標號：Item No
技術指標：techniqueData
產品描述：description
產地：productionPlace
用途：application
論壇：Forum
在線訂購：on_lineOrder
招標：bidInviting
綜述：general
業績：achievements
大事：greatEvent
動態：trends
服務：service
投資：Investment
行業：Industry
規劃：programming
環境：environment
發送：delivery
提交：submit
重寫：reset
社區：community
業務：business
在線調查：onlineInquiry
下載中心：download
意見反饋：feedback
常見問題：FAQ
中心概況：generalProfile
遊樂園：amusementPark
專題報道：specialReport
圖標: icon
註釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
商 標：label/branding
當前位置：breadcrumb/loc
購物車：shop
標簽：tag
信譽：siteinfo-credits
網站信息：siteinfo
法律聲明：siteinfo-legal
合作夥伴：partner
友情鏈接：friendlink
版權：copyright
規則
- 以中劃線連接，如 .item-img
- 使用兩個中劃線表示特殊化，如 .item-img.item-img--small 表示在 .item-img 的基礎上特殊化
- 狀態類直接使用單詞，參考上面的關鍵詞，如 .active, .checked
- 圖標以 icon- 為前綴（字體圖標采用.icon-font.i-name方式命名）
- 模塊采用關鍵詞命名，如.slide, .modal, .tips, .tabs，特殊化采用上面兩個中劃線表示，如 .imgslide--full, .modal--pay, .tips--up, .tabs--simple
- js 操作的類統一加上 js- 前綴
- 不要超過四個 class 組合使用，如 .a.b.c.d
class 命名規範