【命名规范】Web前端命名规范手册

2023-12-28 11:59:09

一、规范目的

1.1 概述

提高团队协作效率,便于后台人员添加功能及前端后期优化维护, 前端开发人员必须按本文档规范进行前台页面开发。 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档。

二、命名规范

2.1 文件命名规则

  • 文件名称统一用小写的英文字母数字下划线的组合,其中不得包含汉字、空格和特殊字符;
  • 命名原则
    • 每个成员能够方便的理解每个文件的意义
    • 在文件夹中使用“按名称排例”命令时,同一种大类文件排列一起,以便查找、修改、替换、计算负载量等操作

a. HTML的命名原则

  • 引文件统一使用index.htm index.html index.asp文件名(小写)
  • 各子页命名原则首先应以栏目名的英语翻译取单一单词为名称

关于我们 \ aboutus;信息反馈 \ feedback;产品 \ product

  • 如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示
  • 每一个目录中应该包含一个缺省(默认)的html 文件,文件名统一用index.htm index.html index.asp

b. 图片的命名原则

  • 图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质
位置名称示例
放置在页面顶部的广告、装饰图案等长方形图片bannerbanner_sohu.gif
标志性图片logologo_police.gif
在页面上位置不固定且带有链接的小图片buttonbutton_beauty.gif
在页面上某位置连续出现,性质相同的链接栏目图片menumenu_aboutus.gif
装饰用的照片picpic_people.jpg
不带链接表示标题的图片titletitle_news.gif
鼠标感应效果图片命名图片名_on/offmenu1_on.gif/menu1_off.gif

c. javascript的命名原则

  • 功能表述

广告条js文件 ad.js ;弹出窗口jst文件 pop.js

d. 动态语言文件命名原则

  • 性质_描述,描述可以有多个单词,用_隔开,性质一般是该页面概要

register_form.asp;register_post.asp;topic_lock.asp

e. class类命名规则

位置名称
header
内容content/container
footer
导航nav
侧栏sidebar
栏目column
页面外围控制整体布局宽度wrapper
左右中left right center
登录条loginbar
标志logo
广告banner
页面主体main
热点hot
新闻news
下载download
子导航subnav
菜单menu
子菜单submenu
搜索search
友情链接friendlink
页脚footer
版权copyright
滚动scroll
内容content
标签页tab
文章列表list
提示信息msg
小技巧tips
栏目标题title
加入joinus
指南guild
服务service
注册regsiter
状态status
投票vote
合作伙伴partner

f. id的命名:

(1)页面结构
位置名称
容器container
页头header
内容content/container
页面主体main
页尾footer
导航nav
侧栏sidebar
栏目column
页面外围控制整体布局宽度wrapper
左右中left right center
(2)导航
位置名称
导航nav
主导航mainnav
子导航subnav
顶导航topnav
边导航sidebar
左导航leftsidebar
右导航rightsidebar
菜单menu
子菜单submenu
标题title
摘要summary
(3)功能
位置名称
标志logo
广告banner
登陆login
登录条loginbar
注册regsiter
搜索search
功能区shop
标题title
加入joinus
状态status
按钮btn
滚动scroll
标签页tab
文章列表list
提示信息msg
当前的current
小技巧tips
图标icon
注释note
指南guide
服务service
热点hot
新闻news
下载download
投票vote
合作伙伴partner
友情链接link
版权copyright

g. 注释写法

/* Footer */

h. css基本样式

  • 重定义的最先,伪类其次,自定义最后,便于自己和他人阅读
/* CSS Document */
body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}   
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}

a {color:#2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}

文章来源:https://blog.csdn.net/weixin_64210950/article/details/135197033
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。