ZZ CSS布局命名规则

作者为 moface    暂无评论

近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到的一些命名规则，当然，这些命名并不是绝对的，只是园子认为有个良好的命名习惯无论是对网站后期维护还是团队协作方面都会有很大的帮助。

网站一般布局命名

• 页头:header
• 登录条:loginBar
• 标志:logo
• 侧栏:sideBar
• 广告:banner
• 导航:nav
• 子导航:subNav
• 菜单:menu
• 子菜单:subMenu
• 搜索:search
• 滚动:scroll
• 页面主体:main
• 内容:content
• 指南:guild
• 服务:service
• 热点:hot
• 新闻:news
• 下载:download
• 注册:regsiter
• 状态:status
• 标签页:tab
• 文章列表:list
• 提示信息:msg
• 小技巧:tips
• 栏目标题:title
• 加入:joinus
• 按钮:btn
• 投票:vote
• 合作伙伴:partner
• 友情链接:friendLink
• 页脚:footer
• 版权:copyRight

常用ID命名

• 外　套:wrap
• 主导航:mainNav
• 子导航:subnav
• 页　脚:footer
• 整个页面:　content
• 页　眉:header
• 页　脚:footer
• 子菜单:submenu
• 边导航图标:sidebarIcon
• 注释:　note
• 面包屑:breadCrumb(即页面所处位置导航提示)
• 容器:　container
• 内容:　content
• 搜索:　search
• 登陆:　login
• 功能区:shop(如购物车，收银台)
• 当前的　current
• 商　标:label
• 标　题:title
• 主导航:mainNav(globalNav)
• 顶导航:topnav
• 边导航:sidebar
• 左导航:leftsideBar
• 右导航:rightsideBar
• 旗　志:logo
• 标　语:banner
• 菜单内容1: menu1Content
• 菜单容量:　menuContainer

css样式表的命名

• 基本的或公用的：base.css
• 主要的:master.css
• 布局，版面:layout.css
• 打印样式:print.css
• 主题:themes.css
• 专栏:columns.css
• 针对文字:font.css

转自园子博客