英文命名规则

来源:互联网 发布:淘宝无线引流 编辑:程序博客网 时间:2024/06/03 13:12

文件命名要以最简短的名称提现清晰地含义。
文件名尽量以英文单词为主。单个单词文件名称全部小写。
如文件名为两个或两个以上单词组成,文件名称第二个单词起的第一个字母要大写
例如:友情链接(单个):link   公司简介(两个):aboutUs  
所有命名如果利用数字编号来区分文件,第一个文件命名中的1必须忽略。例如:aboutUs  aboutUs2   aboutUs3
命名单词组合顺序为 划分文件项目或类型单词+功能性单词+用途类单词或编号
例如:productAdd   product为产品这个项目的名词后面加上Add为这个页面的功能为添加(增加)。如有多个添加产品的页面就可以理由编号区分如:productAdd   productAdd2   productAdd3
文件夹命名:
1.       网页文件按照板块,项目来进行文件夹划分
例如前台产品类文件则归纳在product文件夹内。如果每个项目页面不多可以同存放在一个目录下但是要确保以后增加量小管理维护方便,否则一律按照文件夹进行划分。后台举例:如卖方后台的产品添加页面则为:buyerManage/productAdd
2.       每个板块或项目的图像文件要跟在该目录内命名为:images
3.       swf文件建立在该目录下的images文件夹内的swf文件夹
4.       所有css文件要统一放在根目录下的style文件内,命名规则详见css命名
5.       js文件放在该网页目录下的js文件夹内
网页命名:
       在html代码中的语义性标签我们可以直接借鉴使用,但不可以单独使用。例如:注册表单页面我们不可以定义:form  正确的是 regForm
图像命名:
       图像命名与文件命名雷同,区别在于图像文件命名必须指定它用应用的版块名或功能名称。例如页首banner不能直接命名banner 正确的命名为:headerBanner 公司简介的banner就是aboutUsBanner
标志要有区分如大标志:logoBg 小标志:logoSm。
       注册用小标志例如小箭头,对号之类的可以这样命名:regIco   regIco2
       导航背景图片:navBg
复杂举例:一个网页中有三个导航那么我们可以按照数字编号来命名或位置类命名。
数字编号举例:nav   nav2   nav3   背景图片命名navBg   nav2Bg   nav3Bg
位置命名:navTop   navCenter   NavBottom   背景图片命名:navTop Bg   navCenter Bg   NavBottomBg
       如该图片应用到多个页面或位置可用通用名称例如网页背景可命名为:bodyBg
Css命名规则
       Css文件名称要围绕所应用的范围。例如买方管理中心头部css文件为sellerManageHeader.css。
       注意:如果该css样式只针对一个页面应用时不允许建立css文件,一律写在该文件的head标签内即可。
       Css样式定义时尽量应用class定义,定义全部标签要谨慎要考虑后期的可延展性。不能影响后期升级开发。
       在定义局部同意样式是尽可能利用包含关系来定义 例如定义Class=“loginInput”中的文本域时不要为了方便书写成input{…},正确的书写方式:.loginInput input{…}

 

虽然是很基础的知识,但很少有人把这些东西总结出来,我觉得楼主总结得蛮好。
尽管很多人不是初学者,这些东西也未必掌握得非常熟练,这不是一朝一夕能完善得很好的。
就楼主的文章结构讨论几点个人的观点:
1. 网页
   A. 很赞同以数字尾缀来区分同类文件;
   B. 项目不同,文件复杂程度不同,不同界面组需要以文件夹分开。简单项目无须区分。
   C. 同组界面,根据不同功能建议采用不同前缀加以区分,按文件名排列时便于查找。
2. 图片
   A. 注意页面用图与数据用图分文件夹放置,数据用图(如用户头像、产品图片)应放在临时文件夹中。
   B. 如采用sprites技术,可以考虑与css文件放在同一文件夹内。
3. flash
   A. 很赞同放在与img同目录,但看数量多少来了,有的站flash组件的维护量也是不小的。
4. 样式
   A. 样式命名要注意避免冲突、语义、模块化等,细节非常复杂,不是一句两句能说清的。
   B. 文中的例子不太赞同,如banner,可以直接命名为div class="banner",而样式文件中则这样写:.header .banner {},就能有效地避免样式冲突,而.header .headerBanner {}就显得臃肿了。

原创粉丝点击