命名规范

项目中文件名字

1：符合应用场景
2：一律使用小写英文字母，统一要求，英文，禁止中文拼音。
3：命名规则：是团队成员可以看懂自己的代码，自己也方便查找并修改

xxx.hml文件的命名

1：主页面: index.html
2: 子页面，首页: home.html 我的: mine.html
关于我们: abutus.html 信息反馈 feedback
产品：product 购物: shop 计数器：count
3:一级页面：登录：login.html login.css logo.js
注册：resign.html
用户管理：userManage.html

图片的命名规则

1：图片文件的后缀 xxx.png xxx.jpg xxx.gif xxx.bmp

图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类
列如：产品类 product 产品下的 电视 手机 product_tv product_iphone
大类列如：广告，标志，菜单，按钮

• 放在页面顶部的【广告】 【banner】
• 企业商标 【标志】性的图片 【logo】
• 在页面上某一个位置连续出现，性质相同的连接栏目的图片我们取名： 【menu】
• 装饰用的照片我们取名：【pic】
• 不带链接表示【标题的图片】我们取名：【title】

范 例：banner_sou.gif
banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_TV.jpg
…

文件夹存放规范

• www 或者 web 存放前端代码文件
• css 存放 xxx.css 文件
• src 存放 xxx.js 文件
• views 或者 pages 存放 xxx.html 或者 xxx.vue 文件
• assetes 存放所有【资源文件】
• image 存放图片文件
• library 存放【第三方库】文件
• media 存放媒体文件
• build 存放经过【自动化构建工具】或者【自动化打包工具】处理后的文件
• serve 存放服务端代码文件
• api 存放 【接口】文件
• modules 存放【数据库操作】文件

css 书写规范 性能优化方案

1：禁止class 与 id 重名
2：书写顺序：布局定位属性—>自身属性—>文本属性—>其他属性

 .box{
     /* 布局定位类 */
     float:left;
     /* 自身属性 */
     width:100px;
     height:100px;
     /* 文本类 */
     text-align:left;
     /* 其他类 */
     vertical-align: middle;
 }

布局定位类

margin/padding/float/clear/position

自身属性

width/height/background/bord

文本属性

font/color/text-align/text-decoration/text-indent/white-space/othertext/content

其他属性

list-style（列表样式）/vertical-align/cursor/z-index(层叠顺序)/zomm

CSS优化

1：全局考虑样式：提高代码重复使用
2：多使用兼容性好的样式 css2
3：减少使用position absolute fixed 属性
4：重要图片加【alt属性】 重要标签加【title属性】
5：合理使用选择器，尽量少使用伪类选择器 nth:type-of-child()
6:不到万不得已，不要用 ！important 权重最高
7：注意： 大区域一定要加注释 小区域适当 方便查看
8：尽量使用复合属性 magin border

CSS 命名规范

页面结构

容器：container/wrap 
整体宽度：wrapper
页头：header
内容：content
侧栏：sidebar
栏目：column
中间内容：center

导航

导航：nav
主导航：mainNar/gloaNav  main_nav/gloab_nav  main-nav/gloab-nav
子导航：subNav   sub_nav  sub-nav
顶部导航：topNav  top_nav  top-nav
边部导航：sideBar  
左边导航：leftSideBav
右边导航：rightSideBav
边导航图片：sideBarIcon
菜单：menu
子菜单：subMenu  sub_menu  sub-menu

标志：logo 
登陆：login
登录条：loginbar 
注册：regsiter
产品：products 
产品价格：products_prices
产品评论：products_review 
编辑评论：editor_review
最新产品：news_release 
最新产品：news_release
广告/标语：banner 
摘要:summary
生产商：publisher 
缩略图：screenshot
常见问题：faqs 
关键词：keyword
博客：blog 
论坛：forum
搜索：search 
搜索输入框：search_input
搜索输出：search_output 
搜索结果：search_results
加入我们：joinus 
状态：status
按钮：btn 
滚动：scroll
标签页：tab 
文章列表：list
提示信息：msg/message 
当前的: current
小技巧：tips 
皮肤：skin
充值：pay 
活动：activities
推广：promotion 
公告：announcement
排行：ranking 
公司简介：company_profile
公司设备：equipment 
公司荣誉：glories
企业文化：culture 
企业规模：scale
营销网络：sales_network 
组织机构：organization
技术力量：technology 
分支机构：branches
企业资质：enterprise_qualification 
公司实力：strength_strength
经营理念：operation_principle 
经理致辞：manager_oration
发展历程：development_history 
工程案例：engineering_projects
分类浏览：browse_by_category 
应用领域：application_fields
人力资源：human_resource_hr 
领导致辞： leader_oration
客户留言：customer_message 
客户服务：customer_service
您的要求：your_requirements 
销售信息：sales_information
招商：enterprise_establishing 
教育培训：education_training
在线交流：online_communication 
质量认证：quality_certification
合作加盟：joinIn_cooperation 
产品描述：products_description
业务范围：business_scope 
产品销售：sales_sales
联系我们：contact_us 
信息发布：information

返回首页：homepage 
产品定购：order
电子商务：e_business 
版权所有：copy _right
友情连结：hot_link 
行业新闻：trade_news
行业动态：trends 邮编：
postal_code_zipcode
新闻动态：news_trends 
公司名称：company_name
销售热线：sales_hotline 
联系人：contact_person
建设中：in_construction 
证书：certificate
地址：add 
电话：tel
传真：fax 
产品名称：product_name
产品说明：description 
价格：price
品牌：brand 
规格：specification
尺寸：size 
生产厂家：manufacuturer
型号：model 
产品标号：item_no
技术指标：technique_data 
产品描述：description
产地：production_place 
用途：application
论坛：forum 
在线订购：on_line_order
招标：bidInviting 
综述：general
业绩：achievements 
大事：great_event
动态：trends 
服务：service
投资：investment 
行业：industry
规划：programming 
环境：environment
发送：delivery 
提交：submit
重写：reset 
社区：community
业务：business 
在线调查：online_inquiry
下载中心：download 
意见反馈：feedback
常见问题：faq 
中心概况：general_profile
游乐园：amusement_park 
专题报道：special_report
图标: icon 
注释：note
指南：guild 
服务：service
热点：hot 
新闻：news
下载：download 
投票：vote
商标：label/branding 
当前位置：breadcrumb/loc
购物车：shop 
标签：tag
信誉：siteinfo_credits 
网站信息：siteinfo
法律声明：siteinfo_legal 
合作伙伴：partner
友情链接：friendlink 
版权：copyright