常見class關鍵詞
布局類：header, footer, container, main, content, aside, page, section
包裹類：wrap, inner
區(qū)塊類：region, block, box
結(jié)構(gòu)類：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
狀態(tài)類：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...
頁面結(jié)構(gòu)
容器: container/wrap
整體寬度：wrapper
頁頭：header
內(nèi)容：content
頁面主體：main
頁尾：footer
導航：nav
側(cè)欄：sidebar
欄目：column
中間內(nèi)容：center
導航
導航：nav
導航：mainnav/globalnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
邊導航圖標：sidebarIcon
菜單：menu
子菜單：submenu
標題: title
功能
標志：logo
登錄：login
登錄條：loginbar
注冊：regsiter
產(chǎn)品：products
產(chǎn)品價格：productsPrices
產(chǎn)品評論：productsReview
編輯評論：editor-review
最新產(chǎn)品：news-release
廣告/標語：banner
摘要:summary
生產(chǎn)商：publisher
縮略圖：screenshot
常見問題：faqs
關鍵詞：keyword
博客：blog
論壇：forum
搜索：search
搜索輸入框：search-input
搜索輸出：search-output
搜索結(jié)果：search-results
加入我們：joinus
狀態(tài)：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg/message
當前的: current
小技巧：tips
皮膚：skin
充值：pay
活動：activities
推廣：promotion
公告：announcement
排行：ranking
公司簡介：companyProfile
公司設備：equipment
公司榮譽：glories
企業(yè)文化：culture
企業(yè)規(guī)模：scaleScale
營銷網(wǎng)絡：salesNetwork
組織機構(gòu)：organization
技術力量：technology
分支機構(gòu)：branches
企業(yè)資質(zhì)：EnterpriseQualification
公司實力：strengthStrength
經(jīng)營理念：operationPrinciple
經(jīng)理致辭：manager_oration
發(fā)展歷程：developmentHistory
工程案例：EngineeringProjects
分類瀏覽：browseByCategory
應用領域：applicationFields
人力資源：humanResourceHr
領導致辭： leader_oration
客戶留言：customerMessage
客戶服務：customerService
您的要求：yourRequirements
銷售信息：salesInformation
招商：EnterpriseEstablishing
教育培訓：EducationTraining
在線交流：onlineCommunication
質(zhì)量認證：qualityCertification
合作加盟：joinInCooperation
產(chǎn)品描述：productsDescription
業(yè)務范圍：businessScope
產(chǎn)品銷售：salesSales
聯(lián)系我們：contactUs
信息發(fā)布：Information
返回首頁：homepage
產(chǎn)品定購：order
電子商務：E-business
版權所有：copy Right
友情連結(jié)：hot Link
行業(yè)新聞：tradeNews
行業(yè)動態(tài)：trends
郵編：postalCodeZipcode
新聞動態(tài)：newsTrends
公司名稱：companyName
銷售熱線：salesHot_Line
聯(lián)系人：contactPerson
建設中：InConstruction
證書：certificate
地址：ADD/Add
電話：TEL/Tel
傳真：FAX/Fax
產(chǎn)品名稱：productName
產(chǎn)品說明：description
價格：price
品牌：brand
規(guī)格：specification
尺寸：size
生產(chǎn)廠家：manufacuturer
型號：model
產(chǎn)品標號：Item No
技術指標：techniqueData
產(chǎn)品描述：description
產(chǎn)地：productionPlace
用途：application
論壇：Forum
在線訂購：on_lineOrder
招標：bidInviting
綜述：general
業(yè)績：achievements
大事：greatEvent
動態(tài)：trends
服務：service
投資：Investment
行業(yè)：Industry
規(guī)劃：programming
環(huán)境：environment
發(fā)送：delivery
提交：submit
重寫：reset
社區(qū)：community
業(yè)務：business
在線調(diào)查：onlineInquiry
下載中心：download
意見反饋：feedback
常見問題：FAQ
中心概況：generalProfile
游樂園：amusementPark
專題報道：specialReport
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
商 標：label/branding
當前位置：breadcrumb/loc
購物車：shop
標簽：tag
信譽：siteinfo-credits
網(wǎng)站信息：siteinfo
法律聲明：siteinfo-legal
合作伙伴：partner
友情鏈接：friendlink
版權：copyright
規(guī)則
- 以中劃線連接，如 .news-title
- 使用兩個中劃線表示特殊化，如 .news-title.news-title--small 表示在 .news-title的基礎上特殊化
- 狀態(tài)類直接使用單詞，參考上面的關鍵詞，如 .active, .checked
- 圖標以 icon- 為前綴（字體圖標采用.icon-pro.i-name方式命名）
- 模塊采用關鍵詞命名，如.slide, .modal, .tips, .tabs，特殊化采用上面兩個中劃線表示，如 .imgslide--full, .modal--pay, .tips--up, .tabs--simple
- js 操作的類統(tǒng)一加上 js- 前綴
- 不要超過四個 class 組合使用，如 .a.b.c.d