css命名seo

页头:header 
登录条:loginBar 
标志:logo 
侧栏:sideBar 
广告:banner 

导航:nav 
子导航:subNav 
菜单:menu 
子菜单:subMenu 
搜索:search 
滚动:scroll 

页面主体:main 
内容:content/container/box 
标签页:tab 
文章列表:list 
提示信息:msg 
小技巧:tips 
栏目标题:title 

加入:joinus 
指南:guild 
服务:service 
热点:hot 
新闻:news 
下载:download 
注册:regsiter 
状态:status 

按钮:btn 
投票:vote 
友情链接:friendLink 
页脚:footer 
合作伙伴:partner 
版权:copyRight 

CSSID的命名 
外套:wrap 
主导航:mainNav 
子导航:subnav 
页眉:header 
页脚:footer 
整个页面:main 

商标:label 
标题:title 
主导航:mainNav(globalNav) 
顶导航:topnav 
边导航:sidebar 
左导航:leftsideBar 
右导航:rightsideBar 
旗志:logo 
标语:banner 
菜单内容1:menu1Content 
菜单容量:menuContainer 

容器:container/box 
内容:content 
子菜单:submenu 
边导航图标:sidebaricon 
注释:note 
搜索:search 
登陆:login 
功能区:shop(如购物车，收银台) 
当前的current 

面包屑:breadCrumb(即页面所处位置导航提示) 

样式文件命名 
主要的:master.css 
布局版面:layout.css 
专栏:columns.css 
文字:font.css 
打印样式:print.css 
主题:themes.css 
通用：common.css/public

常见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

1 前端开发命名规范
1.1 为什么要制定CSS命名规范
统一的命名规范，便于多人开发维护时代码统一，减少项目沟通和交接的成本，增加代码的语义化。

1.2 CSS命名规则
样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、中划线 （-）组成。

可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 123456…,red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class="left-news"、class="2" ，以避免当状态改变时名称失去意义。尽量用单个单词简单描述class名称。

双单词或多单词组合方式：形容词-名词、命名空间-名次、命名空间-形容词-名词。例如：news-list、mod-feeds、mod-my-feeds、cell-title

1.3 Class 和 id的使用方法
把id留给后台开发和JS使用，除此之外页面的page id(如首页的外层需要一个ID id="pageIndex")，页面结构（header main footer）允许用id命名(ID命名建议使用驼峰命名)。其他禁止id使用在样式表CSS命名中，一律使用class命名。

1.4 命名空间
在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。

什么是CSS命名空间？

通过统一的命名规范定义命名的范围，成为CSS class & id命名空间。

布局: 以语义化的单词layout作为命名空间，例如主栏布局命名 layout-main，只改变layout-命名空间后面的命名，layout始终保留。布局的命名空间为layout-xxx。

模块：页面是由一个或多个模块组成，模块的英文单词是module，规范简写成mod，如新闻模块mod-news，照片展示模块mod-photo-show。模块的命名空间为mod-xxx 。

元件：元件是属于模块内部的，也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell-user-photo。元件的命名空间为cell-xxx 。

1.5 通用命名
(1)页面框架命名，一般具有唯一性，推荐用ID命名
ID名称    命名    ID名称    命名
头部    header    主体    main
脚部    footer    容器    wrapper
侧栏    sideBar    栏目    column
布局    layout          
(2)模块结构命名
Class名称    命名    Class名称    命名
模块(如：新闻模块)    mod (mod-news)    标题栏    title
内容    content    次级内容    sub-content
(3)导航结构命名
Class名称    命名    Class名称    命名
导航    nav    主导航    main-nav
子导航    sub-nav    顶部导航    top-nav
菜单    menu    子菜单    sub-menu
(4)一般元素命名
Class名称    命名    Class名称    命名
二级    sub    面包屑    breadcrumb
标志    logo    广告    bner(禁用banner或ad)
登陆    login    注册    register/reg
搜索    search    加入    join
状态    status    按钮    btn
滚动    scroll    标签页    tab
文章列表    list    短消息    msg/message
当前的    current    提示小技巧    tips
图标    icon    注释    note
指南    guide    服务    service
热点    hot    新闻    news
下载    download    投票    vote
合作伙伴    partner    友情链接    link
版权    copyright    演示    demo
下拉框    select    摘要    summary
翻页    pages    主题风格    themes
设置    set    成功    suc
按钮    btn    文本    txt
颜色    color/c    背景    bg
边框    border/bor    居中    center
上    top/t    下    bottom/b
左    left/l    右    right/r
添加    add    删除    del
间隔    sp    段落    p
弹出层    pop    公共    global/gb
操作    op    密码    pwd
透明    tran    信息    info
重点    hit    预览    pvw
单行输入框    input    首页    index
日志    blog    相册    photo
留言板    guestbook    用户    user
确认    confirm    取消    cancel
报错    error          
(5)全局皮肤样式
文字颜色(命名空间text-xxx)
text-c1, text-c2,text-c3……

背景颜色(命名空间bg -xxx)
bg-c1,bg-c2,bg-c3……

边框颜色(命名空间border-xxx)
border-c1,border-c2,border-c3…