html/css命名
按web标准来进行网站设计时,尤其是比较大型的门户站,会发现用的css会特别多,名字随意命名,会严重增加后期维护成本及团队合作难度,所以在网页制作中制定html/CSS命名规范,可以改善优化功效,特别是团队合作时候可以提供合作制作效率
- 常用命名
外 套:wrap 外 套:wrapper
页 眉:header 整个页面:content 页 脚:footer 侧栏:aside
lOGO:logo 标语/广告:banner 版 权:copyRight 商 标:label
导航:nav 子导航:subnav 顶导航:topnav 边导航:sidenav
面包屑:crumb 菜单:menu 子菜单:subMenu 搜索:search
登陆:login 登录条:loginBar 注册:regsiter 栏目:column
边导航图标:sidebnav_icon
小技巧:tips 注释:note 弹窗:pop 状态:status
提醒框:notice 错误提示框:error 提示信息:msg 按钮:btn
投票:vote 加入:joinus
合作伙伴:partner 友情链接:friendLink
新闻:news 下载:download 服务:service 指南:guide
文章列表:list 滚动:scroll 标签页:tab 热点:hot
当前:current 选中:selected
常用配合标签div、h1、h2、h3、h4、span、b、strong、i、em等 - class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的在规划中统一命名.其他样式名 称由 小写英文 & 数字 & _ 来组合命名,如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合;
- 使用中文拼音,命名要有意义,尽量使用简易的单词组合;
- 避免出现如left、right等方向名词的class/id;
- 避免出现如xxx1、xxx2等的数字class/id;
- 尽可能提高代码模块的复用,复用模块、独立模块可按xxx命名,xxx下面再取xxx-hd(头部)、xxx-bd(内容)、xxx-ft(底部)命名;
- 公共组件因为高度重用,命名从简,不要加前缀。总之,命名要语义化、简明化。
- 重复使用率高的命名, 请以自己代号加下划线起始,比如xh_aside;
JS命名
- 变量命名:驼峰式命名。原生JavaScript变量要求是纯英文字母,首字母须小写,如iTaoLun; jQuery变量要求首字符为’_’,其他与原生JavaScript 规则相同,如: _iTaoLun;另,要求变量集中声明,避免全局变量。
- 类命名:首字母大写,驼峰式命名. 如 ITaoLun;
- 函数命名:首字母小写驼峰式命名. 如iTaoLun();
- 命名语义化,尽可能利用英文单词或其缩写;