CSS命名整理

1. 内容优先,表现为辅
2. css命名中英文对照
  current 当前    hover 悬停    selected 挑选   disabled 禁用   focus 得到焦点    blur 失去焦点   checked 勾选    success 成功    error 出错

  header(hd) 头部   content(cnt) 内容   title(tit) 标题   item 项目（条）    cell 单元   image/pic(img) 图片   text(txt) 文字    top 顶部    scrubber 时序菜单

  nav 导航    mainnav 主导航   subnav 子导航    topnav 顶部导航   breadcrumb 面包屑导航

  flink 友情链接    footer 尾    copyright 版权

  menu 菜单   submenu 子菜单   dropdown 下拉菜单

  searchBar 搜索条   search 搜索条    searchTxt 搜索框   searchBtn 搜索按钮    search_key 搜索词

  member 会员   ucenter 用户中心    loginBar 登陆条    login 登录    loginBtn 登录按钮   regsiter 注册按钮   btn-regsiter注册按钮    name 用户名    password 密码   nickname 昵称   mobilephone/mobile 手机    telephone/tel 电话   defaultavatar 默认头像

  hot 热点    news 新闻   banner/AD 广告    download 下载

  content 内容    title 标题    summary 摘要    time 时间

  share 分享    digg 顶    like 喜欢

  list 列表   pList 图片列表    tList 文字列表    tpList 图文列表

  table 表格    row 行   column 列    gutter 间隔   viewport 视口

  tab 标签    tags 标签   scroll 滚动 

  sidebar 侧边栏   column 栏目   section 区块    msg 提示信息    status 状态   vote 投票   tips 小技巧    guild 指南    note 注释

  icon- 图标    btn- 按钮

  goods 商品    goodsList 商品列表    goodsDetail 商品详情    goodsInfo 商品信息

  tuan 团购   tuanList 团购列表   tuanDetail  团购详情    tuanInfo 团购信息

  transition 动画   shadow 阴影   fade 淡入淡出   flip 翻页效    slide 滑动    slideup 上滑动   slidedown 下滑动   turn 翻页   horizontal 水平   vertical 垂直   collapsible 折叠    corners 拐角    flow 流    reverse 反向    pop 弹窗

  count 总数/计数   plus 加号/正   minus 减号/负    controlgroup 控制组

 

container
item-group
thumbnail
item-title
item-rate
comment-title
page-btn-group
page-btn

item-header
item-title
item-detail
left-detail
item-sub-detail
item-type
item-show
item-actors
item.cover.image.small.url
item-tags
item-tags-title
item-tags-list
comment-list-group
comment-title
more-comment

log-list
history-list-group
history-title
clear
subjects
info-group
rate-year

外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部

#wrapper    页面外围控制整体布局宽度
#container或#content    容器,用于最外层
#layout    布局
#head, #header    页头部分
#foot, #footer    页脚部分
#nav    主导航
#subnav    二级导航
#menu    菜单
#submenu    子菜单
#sideBar    侧栏
#sidebar_a, #sidebar_b    左边栏或右边栏
#main    页面主体
#tag    标签
#msg #message    提示信息
#tips    小技巧
#vote    投票
#friendlink    友情连接
#title    标题
#summary    摘要
#loginbar    登录条
#searchInput    搜索输入框
#hot    热门热点
#search    搜索
#search_output    搜索输出和搜索结果相似
#searchBar    搜索条
#search_results    搜索结果
#copyright    版权信息
#branding    商标
#logo    网站LOGO标志
#siteinfo    网站信息
#siteinfoLegal    法律声明
#siteinfoCredits    信誉
#joinus    加入我们
#partner    合作伙伴
#service    服务
#regsiter    注册
arr/arrow    箭头
#guild    指南
#sitemap    网站地图
#list    列表
#homepage    首页
#subpage    二级页面子页面
#tool, #toolbar    工具条
#drop    下拉
#dorpmenu    下拉菜单
#status    状态
#scroll    滚动
.tab    标签页
.left .right .center    居左、中、右
.news    新闻
.download    下载
.banner    广告条(顶部广告条)
电子贸易相关
.products    产品
.products_prices    产品价格
.products_description    产品描述
.products_review    产品评论
.editor_review    编辑评论
.news_release    最新产品
.publisher    生产商
.screenshot    缩略图
.faqs    常见问题
.keyword    关键词
.blog    博客
.forum    论坛
- util-01 reset /css/core/reset.css
- util-02 通用模块容器 /css/core/mod.css
- ui-01. 喜欢按钮 /css/core/fav_btn.css
- ui-02. 视频/相册列表项 /css/core/media_item.css
- ui-03. 评星 /css/core/rating.css
- ui-04. 通用按钮 /css/core/common_button.css
- ui-05. 分页 /css/core/pagination.css
- ui-06. 推荐按钮 /css/core/rec_btn.css
- ui-07. 老版对话框 /css/core/old_dialog.css
- ui-08. 老版Tab /css/core/old_tab.css
- ui-09. 老版成员列表 /css/core/old_userlist.css
- ui-10. 老版信息区 /css/core/notify.css
- ui-11. 社区用户导航 /css/core/profile_nav.css
- ui-12. 当前大社区导航 /css/core/site_nav.css
- ui-13. 加载中 /css/lib/loading.css

2.CSS样式文件命名如下 
CSS文件命名    说明
master.css,style.css    主要的
module.css    模块
base.css    基本共用
layout.css    布局，版面
themes.css    主题
columns.css    专栏
font.css    文字、字体
forms.css    表单
mend.css    补丁
print.css    打印
主要的 master.css 
布局，版面 layout.css 
专栏 columns.css 
文字 font.css 
打印样式 print.css 
主题 themes.css

1.布局相关
语义    命名    简写
盒容器    wrap    wrap
盒子    box    box
容器    container    container
主栏    main    main
侧栏    sidebar/aside    sidebar/aside
文档    doc    doc
头部    head    hd
主体    body    bd
底部    foot    ft
2.模块相关
语义    命名    简写
导航    navigation    nav
面包屑    crumb    crumb
菜单    menu    menu
选项卡    tab    tab
标题    title    title
内容    content    content
列表    list    list
表格    table    table
排行榜    rank    rank
登陆    login    login
表单    form    form
品牌标识    logo    logo
广告    advertise    ad
搜索    search    search
切换    slide    slide
提示    tips    tips
版权    copyright    copyright
按钮    button    btn
输入    input    ipt
结果    result    result
下载    download    dowload
新闻    news    news
注册    register    reg
热点    hot    hot
展开    collapse    collapse
警告    alert    alert
提示    tooltip    tooltip
下拉    dropdown    dropdown
3.状态相关
语义    命名    简写
语义    命名    简写
选中    selected    selected
当前    current    current
激活    active    active
显示    show    show
隐藏    hidden    hide
打开    open    open
关闭    close    close
出错    error    err
禁用    disabled    disabled
扩展    extend    extend