02-2 CSS的命名规范

CSS的命名规范
1. id的命名
(1)页面结构
　　容器: container 
　　页头：header
　　内容：content/container
　　页面主体：main
　　页尾：footer 
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
　　导航：nav 
　　主导航：main_nav
　　子导航：sub_nav 
　　顶导航：top_nav
　　边导航：sidebar
　　左导航：leftsidebar
　　右导航：rightsidebar
　　菜单：menu 
　　子菜单：sub_menu
　　标题: title 
　　摘要: summary
　　(3)功能
　　标志：logo
　　广告：banner
　　登陆：login
　　登录条：login_bar
　　注册：regsiter 
　　搜索：search
　　功能区：shop 
　　标题：title 
　　加入：joinus 
　　状态：status 
　　按钮：btn
　　滚动：scroll
　　标签页：tab 
　　文章列表：list
　　提示信息：msg
　　当前的: current
　　小技巧：tips
　　图标: icon 
　　注释：note 
　　指南：guild 
　　服务：service
　　热点：hot
　　新闻：news
　　下载：download
　　投票：vote
　　合作伙伴：partner 
　　友情链接：link
　　版权：copyright
2. class的命名
(1)颜色:使用颜色的名称或者16进制代码,如
　　.color_red { color: red; }
　　.f60 { color: #f60; } 
　　.ff8600 { color: #ff8600; } 
　　(2)字体大小,直接使用"font+字体大小"作为名称,如
　　.font12px { font-size: 12px; }
　　.font9pt {font-size: 9pt; }
　　(3)对齐样式,使用对齐目标的英文名称,如
　　.left { float:left; }
　　.bottom { float:bottom; } 
　　(4)标题栏样式,使用"类别+功能"的方式命名,如
　　.barnews { }
　　.barproduct { }

 

转载于:https://www.cnblogs.com/kiwiphp/archive/2013/06/03/3115554.html