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 命名規範