• 欢迎访问ByWei.Cn,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,加入百味博客 软件定制QQ群
  • 已升级为最新版主题,并将持续优化改造中,支持说说碎语功能,可像添加文章一样直接添加说说,博客主题升级啦
  • 感谢您百度求点赞啊!百度网址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏百味博客吧
  • 博主热烈欢迎 软件定制开发 联系:http://www.bywei.cn

html/css/js的web标准命名规范

Web前端 百味博客 10年前 (2013-04-08) 1246次浏览 0个评论 扫描二维码

html/css命名

按web标准来进行网站设计时,尤其是比较大型的门户站,会发现用的css会特别多,名字随意命名,会严重增加后期维护成本及团队合作难度,所以在网页制作中制定html/CSS命名规范,可以改善优化功效,特别是团队合作时候可以提供合作制作效率

    1. 常用命名

      外 套: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等

    2. class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的在规划中统一命名.其他样式名 称由 小写英文 & 数字 & _ 来组合命名,如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合;
    3. 使用中文拼音,命名要有意义,尽量使用简易的单词组合;
    4. 避免出现如left、right等方向名词的class/id;
    5. 避免出现如xxx1、xxx2等的数字class/id;
    6. 尽可能提高代码模块的复用,复用模块、独立模块可按xxx命名,xxx下面再取xxx-hd(头部)、xxx-bd(内容)、xxx-ft(底部)命名;
    7. 公共组件因为高度重用,命名从简,不要加前缀。总之,命名要语义化、简明化。
    8.  重复使用率高的命名, 请以自己代号加下划线起始,比如xh_aside;

JS命名

  1. 变量命名:驼峰式命名。原生JavaScript变量要求是纯英文字母,首字母须小写,如iTaoLun; jQuery变量要求首字符为’_’,其他与原生JavaScript 规则相同,如: _iTaoLun;另,要求变量集中声明,避免全局变量。
  2. 类命名:首字母大写,驼峰式命名. 如 ITaoLun;
  3. 函数命名:首字母小写驼峰式命名. 如iTaoLun();
  4. 命名语义化,尽可能利用英文单词或其缩写;

百味博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:html/css/js的web标准命名规范
喜欢 (0)
[微信扫一扫]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址