首页

关于前端HTML、CSS、JAVASCRIPT命名规范及文件存放规范参考

标签:前端开发规范,javascript命名原则,css命名原则,HTML命名     发布时间:2018-01-31   

一、命名规则

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

A、HTML 的命名原则

         html文件后缀名统一为.html,优先使用简短有意义的英文名命名,不要使用中文字符名称,同时将对应界面搞放于同目录中,若界面搞命名为中文名,请重新命名与html文件同名,以方便后续添加功能时查找对应页面;
引文件(首页)统一使用default.html、default.aspx文件名(小写)。

例如:

1.   关于我们  \ aboutus
2.   信息反馈  \ feedback
3.   产 品  \ product

功能性页面以性质_描述,描述可以有多个单词,用“_”隔开,性质一般是该页面的概要。

B、图片的命名原则

          图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质。

例如:广告、标志、菜单、按钮等等。

1.   放置在页面顶部的广告、装饰图案等长方形的图片取名:banner
2.   标志性的图片取名为:logo
3.   在页面上位置不固定并且带有链接的小图片我们取名为:btn
4.   在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名: menu
5.   装饰用的照片我们取名:pic
6.   不带链接表示标题的图片我们取名:title

范例:

功能

样例1

样例2

广告/装饰/长图

banner_xxxx1.gif

banner_xxxx2.gif

连续(菜单)菜单图

menu_aboutus.gif

menu_ feedback.gif

标题图

title_news.gif

title_ product.gif

标志图

logo_police.gif

logo_national.gif

装饰图

pic_xxxx1.jpg

pic_xxxx2.jpg

小图标

ico_xxxx1.gif

ico_xxxx2.jpg

导航图片

nav_xxxx1.gif

nav_xxxx2.jpg

按钮图

btn_xxxx1.gif

btn_xxxx2.gif

鼠标感应效果图片命名规范为"图片名+_+on/off"。例如:menu_xx_on.gif  menu_xx _off.gif

C、css命名原则

     以性质_描述,描述可以有多个单词,用“_”隔开,性质一般是该功能的概要。

范例:

功能

样例1

共用

base.css

首页

index.css

全站

core.css

复位

reset.css

频道全局

stock_global.css

D、javascript 的命名原则

     以性质_描述,描述可以有多个单词,用“_”隔开,性质一般是该功能的概要。

范例:

功能

样例1

样例2

广告条

功能_banner1.js

功能_banner2.js

弹出窗口

pop_default.js

pop_stock.js

共用

common.js

全局

global.js

E、动态语言文件命名原则

使用简短有意义的英文名命名

范例:

功能

样例1

样例2

注册页面

register.aspx

register.aspx

专题页面

topic.aspx

topic.aspx

具体可参照HTML命名规则。

二、文件夹及文件存放位置规范

目录结构主要分为四类,需要注意的是,所有命名必须为小写英文,不能大写或中文。

目录的命名尽可能使用英文或者全拼表达目录内的页面作用(语义化),需要注意的是不要使用中文词组简拼(eg: 目录--> ml)。简拼容易出现重复、或者目录结构复杂的时候容易出现混乱,给后期维护带来很大的麻烦。

范例:

功能

文件夹

说明

图片

images

存放图片文件

脚本

js

存放Javascript脚本

样式

css

存放css样式脚本

包含文件

inc

存放include文件

Flash

flash

存放flash文件




    • ◆ 相关内容